Merge branch 'feat-1127-list'

punky-lab · Nov 27, 2024 · 780c909 · 780c909
2 parents b676e96 + 0c86a68
commit 780c909
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 21 deletions.
diff --git a/assets/ui/Microphone_On.svg b/assets/ui/Microphone_On.svg
diff --git a/components/MainUI/Dog/bubbleMessage.tsx b/components/MainUI/Dog/bubbleMessage.tsx
@@ -8,7 +8,9 @@ const BubbleMessage: React.FC<BubbleMessageProps> = ({ message }) => {
   return (
     <section className="message-list">
       <section className="message -left">
-        <div className="nes-balloon from-left px-6 py-4 text-xl">{message}</div>
+        <div className="nes-balloon from-left px-6 py-2 text-2xl leading-[24px]">
+          {message}
+        </div>
       </section>
     </section>
   );

diff --git a/components/MainUI/SlideUI/ChatPage.tsx b/components/MainUI/SlideUI/ChatPage.tsx
@@ -146,32 +146,35 @@ export default function ChatPage({
               padding: "8px",
               borderTop: "2px solid #424242",
               marginTop: "auto",
+              position: "relative",
             }}
           >
             <input
               type="text"
-              className="nes-input grow text-black"
+              className="nes-input grow text-black bg-[#dcdcdc] pr-[100px] placeholder:bg-[#dcdcdc] "
               value={message}
               placeholder="Chat..."
               onChange={(e) => setMessage(e.target.value)}
             />
-            <button
-              type="button"
-              className="nes-btn bg-black text-white"
-              onClick={() => handleSend()} // 修改这里
-            >
-              Send
-            </button>
-            <VoiceInput
-              onTranscript={(text) => {
-                console.log("transcript text", text);
-                setMessage(text); // 更新输入框的文本
-              }}
-              onStop={(text) => {
-                console.log("transcript stop");
-                handleSend(text); // 传入当前的语音文本
-              }}
-            />
+            <div className="absolute right-0 flex justify-center item-center">
+              <VoiceInput
+                onTranscript={(text) => {
+                  console.log("transcript text", text);
+                  setMessage(text); // 更新输入框的文本
+                }}
+                onStop={(text) => {
+                  console.log("transcript stop");
+                  handleSend(text); // 传入当前的语音文本
+                }}
+              />
+              <button
+                type="button"
+                className="nes-btn bg-black text-white "
+                onClick={() => handleSend()} // 修改这里
+              >
+                Send
+              </button>
+            </div>
           </FlexBox>
         </WindowContent>
       </WindowWrapper>

diff --git a/components/MainUI/voicechat.tsx b/components/MainUI/voicechat.tsx
@@ -1,5 +1,7 @@
 import React, { useState, useRef, useEffect } from "react";
 import { Mic, Square, Loader } from "lucide-react"; // 添加 Loader 图标
+import Microphone from "@/assets/ui/Microphone_On.svg";
+import Image from "next/image";
 
 interface VoiceInputProps {
   onTranscript: (text: string) => void;
@@ -76,7 +78,7 @@ const VoiceInput: React.FC<VoiceInputProps> = ({ onTranscript, onStop }) => {
     <button
       type="button"
       onClick={handleToggleRecording}
-      className={`nes-btn ${isProcessing ? "is-warning" : "is-success"}`}
+      className={` px-0 ${isProcessing ? "is-warning" : "is-success"}`}
       aria-label={isRecording ? "Stop recording" : "Start recording"}
       disabled={isProcessing} // 处理时禁用按钮
     >
@@ -85,7 +87,7 @@ const VoiceInput: React.FC<VoiceInputProps> = ({ onTranscript, onStop }) => {
       ) : isRecording ? (
         <Square className="w-4 h-4 inline-block" />
       ) : (
-        <Mic className="w-4 h-4 inline-block" />
+        <Image src={Microphone} alt="Shop" height={20} width={20} />
       )}
     </button>
   );