Merge pull request #233 from openchatai/widget/user-obj

Widget/user obj
openchatai · Nov 9, 2023 · 6263b2b · 6263b2b
2 parents b3ee0a0 + 8e44527
commit 6263b2b
Show file tree

Hide file tree

Showing 8 changed files with 78 additions and 64 deletions.
diff --git a/backend/public/pilot.js b/backend/public/pilot.js
diff --git a/copilot-widget/index.html b/copilot-widget/index.html
@@ -22,6 +22,9 @@
           headers: {
             Authorization: "Bearer your_auth_token_goes_here",
           },
+          user: {
+            name: "John Doe",
+          },
         });
       };
     </script>

diff --git a/copilot-widget/lib/components/Messages.tsx b/copilot-widget/lib/components/Messages.tsx
@@ -11,6 +11,7 @@ import { useCopyToClipboard } from "@lib/hooks/useCopy";
 import { HiOutlineClipboard, HiOutlineClipboardCheck } from "react-icons/hi";
 import { FailedMessage, useChat } from "@lib/contexts/Controller";
 import { getLast } from "@lib/utils/utils";
+import { useConfigData } from "@lib/contexts/ConfigData";
 function BotIcon({ error }: { error?: boolean }) {
   return (
     <img
@@ -25,12 +26,20 @@ function BotIcon({ error }: { error?: boolean }) {
 }
 
 function UserIcon() {
+  const config = useConfigData();
   return (
-    <div className="opencopilot-rounded-lg opencopilot-shrink-0 opencopilot-bg-accent opencopilot-h-7 opencopilot-w-7 opencopilot-object-cover opencopilot-aspect-square hover:opencopilot-shadow opencopilot-border-primary-light opencopilot-border opencopilot-flex opencopilot-items-center opencopilot-justify-center">
-      <span className="opencopilot-text-xl opencopilot-text-primary opencopilot-fill-current">
-        <FaRegUserCircle />
-      </span>
-    </div>
+    <Tooltip>
+      <TooltipContent hidden={!config?.user} side="top" align="center">
+        {config?.user?.name}
+      </TooltipContent>
+      <TooltipTrigger asChild>
+        <div className="opencopilot-rounded-lg opencopilot-shrink-0 opencopilot-bg-accent opencopilot-h-7 opencopilot-w-7 opencopilot-object-cover opencopilot-aspect-square hover:opencopilot-shadow opencopilot-border-primary-light opencopilot-border opencopilot-flex opencopilot-items-center opencopilot-justify-center">
+          <span className="opencopilot-text-xl opencopilot-text-primary opencopilot-fill-current">
+            <FaRegUserCircle />
+          </span>
+        </div>
+      </TooltipTrigger>
+    </Tooltip>
   );
 }
 

diff --git a/copilot-widget/lib/components/ToolTip.tsx b/copilot-widget/lib/components/ToolTip.tsx
@@ -24,7 +24,7 @@ const TooltipContent = forwardRef<
     sideOffset={sideOffset}
     dir="auto"
     className={cn(
-      "opencopilot-text-primary opencopilot-font-medium opencopilot-bg-accent opencopilot-z-[50000] opencopilot-overflow-hidden opencopilot-shadow opencopilot-min-w-fit opencopilot-max-w-[15rem] opencopilot-select-none opencopilot-rounded-sm opencopilot-p-0.5 opencopilot-text-xs  opencopilot-px-1 opencopilot-leading-none",
+      "opencopilot-text-primary opencopilot-font-medium opencopilot-px-2 opencopilot-bg-accent opencopilot-z-[50000] opencopilot-py-1 opencopilot-overflow-hidden opencopilot-shadow opencopilot-min-w-fit opencopilot-max-w-[15rem] opencopilot-select-none opencopilot-rounded-sm opencopilot-p-0.5 opencopilot-text-xs opencopilot-leading-none",
       "opencopilot-animate-in opencopilot-fade-in-0 opencopilot-slide-in-from-bottom-5 data-[state=closed]:animate-out data-[state=closed]:opencopilot-slide-in-from-top-0",
       className
     )}

diff --git a/copilot-widget/lib/contexts/ConfigData.tsx b/copilot-widget/lib/contexts/ConfigData.tsx
@@ -3,7 +3,7 @@ import { ReactNode, createContext, useContext } from "react";
 
 export type ConfigDataContextType = Pick<
   Options,
-  "token" | "initialMessage" | "headers" | "apiUrl"
+  "token" | "initialMessage" | "headers" | "apiUrl" | "user"
 >;
 
 const ConfigDataContext = createContext<ConfigDataContextType | undefined>(

diff --git a/copilot-widget/lib/contexts/Controller.tsx b/copilot-widget/lib/contexts/Controller.tsx
@@ -55,6 +55,7 @@ const ChatProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
         {
           ...message,
           headers: config?.headers,
+          user: config?.user,
         }
       );
       if (status === 200) {

diff --git a/copilot-widget/lib/types/options.ts b/copilot-widget/lib/types/options.ts
@@ -1,7 +1,10 @@
 export type Options = {
-    token: string;
-    headers: Record<string, string>;
-    initialMessage: string
-    triggerSelector: string;
-    apiUrl: string;
+  token: string;
+  headers: Record<string, string>;
+  initialMessage: string;
+  triggerSelector: string;
+  apiUrl: string;
+  user?: {
+    name?: string;
+  };
 };
diff --git a/copilot-widget/package.json b/copilot-widget/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@openchatai/copilot-widget",
   "private": false,
-  "version": "1.0.9",
+  "version": "1.1.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -75,4 +75,4 @@
     },
     "./index.css": "./dist/index.css"
   }
-}
+}