Allow readable username passed in script widget (#2131)

embed/README.md

@@ -93,6 +93,8 @@ REQUIRED data attributes:
 
 - `data-text-size` - Set the text size of the chats in pixels.
 
+- `data-username` - A specific readable name or identifier for the client for your reference. Will be shown in AnythingLLM chat logs. If empty it will not be reported.
+
 **Behavior Overrides**
 
 - `data-open-on-load` — Once loaded, open the chat as default. It can still be closed by the user. To enable set this attribute to `on`. All other values will be ignored.

embed/src/hooks/useScriptAttributes.js

@@ -30,6 +30,7 @@ const DEFAULT_SETTINGS = {
   // behaviors
   openOnLoad: "off", // or "on"
   supportEmail: null, // string of email for contact
+  username: null, // The display or readable name set on a script
 };
 
 export default function useGetScriptAttributes() {

embed/src/models/chatService.js

@@ -32,7 +32,7 @@ const ChatService = {
       .catch(() => false);
   },
   streamChat: async function (sessionId, embedSettings, message, handleChat) {
-    const { baseApiUrl, embedId } = embedSettings;
+    const { baseApiUrl, embedId, username } = embedSettings;
     const overrides = {
       prompt: embedSettings?.prompt ?? null,
       model: embedSettings?.model ?? null,
@@ -45,6 +45,7 @@ const ChatService = {
       body: JSON.stringify({
         message,
         sessionId,
+        username,
         ...overrides,
       }),
       signal: ctrl.signal,

frontend/src/pages/GeneralSettings/EmbedChats/ChatRow/index.jsx

@@ -16,6 +16,11 @@ export default function ChatRow({ chat, onDelete }) {
     openModal: openResponseModal,
     closeModal: closeResponseModal,
   } = useModal();
+  const {
+    isOpen: isConnectionDetailsModalOpen,
+    openModal: openConnectionDetailsModal,
+    closeModal: closeConnectionDetailsModal,
+  } = useModal();
 
   const handleDelete = async () => {
     if (
@@ -42,7 +47,10 @@ export default function ChatRow({ chat, onDelete }) {
             {chat.embed_config.workspace.name}
           </a>
         </td>
-        <td className="px-6 py-4 font-medium whitespace-nowrap text-white">
+        <td
+          onClick={openConnectionDetailsModal}
+          className="px-6 py-4 cursor-pointer transform transition-transform duration-200 hover:scale-105 hover:shadow-lg"
+        >
           <div className="flex flex-col">
             <p>{truncate(chat.session_id, 20)}</p>
             <ConnectionDetails
@@ -81,6 +89,18 @@ export default function ChatRow({ chat, onDelete }) {
           closeModal={closeResponseModal}
         />
       </ModalWrapper>
+      <ModalWrapper isOpen={isConnectionDetailsModalOpen}>
+        <TextPreview
+          text={
+            <ConnectionDetails
+              sessionId={chat.session_id}
+              verbose={true}
+              connection_information={chat.connection_information}
+            />
+          }
+          closeModal={closeConnectionDetailsModal}
+        />
+      </ModalWrapper>
     </>
   );
 }
@@ -109,15 +129,44 @@ const TextPreview = ({ text, closeModal }) => {
   );
 };
 
-const ConnectionDetails = ({ connection_information }) => {
+const ConnectionDetails = ({
+  sessionId,
+  verbose = false,
+  connection_information,
+}) => {
   let details = {};
   try {
     details = JSON.parse(connection_information);
   } catch {}
 
   if (Object.keys(details).length === 0) return null;
+
+  if (verbose) {
+    return (
+      <>
+        <p className="text-xs text-slate-400">sessionID: {sessionId}</p>
+        {details.username && (
+          <p className="text-xs text-slate-400">username: {details.username}</p>
+        )}
+        {details.ip && (
+          <p className="text-xs text-slate-400">
+            client ip address: {details.ip}
+          </p>
+        )}
+        {details.host && (
+          <p className="text-xs text-slate-400">
+            client host URL: {details.host}
+          </p>
+        )}
+      </>
+    );
+  }
+
   return (
     <>
+      {details.username && (
+        <p className="text-xs text-slate-400">{details.username}</p>
+      )}
       {details.ip && <p className="text-xs text-slate-400">{details.ip}</p>}
       {details.host && <p className="text-xs text-slate-400">{details.host}</p>}
     </>

server/endpoints/embed/index.js

@@ -29,6 +29,7 @@ function embeddedEndpoints(app) {
           prompt = null,
           model = null,
           temperature = null,
+          username = null,
         } = reqBody(request);
 
         response.setHeader("Cache-Control", "no-cache");
@@ -41,6 +42,7 @@ function embeddedEndpoints(app) {
           prompt,
           model,
           temperature,
+          username,
         });
         await Telemetry.sendTelemetry("embed_sent_chat", {
           multiUserMode: multiUserMode(response),

server/utils/chats/embed.js

@@ -16,7 +16,7 @@ async function streamChatWithForEmbed(
   message,
   /** @type {String} */
   sessionId,
-  { promptOverride, modelOverride, temperatureOverride }
+  { promptOverride, modelOverride, temperatureOverride, username }
 ) {
   const chatMode = embed.chat_mode;
   const chatModel = embed.allow_model_override ? modelOverride : null;
@@ -180,8 +180,11 @@ async function streamChatWithForEmbed(
     prompt: message,
     response: { text: completeText, type: chatMode },
     connection_information: response.locals.connection
-      ? { ...response.locals.connection }
-      : {},
+      ? {
+          ...response.locals.connection,
+          username: !!username ? String(username) : null,
+        }
+      : { username: !!username ? String(username) : null },
     sessionId,
   });
   return;