fix: resolved minor issues with voice playback (#780)

* fix: resolved minor issues with voice playback

* docs: update changelog

* update

Author: ayangweb

docs/content.en/docs/release-notes/_index.md

@@ -27,6 +27,7 @@ Information about release notes of Coco Server is provided here.
 - fix: indexing apps does not respect search scope config #773
 - fix: restore missing category titles on subpages #772
 - fix: correct incorrect assistant display when quick ai access #779
+- fix: resolved minor issues with voice playback #780
 
 ### ✈️ Improvements
 

src/components/Assistant/Chat.tsx

@@ -24,7 +24,6 @@ import { useAppStore } from "@/stores/appStore";
 import { useSearchStore } from "@/stores/searchStore";
 import { useAuthStore } from "@/stores/authStore";
 import Splash from "./Splash";
-import Synthesize from "./Synthesize";
 
 interface ChatAIProps {
   isSearchActive?: boolean;
@@ -86,7 +85,6 @@ const ChatAI = memo(
       });
 
       const { currentService, visibleStartPage } = useConnectStore();
-      const { synthesizeItem } = useChatStore();
 
       const addError = useAppStore.getState().addError;
 
@@ -404,8 +402,6 @@ const ChatAI = memo(
             {!activeChat?._id && !visibleStartPage && (
               <PrevSuggestion sendMessage={init} />
             )}
-
-            {synthesizeItem && <Synthesize />}
           </div>
         </>
       );

src/components/Search/AiOverview.tsx

@@ -21,7 +21,7 @@ const AiOverview: FC<AiSummaryProps> = (props) => {
 
   const [visible, setVisible] = useState(false);
 
-  const { isTyping, chunkData, loadingStep } = useStreamChat({
+  const { isTyping, chunkData, loadingStep, messageId } = useStreamChat({
     message,
     clientId: "ai-overview-client-id",
     server: aiOverviewServer,
@@ -56,10 +56,10 @@ const AiOverview: FC<AiSummaryProps> = (props) => {
         <div className="flex-1 overflow-auto text-sm hide-scrollbar">
           <div className="-ml-11 -mr-4 user-select-text">
             <ChatMessage
-              key="current"
+              key={messageId}
               hide_assistant
               message={{
-                _id: "current",
+                _id: messageId,
                 _source: {
                   type: "assistant",
                   message: "",

src/components/Search/AskAi.tsx

@@ -20,11 +20,20 @@ import { useShortcutsStore } from "@/stores/shortcutsStore";
 interface State {
   serverId?: string;
   assistantId?: string;
-  copyButtonId?: string;
+  messageId: string;
+  copyButtonId: string;
 }
 
 const AskAi = () => {
-  const { askAiMessage, setGoAskAi, setSelectedAssistant, setAskAiSessionId, selectedAssistant, setAskAiServerId, setAskAiAssistantId } = useSearchStore();
+  const {
+    askAiMessage,
+    setGoAskAi,
+    setSelectedAssistant,
+    setAskAiSessionId,
+    selectedAssistant,
+    setAskAiServerId,
+    setAskAiAssistantId,
+  } = useSearchStore();
 
   const addError = useAppStore((state) => state.addError);
 
@@ -62,7 +71,10 @@ const AskAi = () => {
 
   const { quickAiAccessServer, quickAiAccessAssistant } = useExtensionsStore();
 
-  const state = useReactive<State>({});
+  const state = useReactive<State>({
+    messageId: nanoid(),
+    copyButtonId: nanoid(),
+  });
 
   const modifierKey = useShortcutsStore((state) => state.modifierKey);
 
@@ -154,7 +166,10 @@ const AskAi = () => {
 
     const { serverId, assistantId } = state;
 
-    state.copyButtonId = nanoid();
+    Object.assign(state, {
+      messageId: nanoid(),
+      copyButtonId: nanoid(),
+    });
 
     try {
       await platformAdapter.invokeBackend("ask_ai", {
@@ -210,10 +225,10 @@ const AskAi = () => {
 
           <div className="-my-8 -ml-11 user-select-text">
             <ChatMessage
-              key={"current"}
+              key={state.messageId}
               hide_assistant
               message={{
-                _id: "current",
+                _id: state.messageId,
                 _source: {
                   type: "assistant",
                   message: "",

src/hooks/useStreamChat.ts

@@ -6,6 +6,7 @@ import { useAppStore } from "@/stores/appStore";
 import { EventPayloads } from "@/types/platform";
 import platformAdapter from "@/utils/platformAdapter";
 import useMessageChunkData from "./useMessageChunkData";
+import { nanoid } from "nanoid";
 
 interface Options {
   message: string;
@@ -18,15 +19,17 @@ interface Options {
 interface State {
   sessionId?: string;
   isTyping?: boolean;
+  messageId: string;
 }
 
 export const useStreamChat = (options: Options) => {
   const { message, clientId, server, assistant, setVisible } = options;
 
   const unlistenRef = useRef<() => void>(noop);
-  const addError = useAppStore((state) => state.addError);
+  const { addError } = useAppStore();
   const state = useReactive<State>({
     isTyping: true,
+    messageId: nanoid(),
   });
   const [loadingStep, setLoadingStep] = useState<Record<string, boolean>>({
     query_intent: false,
@@ -112,6 +115,8 @@ export const useStreamChat = (options: Options) => {
 
     clearAllChunkData();
 
+    state.messageId = nanoid();
+
     try {
       await platformAdapter.invokeBackend("ask_ai", {
         message,

src/pages/main/index.tsx

@@ -4,20 +4,24 @@ import SearchChat from "@/components/SearchChat";
 import { useAppStore } from "@/stores/appStore";
 import { useSyncStore } from "@/hooks/useSyncStore";
 import UpdateApp from "@/components/UpdateApp";
+import Synthesize from "@/components/Assistant/Synthesize";
+import { useChatStore } from "@/stores/chatStore";
 
 function MainApp() {
-
-  const setIsTauri = useAppStore((state) => state.setIsTauri);
+  const { setIsTauri } = useAppStore();
   useEffect(() => {
     setIsTauri(true);
   }, []);
+  const { synthesizeItem } = useChatStore();
 
   useSyncStore();
 
   return (
     <>
       <SearchChat isTauri={true} hasModules={["search", "chat"]} />
       <UpdateApp />
+
+      {synthesizeItem && <Synthesize />}
     </>
   );
 }