fix(frontend): fix widget new chat api (#608)

Author: 634750802

Diff for: 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, type Ref, useContext, useEffect, useImperativeHandle, useState } from 'react';
+import { createContext, type ReactNode, useContext, useEffect, 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 ({ newChatRef, onChatCreated, children }: { children: ReactNode,newChatRef?: Ref<ChatsProviderValues['newChat'] | undefined>, onChatCreated?: (id: string, chat: Chat, controller: ChatController) => void }) {
+export function ChatsProvider ({ onChatCreated, children }: { children: ReactNode, onChatCreated?: (id: string, chat: Chat, controller: ChatController) => void }) {
   const bootstrapStatusRef = useLatestRef(useBootstrapStatus());
   const [chats, setChats] = useState(() => new Map<string, ChatController>);
 
@@ -56,8 +56,6 @@ export function ChatsProvider ({ newChatRef, onChatCreated, children }: { childr
     });
   };
 
-  useImperativeHandle(newChatRef, () => newChat);
-
   return (
     <ChatsContext.Provider value={{
       chats,

Diff for: frontend/app/src/components/chat/conversation.tsx

@@ -8,7 +8,7 @@ import { MessageInput } from '@/components/chat/message-input';
 import { SecuritySettingContext, withReCaptcha } from '@/components/security-setting-provider';
 import { useSize } from '@/components/use-size';
 import { cn } from '@/lib/utils';
-import { type ChangeEvent, type FormEvent, type ReactNode, useContext, useState } from 'react';
+import { type ChangeEvent, type FormEvent, type ReactNode, type Ref, useContext, useImperativeHandle, useState } from 'react';
 
 export interface ConversationProps {
   chatId?: string;
@@ -22,9 +22,10 @@ export interface ConversationProps {
   placeholder?: (controller: ChatController, postState: ReturnType<typeof useChatPostState>) => ReactNode;
   preventMutateBrowserHistory?: boolean;
   preventShiftMessageInput?: boolean;
+  newChatRef?: Ref<ChatController['post'] | undefined>;
 }
 
-export function Conversation ({ open, chat, chatId, history, placeholder, preventMutateBrowserHistory = false, preventShiftMessageInput = false, className }: ConversationProps) {
+export function Conversation ({ open, chat, chatId, history, placeholder, preventMutateBrowserHistory = false, preventShiftMessageInput = false, newChatRef, className }: ConversationProps) {
   const [inputElement, setInputElement] = useState<HTMLTextAreaElement | null>(null);
 
   const controller = useChatController(chatId, chat, history, inputElement);
@@ -61,6 +62,10 @@ export function Conversation ({ open, chat, chatId, history, placeholder, preven
   const disabled = !!postState.params;
   const actionDisabled = disabled || !input.trim();
 
+  useImperativeHandle(newChatRef, () => {
+    return controller.post.bind(controller);
+  }, [controller]);
+
   return (
     <ChatControllerProvider controller={controller}>
       {!postState.params && !groups.length && placeholder?.(controller, postState)}

Diff for: frontend/packages/widget-react/src/Widget.tsx

@@ -1,7 +1,8 @@
 import type { BootstrapStatus } from '@/api/system';
 import { ManualScrollVoter } from '@/components/auto-scroll';
 import { AutoScroll } from '@/components/auto-scroll/auto-scroll';
-import { ChatsProvider, type ChatsProviderValues } from '@/components/chat/chat-hooks';
+import type { ChatController } from '@/components/chat/chat-controller';
+import { ChatsProvider } from '@/components/chat/chat-hooks';
 import { Conversation } from '@/components/chat/conversation';
 import { useGtagFn } from '@/components/gtag-provider';
 import { PortalProvider } from '@/components/portal-provider';
@@ -108,7 +109,7 @@ export const Widget = forwardRef<WidgetInstance, WidgetProps>(({ container, trig
     }
   }, [trigger]);
 
-  const newChatRef = useRef<ChatsProviderValues['newChat'] | undefined>(undefined);
+  const newChatRef = useRef<ChatController['post'] | undefined>(undefined);
 
   useImperativeHandle(ref, () => ({
     get open () {
@@ -128,7 +129,7 @@ export const Widget = forwardRef<WidgetInstance, WidgetProps>(({ container, trig
     },
     get initialized (): true { return true; },
     newChat (content: string) {
-      newChatRef.current?.(undefined, [], {
+      newChatRef.current?.({
         content,
         chat_engine: chatEngine,
       });
@@ -140,7 +141,6 @@ export const Widget = forwardRef<WidgetInstance, WidgetProps>(({ container, trig
       <BootstrapStatusProvider bootstrapStatus={bootstrapStatus}>
         <ExperimentalFeaturesProvider features={experimentalFeatures}>
           <ChatsProvider
-            newChatRef={newChatRef}
             onChatCreated={id => {
               window.dispatchEvent(new CustomEvent('tidbainewchat', {
                 detail: { id },
@@ -209,6 +209,7 @@ export const Widget = forwardRef<WidgetInstance, WidgetProps>(({ container, trig
                           )}
                           preventMutateBrowserHistory
                           preventShiftMessageInput
+                          newChatRef={newChatRef}
                         />
                       </div>
                     </ScrollArea>