feat(widget): support error event

pingcap · Sep 9, 2024 · 8c5de70 · 8c5de70
1 parent 897a559
commit 8c5de70
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 12 deletions.
diff --git a/frontend/app/src/components/chat/message-answer.tsx b/frontend/app/src/components/chat/message-answer.tsx
@@ -14,8 +14,16 @@ export function MessageAnswer ({ message }: { message: ChatMessageController | u
   return (
     <>
       <div className="font-normal text-lg flex items-center gap-2">
-        <img className="dark:hidden h-4" src="/answer-black.svg" alt="logo" />
-        <img className="hidden dark:block h-4" src="/answer-white.svg" alt="logo" />
+        <svg className="dark:hidden size-4" viewBox="0 0 745 745" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <rect x="12" y="12" width="721" height="721" rx="108" stroke="#212121" stroke-width="24" />
+          <rect x="298" y="172" width="150" height="150" rx="24" fill="#212121" />
+          <rect x="298" y="422" width="150" height="150" rx="24" fill="#212121" />
+        </svg>
+        <svg className="hidden dark:block size-4" viewBox="0 0 745 745" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <rect x="12" y="12" width="721" height="721" rx="108" stroke="white" stroke-width="24" />
+          <rect x="298" y="172" width="150" height="150" rx="24" fill="white" />
+          <rect x="298" y="422" width="150" height="150" rx="24" fill="white" />
+        </svg>
         Answer
       </div>
       <MessageContent message={message} />

diff --git a/frontend/packages/widget-react/src/Widget.tsx b/frontend/packages/widget-react/src/Widget.tsx
@@ -13,6 +13,7 @@ import './Widget.css';
 
 export interface WidgetProps {
   trigger?: HTMLElement | true | null;
+  container: HTMLElement;
   bootstrapStatus: BootstrapStatus;
   experimentalFeatures: Partial<ExperimentalFeatures>;
   exampleQuestions: string[];
@@ -27,7 +28,7 @@ export interface WidgetInstance {
   dark: boolean;
 }
 
-export const Widget = forwardRef<WidgetInstance, WidgetProps>(({ trigger, experimentalFeatures, disableAutoThemeDetect = false, bootstrapStatus, exampleQuestions, icon, buttonIcon, buttonLabel }, ref) => {
+export const Widget = forwardRef<WidgetInstance, WidgetProps>(({ container, trigger, experimentalFeatures, disableAutoThemeDetect = false, bootstrapStatus, exampleQuestions, icon, buttonIcon, buttonLabel }, ref) => {
   const [open, setOpen] = useState(false);
   const [dark, setDark] = useState(() => matchMedia('(prefers-color-scheme: dark)').matches);
   const openRef = useRef(open);
@@ -38,11 +39,6 @@ export const Widget = forwardRef<WidgetInstance, WidgetProps>(({ trigger, experi
     darkRef.current = dark;
   });
 
-  const container = useRef<HTMLDivElement>();
-  if (!container.current) {
-    container.current = document.getElementById('tidb-ai-widget')! as never;
-  }
-
   const toggleDark = (dark: boolean) => {
     setDark(dark);
   };
@@ -82,9 +78,9 @@ export const Widget = forwardRef<WidgetInstance, WidgetProps>(({ trigger, experi
 
   useEffect(() => {
     if (dark) {
-      container.current?.classList.add('dark');
+      container.classList.add('dark');
     } else {
-      container.current?.classList.remove('dark');
+      container.classList.remove('dark');
     }
   }, [dark]);
 
@@ -114,7 +110,7 @@ export const Widget = forwardRef<WidgetInstance, WidgetProps>(({ trigger, experi
   }), []);
 
   return (
-    <PortalProvider container={container.current}>
+    <PortalProvider container={container}>
       <BootstrapStatusProvider bootstrapStatus={bootstrapStatus}>
         <ExperimentalFeaturesProvider features={experimentalFeatures}>
           <ChatsProvider>
@@ -127,7 +123,7 @@ export const Widget = forwardRef<WidgetInstance, WidgetProps>(({ trigger, experi
                 </span>
                 </Button>
               </DialogTrigger>}
-              <DialogPortal container={container.current}>
+              <DialogPortal container={container}>
                 <DialogOverlay />
                 <DialogPrimitive.Content
                   className="fixed left-[50%] top-[50%] z-50 grid translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg w-[calc(100%-32px)] lg:w-[50vw] h-max">

diff --git a/frontend/packages/widget-react/src/library.tsx b/frontend/packages/widget-react/src/library.tsx
@@ -28,6 +28,7 @@ loadConfig().then(({ settings, bootstrapStatus, experimentalFeatures }) => {
   ReactDOM.createRoot(div).render(
     <Widget
       ref={refFn}
+      container={div}
       trigger={trigger}
       exampleQuestions={settings.custom_js_example_questions}
       buttonLabel={settings.custom_js_button_label}
@@ -37,4 +38,9 @@ loadConfig().then(({ settings, bootstrapStatus, experimentalFeatures }) => {
       experimentalFeatures={experimentalFeatures}
     />,
   );
+}).catch((error) => {
+  window.dispatchEvent(new CustomEvent('tidbaierror', { detail: error }));
+  Object.defineProperty(window, 'tidbai', {
+    value: undefined,
+  });
 });