- );
-};
diff --git a/frontend/src/components/ChatBubble/index.jsx b/frontend/src/components/ChatBubble/index.jsx
index 7ae52cb6..610f9037 100644
--- a/frontend/src/components/ChatBubble/index.jsx
+++ b/frontend/src/components/ChatBubble/index.jsx
@@ -1,28 +1,33 @@
import React from "react";
+import Jazzicon from "../UserIcon";
+import { userFromStorage } from "../../utils/request";
+import {
+ AI_BACKGROUND_COLOR,
+ USER_BACKGROUND_COLOR,
+} from "../../utils/constants";
export default function ChatBubble({ message, type, popMsg }) {
const isUser = type === "user";
+ const backgroundColor = isUser ? USER_BACKGROUND_COLOR : AI_BACKGROUND_COLOR;
return (
-
+
- {message && (
-
+
+
+
+
{message}
-
- )}
+
+
);
diff --git a/frontend/src/components/DefaultChat/index.jsx b/frontend/src/components/DefaultChat/index.jsx
index 1e993a4d..bfd0fbdc 100644
--- a/frontend/src/components/DefaultChat/index.jsx
+++ b/frontend/src/components/DefaultChat/index.jsx
@@ -8,6 +8,12 @@ import { isMobile } from "react-device-detect";
import { SidebarMobileHeader } from "../Sidebar";
import ChatBubble from "../ChatBubble";
import System from "../../models/system";
+import Jazzicon from "../UserIcon";
+import { userFromStorage } from "../../utils/request";
+import {
+ AI_BACKGROUND_COLOR,
+ USER_BACKGROUND_COLOR,
+} from "../../utils/constants";
export default function DefaultChatContainer() {
const [mockMsgs, setMockMessages] = useState([]);
@@ -30,201 +36,265 @@ export default function DefaultChatContainer() {
const MESSAGES = [
-
-
- Welcome to AnythingLLM, AnythingLLM is an open-source AI tool by
- Mintplex Labs that turns anything into a trained chatbot you
- can query and chat with. AnythingLLM is a BYOK (bring-your-own-keys)
- software so there is no subscription, fee, or charges for this
- software outside of the services you want to use with it.
-
-
-
- ,
+
+
+
-
-
-
-
- AnythingLLM is the easiest way to put powerful AI products like
- OpenAi, GPT-4, LangChain, PineconeDB, ChromaDB, and other services
- together in a neat package with no fuss to increase your
- productivity by 100x.
-
-
-
- ,
-
-
-
-
-
- AnythingLLM can run totally locally on your machine with little
- overhead you wont even notice it's there! No GPU needed. Cloud and
- on-premises installation is available as well.
-
- The AI tooling ecosystem gets more powerful everyday. AnythingLLM
- makes it easy to use.
-
- It's simple. All collections are organized into buckets we call{" "}
- "Workspaces". Workspaces are buckets of files, documents,
- images, PDFs, and other files which will be transformed into
- something LLM's can understand and use in conversation.
-
-
- You can add and remove files at anytime.
-
-
-
-
- ,
-
-
-
-
-
- Is this like an AI dropbox or something? What about chatting? It is
- a chatbot isn't it?
-
-
-
- ,
-
-
-
-
-
- AnythingLLM is more than a smarter Dropbox.
-
-
- AnythingLLM offers two ways of talking with your data:
-
-
- Query: Your chats will return data or inferences found with
- the documents in your workspace it has access to. Adding more
- documents to the Workspace make it smarter!
-
-
- Conversational: Your documents + your on-going chat history
- both contribute to the LLM knowledge at the same time. Great for
- appending real-time text-based info or corrections and
- misunderstandings the LLM might have.
-
-
- You can toggle between either mode in the middle of chatting!
-
-
-
- ,
-
-
-
-
-
- Wow, this sounds amazing, let me try it out already!
-
-
+ AnythingLLM is the easiest way to put powerful AI products like
+ OpenAi, GPT-4, LangChain, PineconeDB, ChromaDB, and other services
+ together in a neat package with no fuss to increase your
+ productivity by 100x.
+
+
+
+
+ ,
+
+
+
+
+
+
+
+
+ AnythingLLM can run totally locally on your machine with little
+ overhead you wont even notice it's there! No GPU needed. Cloud
+ and on-premises installation is available as well.
+
+ The AI tooling ecosystem gets more powerful everyday.
+ AnythingLLM makes it easy to use.
+
+
+
+
+
+ It's simple. All collections are organized into buckets we call{" "}
+ "Workspaces". Workspaces are buckets of files, documents,
+ images, PDFs, and other files which will be transformed into
+ something LLM's can understand and use in conversation.
+
+
+ You can add and remove files at anytime.
+
+
+
+
+
+
+
+ ,
+
+
+
+
+
+
+
+
+ Is this like an AI dropbox or something? What about chatting? It
+ is a chatbot isn't it?
+
+
+
+
+ ,
+
+
+
+
+
+
+
+
+ AnythingLLM is more than a smarter Dropbox.
+
+
+ AnythingLLM offers two ways of talking with your data:
+
+
+ Query: Your chats will return data or inferences found with
+ the documents in your workspace it has access to. Adding more
+ documents to the Workspace make it smarter!
+
+
+ Conversational: Your documents + your on-going chat history
+ both contribute to the LLM knowledge at the same time. Great for
+ appending real-time text-based info or corrections and
+ misunderstandings the LLM might have.
+
+
+ You can toggle between either mode{" "}
+ in the middle of chatting!
+
+
+
+
+ ,
+
+
+
+
+
+
+
+
+ Wow, this sounds amazing, let me try it out already!
+
+
-