feat(frontend): support js new chat api in widget (#601)

pingcap · Jan 22, 2025 · 3cda949 · 3cda949
1 parent f7fedfe
commit 3cda949
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 6 deletions.
diff --git a/frontend/app/src/components/chat/chat-hooks.tsx b/frontend/app/src/components/chat/chat-hooks.tsx
@@ -6,7 +6,7 @@ import type { AppChatStreamState, StackVMState } from '@/components/chat/chat-st
 import { useGtagFn } from '@/components/gtag-provider';
 import { useBootstrapStatus } from '@/components/system/BootstrapStatusProvider';
 import { useLatestRef } from '@/components/use-latest-ref';
-import { createContext, type ReactNode, useContext, useEffect, useState } from 'react';
+import { createContext, type ReactNode, type Ref, useContext, useEffect, useImperativeHandle, useState } from 'react';
 
 export interface ChatsProviderValues {
   chats: Map<string, ChatController>;
@@ -30,7 +30,7 @@ const ChatsContext = createContext<ChatsProviderValues>({
 
 const ChatControllerContext = createContext<ChatController | null>(null);
 
-export function ChatsProvider ({ onChatCreated, children }: { children: ReactNode, onChatCreated?: (id: string, chat: Chat, controller: ChatController) => void }) {
+export function ChatsProvider ({ newChatRef, onChatCreated, children }: { children: ReactNode,newChatRef?: Ref<ChatsProviderValues['newChat'] | undefined>, onChatCreated?: (id: string, chat: Chat, controller: ChatController) => void }) {
   const bootstrapStatusRef = useLatestRef(useBootstrapStatus());
   const [chats, setChats] = useState(() => new Map<string, ChatController>);
 
@@ -56,6 +56,8 @@ export function ChatsProvider ({ onChatCreated, children }: { children: ReactNod
     });
   };
 
+  useImperativeHandle(newChatRef, () => newChat);
+
   return (
     <ChatsContext.Provider value={{
       chats,

diff --git a/frontend/packages/widget-react/src/Widget.tsx b/frontend/packages/widget-react/src/Widget.tsx
@@ -1,7 +1,7 @@
 import type { BootstrapStatus } from '@/api/system';
 import { ManualScrollVoter } from '@/components/auto-scroll';
 import { AutoScroll } from '@/components/auto-scroll/auto-scroll';
-import { ChatsProvider } from '@/components/chat/chat-hooks';
+import { ChatsProvider, type ChatsProviderValues } from '@/components/chat/chat-hooks';
 import { Conversation } from '@/components/chat/conversation';
 import { useGtagFn } from '@/components/gtag-provider';
 import { PortalProvider } from '@/components/portal-provider';
@@ -108,6 +108,8 @@ export const Widget = forwardRef<WidgetInstance, WidgetProps>(({ container, trig
     }
   }, [trigger]);
 
+  const newChatRef = useRef<ChatsProviderValues['newChat'] | undefined>(undefined);
+
   useImperativeHandle(ref, () => ({
     get open () {
       return openRef.current;
@@ -125,13 +127,20 @@ export const Widget = forwardRef<WidgetInstance, WidgetProps>(({ container, trig
       setDark(d);
     },
     get initialized (): true { return true; },
+    newChat (content: string) {
+      newChatRef.current?.(undefined, [], {
+        content,
+        chat_engine: chatEngine,
+      });
+    },
   }), []);
 
   return (
     <PortalProvider container={container}>
       <BootstrapStatusProvider bootstrapStatus={bootstrapStatus}>
         <ExperimentalFeaturesProvider features={experimentalFeatures}>
           <ChatsProvider
+            newChatRef={newChatRef}
             onChatCreated={id => {
               window.dispatchEvent(new CustomEvent('tidbainewchat', {
                 detail: { id },
@@ -171,9 +180,7 @@ export const Widget = forwardRef<WidgetInstance, WidgetProps>(({ container, trig
                         Ask AI
                       </span>
                     </DialogTitle>
-                    <DialogDescription className="sr-only">
-                      .
-                    </DialogDescription>
+                    <DialogDescription className="sr-only" />
                   </DialogHeader>
                   <AutoScroll target={scrollTarget} edgePixels={12}>
                     <ManualScrollVoter />