feat: 细节优化

src/app/loading.css

@@ -1,27 +1,3 @@
-::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
-  display: none;
-}
-
-::-webkit-scrollbar-button:start:decrement,
-::-webkit-scrollbar-button:end:increment {
-  height: 30px;
-  background-color: transparent;
-}
-
-::-webkit-scrollbar-track-piece {
-  background-color: #3b3b3b;
-  -webkit-border-radius: 16px;
-}
-
-::-webkit-scrollbar-thumb:vertical {
-  height: 50px;
-  background-color: #666;
-  border: 1px solid #eee;
-  -webkit-border-radius: 6px;
-}
-
 /* loading start */
 .loading-spinner {
   display: flex;
@@ -30,6 +6,11 @@
   height: 100vh;
   opacity: 1;
   transition: opacity .8s ease-out;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
 }
 
 .loading-spinner.hidden {

src/app/page.tsx

@@ -1,15 +1,18 @@
 import dynamic from 'next/dynamic'
+import './loading.css'
 
 const DynamicComponentWithNoSSR = dynamic(
   () => import('../components/chat'),
-  { ssr: false }
+  {
+    ssr: false,
+    loading: () => (
+      <div className="loading-spinner">
+        {Array.from({length: 3}).map((_, index) => <div className={`bounce${index+1}`}/>)}
+      </div>
+    )
+  }
 )
 
 export default function IndexPage() {
-  return (
-    <>
-      <div className="loading-spinner" />
-      <DynamicComponentWithNoSSR />
-    </>
-  )
+  return <DynamicComponentWithNoSSR />
 }

src/components/chat-panel.tsx

@@ -133,7 +133,7 @@ export function ChatPanel({
               </ChatImage>
               <Voice setInput={setInput} sendMessage={sendMessage} isSpeaking={isSpeaking} input={input} />
               <button type="submit">
-                <SVG alt="send" src={SendIcon} width={18} height={22} />
+                <SVG alt="send" src={SendIcon} width={18} height={21} />
               </button>
             </div>
             <ChatAttachments attachmentList={attachmentList} setAttachmentList={setAttachmentList} uploadImage={uploadImage} />

src/components/chat-suggestions.tsx

@@ -24,6 +24,7 @@ export function ChatSuggestions({ setInput, suggestions = [] }: ChatSuggestionsP
 
   useMemo(() => {
     setSuggestions(suggestions)
+    window.scrollBy(0, 400)
   }, [suggestions.length, setSuggestions])
 
   return currentSuggestions?.length ? (

src/components/voice.tsx

@@ -16,6 +16,10 @@ const Voice = ({ setInput, input, sendMessage, isSpeaking }: Pick<ReturnType<typ
     sr.transcript = !isSpeaking
   }, [isSpeaking])
 
+  useEffect(() => {
+    setListen(sr.listening)
+  }, [sr.listening])
+
   useEffect(() => {
     sr.onchange = (msg: string, command?: string) => {
       switch (command) {
@@ -48,7 +52,7 @@ const Voice = ({ setInput, input, sendMessage, isSpeaking }: Pick<ReturnType<typ
         sr.listening ? (
           <VoiceButton className="voice-button-theme" onClick={() => switchSR(false)} />
         ) : (
-          <SVG className="cursor-pointer" alt="start voice" src={VoiceIcon} width={26} height={22} onClick={() => switchSR(true)} />
+          <SVG className="cursor-pointer" alt="start voice" src={VoiceIcon} width={20} height={20} onClick={() => switchSR(true)} />
         )
       }
     </div>

src/lib/bots/bing/sr.ts

@@ -68,9 +68,14 @@ export class SR {
 
   start = async () => {
     if (this.recognition && !this.listening) {
-      await this.recognition.start()
-      this.transcript = true
       this.listening = true
+      try {
+        await this.recognition.start()
+        this.transcript = true
+      } catch(e) {
+        console.error('start sr error', e)
+        this.listening = false
+      }
     }
   }