update

ZuodaoTech · Aug 7, 2024 · a660d36 · a660d36
1 parent e9a90f8
commit a660d36
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 8 deletions.
diff --git a/enjoy/src/main/db/models/chat-message.ts b/enjoy/src/main/db/models/chat-message.ts
@@ -59,6 +59,8 @@ export class ChatMessage extends Model<ChatMessage> {
   @Column(DataType.TEXT)
   content: string;
 
+  @AllowNull(false)
+  @Default("pending")
   @Column(DataType.STRING)
   state: string;
 

diff --git a/enjoy/src/renderer/components/chats/chat-session.tsx b/enjoy/src/renderer/components/chats/chat-session.tsx
@@ -1,6 +1,12 @@
-import { Avatar, AvatarFallback, AvatarImage } from "@renderer/components/ui";
-import { MarkdownWrapper } from "@renderer/components";
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  Button,
+} from "@renderer/components/ui";
+import { MarkdownWrapper, WavesurferPlayer } from "@renderer/components";
 import { formatDateTime } from "@renderer/lib/utils";
+import { t } from "i18next";
 
 export const ChatSession = (props: { chatSession: ChatSessionType }) => {
   const {
@@ -54,10 +60,25 @@ export const ChatMessage = (props: { chatMessage: ChatMessageType }) => {
             </AvatarFallback>
           </Avatar>
         </div>
-        <div className="flex flex-col gap-2 px-4 py-2 mb-2 bg-sky-500/30 border-sky-500 rounded-lg shadow-sm max-w-full">
-          <MarkdownWrapper className="select-text prose dark:prose-invert">
-            {chatMessage.content}
-          </MarkdownWrapper>
+        <div className="flex justify-end">
+          <div className="flex flex-col gap-2 px-4 py-2 mb-2 bg-sky-500/30 border-sky-500 rounded-lg shadow-sm w-full max-w-lg">
+            {chatMessage.recording && (
+              <WavesurferPlayer
+                id={chatMessage.recording.id}
+                src={chatMessage.recording.src}
+              />
+            )}
+            <MarkdownWrapper className="select-text prose dark:prose-invert">
+              {chatMessage.content}
+            </MarkdownWrapper>
+            {chatMessage.state === "pending" && (
+              <div className="w-full flex items-center justify-end space-x-4">
+                <Button variant="secondary">{t("refine")}</Button>
+                <Button variant="secondary">{t("reRecord")}</Button>
+                <Button variant="default">{t("confirm")}</Button>
+              </div>
+            )}
+          </div>
         </div>
         <div className="flex justify-end text-xs text-muted-foreground timestamp">
           {formatDateTime(chatMessage.createdAt)}

diff --git a/enjoy/src/renderer/components/conversations/speech-player.tsx b/enjoy/src/renderer/components/conversations/speech-player.tsx
@@ -111,7 +111,7 @@ export const SpeechPlayer = (props: {
         <div className={`flex justify-center ${initialized ? "" : "hidden"}`}>
           <Button
             onClick={onPlayClick}
-            className="aspect-square rounded-full p-2 w-12 h-12 bg-blue-600 hover:bg-blue-500"
+            className="aspect-square rounded-full p-2 w-full max-w-[50%] h-auto bg-blue-600 hover:bg-blue-500"
           >
             {isPlaying ? (
               <PauseIcon className="w-6 h-6 text-white" />

diff --git a/enjoy/src/renderer/components/misc/wavesurfer-player.tsx b/enjoy/src/renderer/components/misc/wavesurfer-player.tsx
@@ -183,7 +183,7 @@ export const WavesurferPlayer = (props: {
         <div className={`flex justify-center ${initialized ? "" : "hidden"}`}>
           <Button
             onClick={onPlayClick}
-            className="aspect-square rounded-full p-2 w-12 h-12 bg-blue-600 hover:bg-blue-500"
+            className="aspect-square rounded-full p-2 w-full max-w-[50%] h-auto bg-blue-600 hover:bg-blue-500"
           >
             {isPlaying ? (
               <PauseIcon className="w-6 h-6 text-white" />

diff --git a/enjoy/src/types/chat.d.ts b/enjoy/src/types/chat.d.ts
@@ -66,4 +66,5 @@ type ChatMessageType = {
   createdAt: string;
   updatedAt: string;
   member?: ChatMemberType;
+  recording?: RecordingType;
 };