feat: inline tool_calls and tool_result collapse

package.json

@@ -101,6 +101,7 @@
     "react-router-dom": "^6.28.1",
     "react-syntax-highlighter": "^15.6.1",
     "rehype-katex": "^7.0.1",
+    "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.1",
     "remark-math": "^6.0.0",
     "semver": "^7.7.1",

public/locales/en/translation.json

@@ -26,7 +26,8 @@
     "edit": "Edit",
     "editDescription": "Editing this message will regenerate a new response",
     "cancel": "Cancel",
-    "save": "Save"
+    "save": "Save",
+    "toolCalls": "🛠 Tool Calls Result from {{name}}"
   },
   "welcome": {
     "title": "Welcome to Dive AI",

public/locales/zh-CN/translation.json

@@ -26,7 +26,8 @@
     "edit": "编辑",
     "editDescription": "编辑此消息将重新生成一个新回复",
     "cancel": "取消",
-    "save": "保存"
+    "save": "保存",
+    "toolCalls": "🛠 请求 {{name}} 工具结果"
   },
   "welcome": {
     "title": "欢迎使用 Dive AI",

public/locales/zh-TW/translation.json

@@ -26,7 +26,8 @@
     "edit": "編輯",
     "editDescription": "編輯此訊息將會重新生成一個新的回應",
     "cancel": "取消",
-    "save": "儲存"
+    "save": "儲存",
+    "toolCalls": "🛠 呼叫 {{name}} 工具結果"
   },
   "welcome": {
     "title": "歡迎使用 Dive AI",

src/styles/overlay/_Tools.scss

@@ -50,17 +50,12 @@
   margin: 10px 0;
   border-radius: 8px;
   overflow: hidden;
-  background: var(--bg-op-dark-extremeweak);
 
   summary {
-    padding: 10px 15px;
     cursor: pointer;
     user-select: none;
     font-weight: 500;
-
-    &:hover {
-      background: var(--bg-op-dark-extremeweak);
-    }
+    color: var(--text-inverted-weak);
   }
 
   .tool-content {
@@ -191,11 +186,11 @@
     .verify-btn {
       background: var(--bg-success);
       color: var(--text-light);
-      
+
       &:hover:not(:disabled) {
         background: var(--bg-hover-success);
       }
-      
+
       &:active:not(:disabled) {
         background: var(--bg-active-success);
       }
@@ -204,11 +199,11 @@
     .submit-btn {
       background: var(--bg-pri-blue);
       color: var(--text-light);
-      
+
       &:hover:not(:disabled) {
         background: var(--bg-hover-blue);
       }
-      
+
       &:active:not(:disabled) {
         background: var(--bg-active-blue);
       }

src/util.ts

@@ -2,14 +2,34 @@ import { ModelConfig } from "./atoms/configState"
 
 
 export const getModelPrefix = (config: ModelConfig, length: number = 5) => {
- if(config.apiKey) return config.apiKey.slice(-length)
- try {
-   if(config.baseURL) {
-     const url = new URL(config.baseURL)
-     return url.hostname.slice(0, length)
-   }
- } catch (error) {
-   return config.baseURL
- }
- return ""
+  if(config.apiKey) return config.apiKey.slice(-length)
+  try {
+    if(config.baseURL) {
+      const url = new URL(config.baseURL)
+      return url.hostname.slice(0, length)
+    }
+  } catch (error) {
+    return config.baseURL
+  }
+  return ""
+}
+
+export function safeBase64Encode(str: string): string {
+  try {
+    return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g,
+      (_, p1) => String.fromCharCode(parseInt(p1, 16))))
+  } catch (e) {
+    console.error("Encoding error:", e)
+    return ""
+  }
+}
+
+export function safeBase64Decode(str: string): string {
+  try {
+    return decodeURIComponent(Array.prototype.map.call(atob(str),
+      c => "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2)).join(""))
+  } catch (e) {
+    console.error("Decoding error:", e)
+    return str
+  }
 }

src/views/Chat/ChatMessages.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useRef } from "react"
 import Message from "./Message"
-import { ToolCall, ToolResult } from "./ToolPanel"
 import { isChatStreamingAtom } from "../../atoms/chatState"
 import { useAtomValue } from "jotai"
 
@@ -11,8 +10,6 @@ export interface Message {
   timestamp: number
   files?: File[]
   isError?: boolean
-  toolCalls?: ToolCall[]
-  toolResults?: ToolResult[]
 }
 
 interface Props {
@@ -69,8 +66,6 @@ const ChatMessages = ({ messages, isLoading, onRetry, onEdit }: Props) => {
           files={message.files}
           isError={message.isError}
           isLoading={!message.isSent && index === messages.length - 1 && isLoading}
-          toolCalls={message.toolCalls}
-          toolResults={message.toolResults}
           messageId={message.id}
           onRetry={() => onRetry(message.id)}
           onEdit={(newText: string) => onEdit(message.id, newText)}