From b38ed3711f0a80658ce6d5052f745a975f6bceb3 Mon Sep 17 00:00:00 2001 From: an-lee Date: Sat, 7 Sep 2024 11:50:09 +0800 Subject: [PATCH] Fix chat (#1047) * handle chat error * update scrollbar style * darkmode for scrollbar * use azure if the stt engine not found --- enjoy/src/index.css | 29 +++++++++++++++++ .../renderer/components/chats/chat-form.tsx | 31 +++++++++++++------ .../renderer/components/chats/chat-input.tsx | 4 +++ .../context/chat-session-provider.tsx | 16 ++++++---- enjoy/src/renderer/hooks/use-chat-message.tsx | 5 ++- enjoy/src/renderer/hooks/use-transcribe.tsx | 5 ++- 6 files changed, 70 insertions(+), 20 deletions(-) diff --git a/enjoy/src/index.css b/enjoy/src/index.css index 88aca05f..7ba598ee 100644 --- a/enjoy/src/index.css +++ b/enjoy/src/index.css @@ -102,3 +102,32 @@ body { outline: none; } } + +/* make scrollbar beautiful */ +::-webkit-scrollbar { + width: 10px; +} +::-webkit-scrollbar-track { + background: #f8f8f8; +} +::-webkit-scrollbar-thumb { + background: #e0e0e0; + border-radius: 10px; +} + +/* Dark mode styles for scrollbar */ +html.dark { + ::-webkit-scrollbar { + width: 10px; + } + ::-webkit-scrollbar-track { + background: #1a1a1a; + } + ::-webkit-scrollbar-thumb { + background: #444; + border-radius: 10px; + } + ::-webkit-scrollbar-thumb:hover { + background: #555; + } +} diff --git a/enjoy/src/renderer/components/chats/chat-form.tsx b/enjoy/src/renderer/components/chats/chat-form.tsx index ddf940e8..9627e7a3 100644 --- a/enjoy/src/renderer/components/chats/chat-form.tsx +++ b/enjoy/src/renderer/components/chats/chat-form.tsx @@ -40,6 +40,7 @@ import { } from "@renderer/context"; import { CHAT_SYSTEM_PROMPT_TEMPLATE, LANGUAGES } from "@/constants"; import Mustache from "mustache"; +import { SttEngineOptionEnum } from "@/types/enums"; export const ChatForm = (props: { chat?: ChatType; @@ -57,7 +58,7 @@ export const ChatForm = (props: { const { user, learningLanguage, nativeLanguage } = useContext( AppSettingsProviderContext ); - const { whisperConfig } = useContext(AISettingsProviderContext); + const { sttEngine } = useContext(AISettingsProviderContext); const [editingMember, setEditingMember] = useState | null>(); @@ -97,7 +98,7 @@ export const ChatForm = (props: { topic: "Casual Chat.", language: learningLanguage, config: { - sttEngine: whisperConfig.service, + sttEngine, }, members: [ { @@ -191,22 +192,32 @@ export const ChatForm = (props: { - {t("local")} - {t("enjoyAzure")} - + + {t("local")} + + + {t("enjoyAzure")} + + {t("enjoyCloudflare")} - OpenAI + + {t("openai")} + - {form.watch("config.sttEngine") === "local" && + {form.watch("config.sttEngine") === + SttEngineOptionEnum.LOCAL && t("localSpeechToTextDescription")} - {form.watch("config.sttEngine") === "azure" && + {form.watch("config.sttEngine") === + SttEngineOptionEnum.ENJOY_AZURE && t("enjoyAzureSpeechToTextDescription")} - {form.watch("config.sttEngine") === "cloudflare" && + {form.watch("config.sttEngine") === + SttEngineOptionEnum.ENJOY_CLOUDFLARE && t("enjoyCloudflareSpeechToTextDescription")} - {form.watch("config.sttEngine") === "openai" && + {form.watch("config.sttEngine") === + SttEngineOptionEnum.OPENAI && t("openaiSpeechToTextDescription")} diff --git a/enjoy/src/renderer/components/chats/chat-input.tsx b/enjoy/src/renderer/components/chats/chat-input.tsx index 9f9e5da7..ba651b98 100644 --- a/enjoy/src/renderer/components/chats/chat-input.tsx +++ b/enjoy/src/renderer/components/chats/chat-input.tsx @@ -19,6 +19,7 @@ import { ScrollArea, Separator, Textarea, + toast, } from "@renderer/components/ui"; import { ReactElement, useContext, useEffect, useRef, useState } from "react"; import { LiveAudioVisualizer } from "react-audio-visualize"; @@ -339,6 +340,9 @@ const ChatSuggestionButton = (props: { cacheKey: contextCacheKey, }) .then((res) => setSuggestions(res.suggestions)) + .catch((err) => { + toast.error(err.message); + }) .finally(() => { setLoading(false); }); diff --git a/enjoy/src/renderer/context/chat-session-provider.tsx b/enjoy/src/renderer/context/chat-session-provider.tsx index 00177dcd..ce395da2 100644 --- a/enjoy/src/renderer/context/chat-session-provider.tsx +++ b/enjoy/src/renderer/context/chat-session-provider.tsx @@ -194,13 +194,14 @@ export const ChatSessionProvider = ({ return toast.warning(t("itsYourTurn")); } - const llm = buildLlm(member.agent); - const prompt = ChatPromptTemplate.fromMessages([ - ["system", CHAT_SYSTEM_PROMPT_TEMPLATE], - ["user", "{input}"], - ]); - const chain = prompt.pipe(llm); try { + const llm = buildLlm(member.agent); + const prompt = ChatPromptTemplate.fromMessages([ + ["system", CHAT_SYSTEM_PROMPT_TEMPLATE], + ["user", "{input}"], + ]); + const chain = prompt.pipe(llm); + setSubmitting(true); const reply = await chain.invoke({ name: member.agent.name, @@ -244,6 +245,9 @@ export const ChatSessionProvider = ({ .then((message) => dispatchChatMessages({ type: "append", record: message }) ) + .catch((error) => { + toast.error(error.message); + }) .finally(() => setSubmitting(false)); } catch (err) { setSubmitting(false); diff --git a/enjoy/src/renderer/hooks/use-chat-message.tsx b/enjoy/src/renderer/hooks/use-chat-message.tsx index f5f4bb2d..0f7e0c7b 100644 --- a/enjoy/src/renderer/hooks/use-chat-message.tsx +++ b/enjoy/src/renderer/hooks/use-chat-message.tsx @@ -50,7 +50,10 @@ export const useChatMessage = (chat: ChatType) => { }) .then((message) => dispatchChatMessages({ type: "append", record: message }) - ); + ) + .catch((error) => { + toast.error(error.message); + }); } }; diff --git a/enjoy/src/renderer/hooks/use-transcribe.tsx b/enjoy/src/renderer/hooks/use-transcribe.tsx index bddcee9e..68e0c110 100644 --- a/enjoy/src/renderer/hooks/use-transcribe.tsx +++ b/enjoy/src/renderer/hooks/use-transcribe.tsx @@ -109,7 +109,8 @@ export const useTranscribe = () => { result = await transcribeByOpenAi( new File([blob], "audio.mp3", { type: "audio/mp3" }) ); - } else if (service === SttEngineOptionEnum.ENJOY_AZURE) { + } else { + // Azure AI is the default service result = await transcribeByAzureAi( new File([blob], "audio.wav", { type: "audio/wav" }), language, @@ -118,8 +119,6 @@ export const useTranscribe = () => { targetType, } ); - } else { - throw new Error(t("whisperServiceNotSupported")); } let transcript = result.text;