[FEAT] Add ability to override chat user icon and name in embedded chat widget (#1067)

* add ability to override chat user icon and name in embedded chat widget

* publish embed changes

embed/README.md

@@ -14,6 +14,7 @@ This folder of AnythingLLM contains the source code for how the embedded version
 The AnythingLLM Embedded chat widget allows you to expose a workspace and its embedded knowledge base as a chat bubble via a `<script>` or `<iframe>` element that you can embed in a website or HTML.
 
 ### Security
+
 - Users will _not_ be able to view or read context snippets like they can in the core AnythingLLM application
 - Users are assigned a random session ID that they use to persist a chat session.
 - **Recommended** You can limit both the number of chats an embedding can process **and** per-session.
@@ -21,6 +22,7 @@ The AnythingLLM Embedded chat widget allows you to expose a workspace and its em
 _by using the AnythingLLM embedded chat widget you are responsible for securing and configuration of the embed as to not allow excessive chat model abuse of your instance_
 
 ### Developer Setup
+
 - `cd embed` from the root of the repo
 - `yarn` to install all dev and script dependencies
 - `yarn dev` to boot up an example HTML page to use the chat embed widget.
@@ -34,6 +36,7 @@ While in development mode (`yarn dev`) the script will rebuild on any changes to
 ### `<script>` tag HTML embed
 
 The primary way of embedding a workspace as a chat widget is via a simple `<script>`
+
 ```html
 <!--
 An example of a script tag embed
@@ -44,13 +47,14 @@ REQUIRED data attributes:
 <script
   data-embed-id="5fc05aaf-2f2c-4c84-87a3-367a4692c1ee"
   data-base-api-url="http://localhost:3001/api/embed"
-  src="http://localhost:3000/embed/anythingllm-chat-widget.min.js">
-</script>
+  src="http://localhost:3000/embed/anythingllm-chat-widget.min.js"
+></script>
 ```
 
 ### `<script>` Customization Options
 
 **LLM Overrides**
+
 - `data-prompt` — Override the chat window with a custom system prompt. This is not visible to the user. If undefined it will use the embeds attached workspace system prompt.
 
 - `data-model` — Override the chat model used for responses. This must be a valid model string for your AnythingLLM LLM provider. If unset it will use the embeds attached workspace model selection or the system setting.
@@ -58,6 +62,7 @@ REQUIRED data attributes:
 - `data-temperature` — Override the chat model temperature. This must be a valid value for your AnythingLLM LLM provider. If unset it will use the embeds attached workspace model temperature or the system setting.
 
 **Style Overrides**
+
 - `data-chat-icon` — The chat bubble icon show when chat is closed. Options are `plus`, `chatCircle`, `support`, `search2`, `search`, `magic`.
 
 - `data-button-color` — The chat bubble background color shown when chat is closed. Value must be hex color code.
@@ -78,15 +83,20 @@ REQUIRED data attributes:
 
 - `data-position` - Adjust the positioning of the embed chat widget and open chat button. Default `bottom-right`. Options are `bottom-right`, `bottom-left`, `top-right`, `top-left`.
 
+- `data-assistant-name` - Set the chat assistant name that appears above each chat message. Default `AnythingLLM Chat Assistant`
+
+- `data-assistant-icon` - Set the icon of the chat assistant.
 
 **Behavior Overrides**
+
 - `data-open-on-load` — Once loaded, open the chat as default. It can still be closed by the user.
 
 - `data-support-email` — Shows a support email that the user can used to draft an email via the "three dot" menu in the top right. Option will not appear if it is not set.
 
-
 ### `<iframe>` tag HTML embed
+
 _work in progress_
 
 ### `<iframe>` Customization Options
-_work in progress_
+
+_work in progress_

embed/src/components/ChatWindow/ChatContainer/ChatHistory/HistoricalMessage/index.jsx

@@ -19,7 +19,8 @@ const HistoricalMessage = forwardRef(
           <div
             className={`text-[10px] font-medium text-gray-400 ml-[54px] mr-6 mb-2 text-left`}
           >
-            AnythingLLM Chat Assistant
+            {embedderSettings.settings.assistantName ||
+              "Anything LLM Chat Assistant"}
           </div>
         )}
         <div
@@ -31,7 +32,7 @@ const HistoricalMessage = forwardRef(
         >
           {role === "assistant" && (
             <img
-              src={AnythingLLMIcon}
+              src={embedderSettings.settings.assistantIcon || AnythingLLMIcon}
               alt="Anything LLM Icon"
               className="w-9 h-9 flex-shrink-0 ml-2 mt-2"
               id="anything-llm-icon"

embed/src/components/ChatWindow/ChatContainer/ChatHistory/PromptReply/index.jsx

@@ -13,7 +13,7 @@ const PromptReply = forwardRef(
       return (
         <div className={`flex items-start w-full h-fit justify-start`}>
           <img
-            src={AnythingLLMIcon}
+            src={embedderSettings.settings.assistantIcon || AnythingLLMIcon}
             alt="Anything LLM Icon"
             className="w-9 h-9 flex-shrink-0 ml-2"
           />
@@ -33,7 +33,7 @@ const PromptReply = forwardRef(
       return (
         <div className={`flex items-end w-full h-fit justify-start`}>
           <img
-            src={AnythingLLMIcon}
+            src={embedderSettings.settings.assistantIcon || AnythingLLMIcon}
             alt="Anything LLM Icon"
             className="w-9 h-9 flex-shrink-0 ml-2"
           />
@@ -60,7 +60,8 @@ const PromptReply = forwardRef(
         <div
           className={`text-[10px] font-medium text-gray-400 ml-[54px] mr-6 mb-2 text-left`}
         >
-          AnythingLLM Chat Assistant
+          {embedderSettings.settings.assistantName ||
+            "Anything LLM Chat Assistant"}
         </div>
         <div
           key={uuid}
@@ -68,7 +69,7 @@ const PromptReply = forwardRef(
           className={`flex items-start w-full h-fit justify-start`}
         >
           <img
-            src={AnythingLLMIcon}
+            src={embedderSettings.settings.assistantIcon || AnythingLLMIcon}
             alt="Anything LLM Icon"
             className="w-9 h-9 flex-shrink-0 ml-2"
           />

embed/src/hooks/useScriptAttributes.js

@@ -21,6 +21,8 @@ const DEFAULT_SETTINGS = {
   sponsorText: "Powered by AnythingLLM", // default sponsor text
   sponsorLink: "https://useanything.com", // default sponsor link
   position: "bottom-right", // position of chat button/window
+  assistantName: "AnythingLLM Chat Assistant", // default assistant name
+  assistantIcon: null, // default assistant icon
 
   // behaviors
   openOnLoad: "off", // or "on"