feat: optimize animation

Hk-Gosuto · Jan 8, 2025 · 98b463b · 98b463b
1 parent c1d1caf
commit 98b463b
Show file tree

Hide file tree

Showing 17 changed files with 2,371 additions and 100 deletions.
diff --git a/app/components/chat.module.scss b/app/components/chat.module.scss
@@ -815,3 +815,34 @@
     }
   }
 }
+
+.chat-message-checkmark {
+  display: inline-block;
+  margin-right: 5px;
+  height: 12px;
+  width: 12px;
+  color: #13a10e;
+  fill: #13a10e;
+  user-select: none;
+  backface-visibility: hidden;
+  transform: translateZ(0px);
+}
+
+.chat-message-tools-status {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 12px;
+  margin-top: 5px;
+  line-height: 1.5;
+}
+
+.chat-message-tools-name {
+  color: #aaa;
+}
+
+.chat-message-tools-details {
+  margin-left: 5px;
+  font-weight: bold;
+  color: #999;
+}
diff --git a/app/components/chat.tsx b/app/components/chat.tsx
@@ -2039,6 +2039,30 @@ function _Chat() {
                             </div>
                           )}
                         </div>
+                        {!isUser &&
+                          message.toolMessages &&
+                          message.toolMessages.map((tool, index) => (
+                            <div
+                              className={styles["chat-message-tools-status"]}
+                              key={index}
+                            >
+                              <div
+                                className={styles["chat-message-tools-name"]}
+                              >
+                                <CheckmarkIcon
+                                  className={styles["chat-message-checkmark"]}
+                                />
+                                {tool.toolName}:
+                                <code
+                                  className={
+                                    styles["chat-message-tools-details"]
+                                  }
+                                >
+                                  {tool.toolInput}
+                                </code>
+                              </div>
+                            </div>
+                          ))}
                         {message?.tools?.length == 0 && showTyping && (
                           <div className={styles["chat-message-status"]}>
                             {Locale.Chat.Typing}

diff --git a/app/components/openai-voice-visualizer/index.ts b/app/components/openai-voice-visualizer/index.ts
@@ -0,0 +1 @@
+export * from "./openai-voice-visualizer";
diff --git a/app/components/openai-voice-visualizer/openai-voice-visualizer.module.scss b/app/components/openai-voice-visualizer/openai-voice-visualizer.module.scss
@@ -0,0 +1,9 @@
+.openai-voice-visualizer {
+  width: 100%;
+  height: 100%;
+
+  canvas {
+    width: 100%;
+    height: 100%;
+  }
+}