From 441023aa4ba55a5c82accf38d5fcaa2b750478c8 Mon Sep 17 00:00:00 2001
From: yzh990918 <251205668@qq.com>
Date: Sat, 6 May 2023 17:40:18 +0800
Subject: [PATCH 01/16] feat(message-settings): add copy, show raw code, delete
 message btns

---
 src/components/Main.astro               |  2 +-
 src/components/Markdown.tsx             |  5 +--
 src/components/StreamableText.tsx       |  2 ++
 src/components/main/MessageItem.tsx     | 46 ++++++++++++++++++-------
 src/components/ui/base/DropdownMenu.tsx |  2 ++
 src/components/ui/base/Tooltip.tsx      |  5 +--
 src/stores/messages.ts                  | 13 +++++++
 7 files changed, 58 insertions(+), 17 deletions(-)

diff --git a/src/components/Main.astro b/src/components/Main.astro
index d027d0eb..339d62f5 100644
--- a/src/components/Main.astro
+++ b/src/components/Main.astro
@@ -12,7 +12,7 @@ import Conversation from './main/Conversation'
   <main class="flex-1 mt-14 flex flex-col overflow-hidden">
     <!-- <ConversationConfiguration /> -->
     <div class="flex-1 relative overflow-hidden">
-      <Conversation client:only />
+      <Conversation client:load />
     </div>
   </main>
   <Send client:load />
diff --git a/src/components/Markdown.tsx b/src/components/Markdown.tsx
index e8ae73be..d85abc24 100644
--- a/src/components/Markdown.tsx
+++ b/src/components/Markdown.tsx
@@ -11,6 +11,7 @@ import 'katex/dist/katex.min.css'
 interface Props {
   class?: string
   text: string
+  showRawCode?: boolean
 }
 
 const parseMarkdown = (raw: string) => {
@@ -27,11 +28,11 @@ const parseMarkdown = (raw: string) => {
 }
 
 export default (props: Props) => {
-  const htmlString = () => parseMarkdown(props.text)
+  const htmlString = () => props.showRawCode ? props.text : parseMarkdown(props.text)
 
   return (
     <div
-      class={props.class ?? ''}
+      class={`${props.class ?? ''} ${props.showRawCode ? 'whitespace-pre-wrap overflow-auto my-0' : ''}`}
       innerHTML={htmlString()}
     />
   )
diff --git a/src/components/StreamableText.tsx b/src/components/StreamableText.tsx
index 7abd1f1d..02a4bec6 100644
--- a/src/components/StreamableText.tsx
+++ b/src/components/StreamableText.tsx
@@ -7,6 +7,7 @@ import Markdown from './Markdown'
 interface Props {
   class?: string
   text: string
+  showRawCode?: boolean
   streamInfo?: () => {
     conversationId: string
     messageId: string
@@ -47,6 +48,7 @@ export default (props: Props) => {
     <Markdown
       class={`prose prose-neutral dark:prose-invert fg-base! max-w-3xl -my-4 ${props.class ?? ''}`}
       text={localText()}
+      showRawCode={props.showRawCode}
     />
   )
 }
diff --git a/src/components/main/MessageItem.tsx b/src/components/main/MessageItem.tsx
index 7f53cab7..f3e58c16 100644
--- a/src/components/main/MessageItem.tsx
+++ b/src/components/main/MessageItem.tsx
@@ -1,6 +1,9 @@
 import { For } from 'solid-js/web'
+import { createSignal } from 'solid-js'
+import { useClipboardCopy } from '@/hooks'
+import { deleteMessageByConversationId } from '@/stores/messages'
 import StreamableText from '../StreamableText'
-import { DropDownMenu, Tooltip } from '../ui/base'
+import { Tooltip } from '../ui/base'
 import type { MenuItem } from '../ui/base'
 import type { MessageInstance } from '@/types/message'
 
@@ -18,18 +21,29 @@ export default (props: Props) => {
     assistant: 'bg-gradient-to-b from-[#fccb90] to-[#d57eeb]',
   }
 
-  const handleCopyMessage = () => {
+  const [copied, copy] = useClipboardCopy(props.message.content)
+  const [showRawCode, setShowRawCode] = createSignal(false)
 
+  const handleDeleteMessageItem = () => {
+    deleteMessageByConversationId(props.conversationId, props.message)
   }
 
-  const menuList: MenuItem[] = [
-    { id: 'retry', label: 'Retry message', icon: 'i-ion:refresh-outline' },
-    { id: 'show', label: 'Show raw code', icon: 'i-carbon-code' },
-    { id: 'share', label: 'Share message', icon: 'i-ion:ios-share-alt' },
-    { id: 'edit', label: 'Edit message', icon: 'i-ion:md-create' },
-    { id: 'copy', label: 'Copy message', icon: 'i-carbon-copy' },
-    { id: 'delete', label: 'Delete message', icon: 'i-carbon-trash-can' },
-  ]
+  const [menuList, setMenuList] = createSignal<MenuItem[]>([
+    // TODO: Retry send message
+    // { id: 'retry', label: 'Retry send', icon: 'i-ion:refresh-outline', role: 'all' },
+    { id: 'raw', label: 'Show raw code', icon: 'i-carbon-code', role: 'system', action: () => setShowRawCode(!showRawCode()) },
+    // TODO: Share message
+    // { id: 'share', label: 'Share message', icon: 'i-ion:ios-share-alt' },
+    // TODO: Edit message
+    // { id: 'edit', label: 'Edit message', icon: 'i-ion:md-create', role: 'user' },
+    { id: 'copy', label: 'Copy message', icon: 'i-carbon-copy', role: 'all', action: copy },
+    { id: 'delete', label: 'Delete message', icon: 'i-carbon-trash-can', role: 'all', action: handleDeleteMessageItem },
+  ])
+
+  if (props.message.role === 'user')
+    setMenuList(menuList().filter(item => ['all', 'user'].includes(item.role!)))
+  else
+    setMenuList(menuList().filter(item => ['all', 'system'].includes(item.role!)))
 
   return (
     <div
@@ -48,8 +62,15 @@ export default (props: Props) => {
         </div>
         <div class={`hidden sm:block absolute right-6 -top-4 ${!props.index && 'top-0'}`}>
           <div class="op-0 group-hover:op-80 fcc space-x-2 !bg-base px-4 py-1 rounded-xl b border-base transition-opacity duration-400">
-            <For each={menuList}>
-              {item => (<Tooltip tip={item.label}><div class={`${item.icon} menu-icon`} /></Tooltip>)}
+            <For each={menuList()}>
+              {item => (
+                <Tooltip tip={item.label} handleChildClick={item.action}>
+                  {
+                    item.id === 'copy'
+                      ? <div class={`menu-icon ${copied() ? 'i-carbon-checkmark !text-emerald-400' : 'i-carbon-copy'}`} />
+                      : <div class={`${item.icon} menu-icon`} />
+                  }
+                </Tooltip>)}
             </For>
           </div>
         </div>
@@ -63,6 +84,7 @@ export default (props: Props) => {
                   handleStreaming: props.handleStreaming,
                 })
               : undefined}
+            showRawCode={showRawCode()}
           />
         </div>
 
diff --git a/src/components/ui/base/DropdownMenu.tsx b/src/components/ui/base/DropdownMenu.tsx
index d99d74f5..de4ce9a1 100644
--- a/src/components/ui/base/DropdownMenu.tsx
+++ b/src/components/ui/base/DropdownMenu.tsx
@@ -10,6 +10,8 @@ export interface MenuItem {
   icon?: string
   // TODO: nested menu
   children?: MenuItem[]
+  role?: string
+  action?: (params?: any) => void
 }
 
 interface Props {
diff --git a/src/components/ui/base/Tooltip.tsx b/src/components/ui/base/Tooltip.tsx
index 20af22d0..54cff90a 100644
--- a/src/components/ui/base/Tooltip.tsx
+++ b/src/components/ui/base/Tooltip.tsx
@@ -9,6 +9,7 @@ interface Props {
   children: JSX.Element
   openDelay?: number
   closeDelay?: number
+  handleChildClick?: () => void
   placement?: 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end'
 }
 
@@ -30,9 +31,9 @@ export const Tooltip = (props: Props) => {
   const resolvedChild = () => {
     const child = children(() => props.children)
     createEffect(() => {
-      spread(child() as Element, { ...api().triggerProps })
+      spread(child() as Element, { ...api().triggerProps, onClick: props.handleChildClick })
     })
-    return child
+    return child()
   }
 
   return (
diff --git a/src/stores/messages.ts b/src/stores/messages.ts
index b287280a..b7a22703 100644
--- a/src/stores/messages.ts
+++ b/src/stores/messages.ts
@@ -60,3 +60,16 @@ export const clearMessagesByConversationId = action(
     })
   },
 )
+
+export const deleteMessageByConversationId = action(
+  conversationMessagesMap,
+  'deleteMessageByConversationId',
+  (map, id: string, payload: MessageInstance) => {
+    const oldMessages = map.get()[id] || []
+    map.setKey(id, [...oldMessages.filter(message => message.id !== payload.id)])
+    db.setItem(id, [...oldMessages.filter(message => message.id !== payload.id)])
+    updateConversationById(id, {
+      lastUseTime: Date.now(),
+    })
+  },
+)

From 61b6907f9e2b1f23e9d9c72c295a43c40d500895 Mon Sep 17 00:00:00 2001
From: yzh990918 <251205668@qq.com>
Date: Sat, 6 May 2023 17:58:16 +0800
Subject: [PATCH 02/16] chore: update

---
 src/components/main/MessageItem.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/main/MessageItem.tsx b/src/components/main/MessageItem.tsx
index f3e58c16..f4825bcf 100644
--- a/src/components/main/MessageItem.tsx
+++ b/src/components/main/MessageItem.tsx
@@ -30,12 +30,12 @@ export default (props: Props) => {
 
   const [menuList, setMenuList] = createSignal<MenuItem[]>([
     // TODO: Retry send message
-    // { id: 'retry', label: 'Retry send', icon: 'i-ion:refresh-outline', role: 'all' },
+    { id: 'retry', label: 'Retry send', icon: 'i-ion:refresh-outline', role: 'all' },
     { id: 'raw', label: 'Show raw code', icon: 'i-carbon-code', role: 'system', action: () => setShowRawCode(!showRawCode()) },
     // TODO: Share message
     // { id: 'share', label: 'Share message', icon: 'i-ion:ios-share-alt' },
     // TODO: Edit message
-    // { id: 'edit', label: 'Edit message', icon: 'i-ion:md-create', role: 'user' },
+    { id: 'edit', label: 'Edit message', icon: 'i-ion:md-create', role: 'user' },
     { id: 'copy', label: 'Copy message', icon: 'i-carbon-copy', role: 'all', action: copy },
     { id: 'delete', label: 'Delete message', icon: 'i-carbon-trash-can', role: 'all', action: handleDeleteMessageItem },
   ])

From 897b159035479bd38849394c760607f086a8bd80 Mon Sep 17 00:00:00 2001
From: Evan Yang <251205668@qq.com>
Date: Sat, 6 May 2023 23:23:36 +0800
Subject: [PATCH 03/16] chore: update README.md

---
 README.md | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 30c09064..2fa52974 100644
--- a/README.md
+++ b/README.md
@@ -4,8 +4,9 @@
 
 Anse is a fully optimized UI for AI Chats.
 
-- [Visit anse.app](https://anse.app)
-- [Documentation](https://docs.anse.app)
+- 🍿 **Live preview**: https://anse.app
+- 📖 **Documentation**: https://docs.anse.app
+- ✨ **Release Notes**: https://github.com/anse-app/anse/releases
 
 ## Features
 

From b9a071bc3927eed9f95be980920014094af9fad6 Mon Sep 17 00:00:00 2001
From: yzh990918 <251205668@qq.com>
Date: Mon, 8 May 2023 17:05:10 +0800
Subject: [PATCH 04/16] feat: Improve the logical part of message-settings

---
 src/components/Send.tsx                 |   8 +-
 src/components/main/MessageItem.tsx     | 127 ++++++++++++++++++------
 src/components/ui/base/DropdownMenu.tsx |   9 +-
 src/logics/conversation.ts              |  21 ++--
 src/stores/messages.ts                  |  28 ++++++
 src/stores/settings.ts                  |   3 +-
 src/types/provider.ts                   |   2 +-
 7 files changed, 149 insertions(+), 49 deletions(-)

diff --git a/src/components/Send.tsx b/src/components/Send.tsx
index b2fd9c67..b84bc7b8 100644
--- a/src/components/Send.tsx
+++ b/src/components/Send.tsx
@@ -5,6 +5,7 @@ import { currentErrorMessage, isSendBoxFocus, scrollController } from '@/stores/
 import { addConversation, conversationMap, currentConversationId } from '@/stores/conversation'
 import { loadingStateMap, streamsMap } from '@/stores/streams'
 import { handlePrompt } from '@/logics/conversation'
+import { globalAbortController } from '@/stores/settings'
 
 export default () => {
   let inputRef: HTMLTextAreaElement
@@ -14,7 +15,7 @@ export default () => {
   const $currentErrorMessage = useStore(currentErrorMessage)
   const $streamsMap = useStore(streamsMap)
   const $loadingStateMap = useStore(loadingStateMap)
-  const [controller, setController] = createSignal<AbortController>()
+  const $globalAbortController = useStore(globalAbortController)
 
   const [inputPrompt, setInputPrompt] = createSignal('')
   const isEditing = () => inputPrompt() || $isSendBoxFocus()
@@ -96,12 +97,11 @@ export default () => {
 
   const clearPrompt = () => {
     setInputPrompt('')
-    inputRef.value = ''
     isSendBoxFocus.set(false)
   }
 
   const handleAbortFetch = () => {
-    controller()!.abort()
+    $globalAbortController()?.abort()
     clearPrompt()
   }
 
@@ -124,7 +124,7 @@ export default () => {
       addConversation()
 
     const controller = new AbortController()
-    setController(controller)
+    globalAbortController.set(controller)
     handlePrompt(currentConversation(), inputRef.value, controller.signal)
     clearPrompt()
     scrollController().scrollToBottom()
diff --git a/src/components/main/MessageItem.tsx b/src/components/main/MessageItem.tsx
index f4825bcf..4e4bbe6c 100644
--- a/src/components/main/MessageItem.tsx
+++ b/src/components/main/MessageItem.tsx
@@ -1,9 +1,14 @@
-import { For } from 'solid-js/web'
+import { For, Show } from 'solid-js/web'
 import { createSignal } from 'solid-js'
+import { useStore } from '@nanostores/solid'
 import { useClipboardCopy } from '@/hooks'
-import { deleteMessageByConversationId } from '@/stores/messages'
+import { deleteMessageByConversationId, spliceMessageByConversationId, spliceUpdateMessageByConversationId } from '@/stores/messages'
+import { conversationMap } from '@/stores/conversation'
+import { handlePrompt } from '@/logics/conversation'
+import { scrollController } from '@/stores/ui'
+import { globalAbortController } from '@/stores/settings'
 import StreamableText from '../StreamableText'
-import { Tooltip } from '../ui/base'
+import { DropDownMenu, Tooltip } from '../ui/base'
 import type { MenuItem } from '../ui/base'
 import type { MessageInstance } from '@/types/message'
 
@@ -15,28 +20,65 @@ interface Props {
 }
 
 export default (props: Props) => {
-  const roleClass = {
-    system: 'bg-gradient-to-b from-gray-300 via-gray-200 to-gray-300',
-    user: 'bg-gradient-to-b from-gray-300 via-gray-200 to-gray-300',
-    assistant: 'bg-gradient-to-b from-[#fccb90] to-[#d57eeb]',
-  }
+  const $conversationMap = useStore(conversationMap)
 
-  const [copied, copy] = useClipboardCopy(props.message.content)
   const [showRawCode, setShowRawCode] = createSignal(false)
+  const [copied, setCopied] = createSignal(false)
+  const [isEditing, setIsEditing] = createSignal(false)
+  let inputRef: HTMLTextAreaElement
+  const [inputPrompt, setInputPrompt] = createSignal(props.message.content)
+
+  const currentConversation = () => {
+    return $conversationMap()[props.conversationId]
+  }
 
+  const handleCopyMessageItem = () => {
+    const [Iscopied, copy] = useClipboardCopy(props.message.content)
+    copy()
+    setCopied(Iscopied())
+    setTimeout(() => setCopied(false), 1000)
+  }
   const handleDeleteMessageItem = () => {
     deleteMessageByConversationId(props.conversationId, props.message)
   }
 
+  const handleRetryMessageItem = () => {
+    const controller = new AbortController()
+    globalAbortController.set(controller)
+    spliceMessageByConversationId(props.conversationId, props.message)
+    handlePrompt(currentConversation(), '', controller.signal)
+    // TODO: scrollController seems not working
+    scrollController().scrollToBottom()
+  }
+
+  const handleEditMessageItem = () => {
+    setIsEditing(true)
+    inputRef.focus()
+  }
+
+  const handleSend = () => {
+    if (!inputRef.value)
+      return
+    const controller = new AbortController()
+    const currentMessage: MessageInstance = {
+      ...props.message,
+      content: inputPrompt(),
+    }
+
+    globalAbortController.set(controller)
+    spliceUpdateMessageByConversationId(props.conversationId, currentMessage)
+    setIsEditing(false)
+    handlePrompt(currentConversation(), '', controller.signal)
+    scrollController().scrollToBottom()
+  }
+
   const [menuList, setMenuList] = createSignal<MenuItem[]>([
-    // TODO: Retry send message
-    { id: 'retry', label: 'Retry send', icon: 'i-ion:refresh-outline', role: 'all' },
+    { id: 'retry', label: 'Retry send', icon: 'i-ion:refresh-outline', role: 'all', action: handleRetryMessageItem },
     { id: 'raw', label: 'Show raw code', icon: 'i-carbon-code', role: 'system', action: () => setShowRawCode(!showRawCode()) },
     // TODO: Share message
     // { id: 'share', label: 'Share message', icon: 'i-ion:ios-share-alt' },
-    // TODO: Edit message
-    { id: 'edit', label: 'Edit message', icon: 'i-ion:md-create', role: 'user' },
-    { id: 'copy', label: 'Copy message', icon: 'i-carbon-copy', role: 'all', action: copy },
+    { id: 'edit', label: 'Edit message', icon: 'i-ion:md-create', role: 'user', action: handleEditMessageItem },
+    { id: 'copy', label: 'Copy message', icon: 'i-carbon-copy', role: 'all', action: handleCopyMessageItem },
     { id: 'delete', label: 'Delete message', icon: 'i-carbon-trash-can', role: 'all', action: handleDeleteMessageItem },
   ])
 
@@ -45,6 +87,12 @@ export default (props: Props) => {
   else
     setMenuList(menuList().filter(item => ['all', 'system'].includes(item.role!)))
 
+  const roleClass = {
+    system: 'bg-gradient-to-b from-gray-300 via-gray-200 to-gray-300',
+    user: 'bg-gradient-to-b from-gray-300 via-gray-200 to-gray-300',
+    assistant: 'bg-gradient-to-b from-[#fccb90] to-[#d57eeb]',
+  }
+
   return (
     <div
       class="p-6 break-words group relative"
@@ -54,13 +102,12 @@ export default (props: Props) => {
     >
       <div class="max-w-base flex gap-4 overflow-hidden">
         <div class={`shrink-0 w-7 h-7 rounded-md op-80 ${roleClass[props.message.role]}`} />
-        {/* TODO: MessageItem options menu */}
-        <div class="sm:hidden block absolute bottom-2 right-2 z-10 op-70 cursor-pointer">
-          {/* <DropDownMenu menuList={menuList}>
+        <div class={`sm:hidden block absolute bottom-2 right-4 z-10 op-70 cursor-pointer ${isEditing() && '!hidden'}`}>
+          <DropDownMenu menuList={menuList()}>
             <div class="text-xl i-carbon:overflow-menu-horizontal" />
-          </DropDownMenu> */}
+          </DropDownMenu>
         </div>
-        <div class={`hidden sm:block absolute right-6 -top-4 ${!props.index && 'top-0'}`}>
+        <div class={`hidden sm:block absolute right-6 -top-4 ${!props.index && 'top-0'} ${isEditing() && '!hidden'}`}>
           <div class="op-0 group-hover:op-80 fcc space-x-2 !bg-base px-4 py-1 rounded-xl b border-base transition-opacity duration-400">
             <For each={menuList()}>
               {item => (
@@ -75,17 +122,37 @@ export default (props: Props) => {
           </div>
         </div>
         <div class="flex-1 min-w-0">
-          <StreamableText
-            text={props.message.content}
-            streamInfo={props.message.stream
-              ? () => ({
-                  conversationId: props.conversationId,
-                  messageId: props.message.id || '',
-                  handleStreaming: props.handleStreaming,
-                })
-              : undefined}
-            showRawCode={showRawCode()}
-          />
+          <Show when={isEditing()} >
+            <textarea
+              ref={inputRef!}
+              value={inputPrompt()}
+              autocomplete="off"
+              onInput={() => { setInputPrompt(inputRef.value) }}
+              onKeyDown={(e) => {
+                e.key === 'Enter' && !e.isComposing && !e.shiftKey && handleSend()
+              }}
+              class="op-70 bg-darker py-4 px-[calc(max(1.5rem,(100%-48rem)/2))] w-full inset-0 scroll-pa-4 input-base rounded-md"
+            />
+
+            <div class="flex justify-end space-x-2 -mt-1">
+              <div class="inline-flex items-center button" onClick={() => setIsEditing(false)}>Cancel</div>
+              <div class="inline-flex items-center button" onClick={() => handleSend()}>Submit</div>
+            </div>
+          </Show>
+          <Show when={!isEditing()}>
+            <StreamableText
+              text={props.message.content}
+              streamInfo={props.message.stream
+                ? () => ({
+                    conversationId: props.conversationId,
+                    messageId: props.message.id || '',
+                    handleStreaming: props.handleStreaming,
+                  })
+                : undefined}
+              showRawCode={showRawCode()}
+            />
+          </Show>
+
         </div>
 
       </div>
diff --git a/src/components/ui/base/DropdownMenu.tsx b/src/components/ui/base/DropdownMenu.tsx
index de4ce9a1..a2ab1396 100644
--- a/src/components/ui/base/DropdownMenu.tsx
+++ b/src/components/ui/base/DropdownMenu.tsx
@@ -8,7 +8,6 @@ export interface MenuItem {
   id: string
   label: string | JSXElement
   icon?: string
-  // TODO: nested menu
   children?: MenuItem[]
   role?: string
   action?: (params?: any) => void
@@ -24,7 +23,11 @@ export const DropDownMenu = (props: Props) => {
     menu.machine({
       id: createUniqueId(),
       onSelect(details) {
-        console.log(details)
+        if (details.value) {
+          const currentAction = props.menuList.find(item => item.id === details.value)?.action
+          if (typeof currentAction === 'function')
+            currentAction()
+        }
       },
     }),
   )
@@ -45,7 +48,7 @@ export const DropDownMenu = (props: Props) => {
   })
 
   return (
-    <div>
+    <div class="!outline-none">
       <Dynamic component={resolvedChild} />
       <Show when={api().isOpen}>
         <Portal>
diff --git a/src/logics/conversation.ts b/src/logics/conversation.ts
index f3c8e7b4..b4add50a 100644
--- a/src/logics/conversation.ts
+++ b/src/logics/conversation.ts
@@ -10,7 +10,7 @@ import type { HandlerPayload, PromptResponse } from '@/types/provider'
 import type { Conversation } from '@/types/conversation'
 import type { ErrorMessage, Message } from '@/types/message'
 
-export const handlePrompt = async(conversation: Conversation, prompt: string, signal?: AbortSignal) => {
+export const handlePrompt = async(conversation: Conversation, prompt?: string, signal?: AbortSignal) => {
   const generalSettings = getGeneralSettings()
   const bot = getBotMetaById(conversation.bot)
   const [providerId, botId] = conversation.bot.split(':')
@@ -22,13 +22,14 @@ export const handlePrompt = async(conversation: Conversation, prompt: string, si
 
   if (bot.type !== 'chat_continuous')
     clearMessagesByConversationId(conversation.id)
-
-  pushMessageByConversationId(conversation.id, {
-    id: `${conversation.id}:user:${Date.now()}`,
-    role: 'user',
-    content: prompt,
-    dateTime: new Date().getTime(),
-  })
+  if (prompt) {
+    pushMessageByConversationId(conversation.id, {
+      id: `${conversation.id}:user:${Date.now()}`,
+      role: 'user',
+      content: prompt,
+      dateTime: new Date().getTime(),
+    })
+  }
 
   setLoadingStateByConversationId(conversation.id, true)
   let providerResponse: PromptResponse
@@ -85,7 +86,7 @@ export const handlePrompt = async(conversation: Conversation, prompt: string, si
 
   // Update conversation title
   if (providerResponse && bot.type === 'chat_continuous' && !conversation.name) {
-    const inputText = conversation.systemInfo || prompt
+    const inputText = conversation.systemInfo || prompt!
     const rapidPayload = generateRapidProviderPayload(promptHelper.summarizeText(inputText), provider.id)
     const generatedTitle = await getProviderResponse(provider.id, rapidPayload).catch(() => {}) as string || inputText
     updateConversationById(conversation.id, {
@@ -128,7 +129,7 @@ export const callProviderHandler = async(providerId: string, payload: HandlerPay
 
   let response: PromptResponse
   if (payload.botId === 'temp')
-    response = await provider.handleRapidPrompt?.(payload.prompt, payload.globalSettings)
+    response = await provider.handleRapidPrompt?.(payload.prompt!, payload.globalSettings)
   else
     response = await provider.handlePrompt?.(payload, signal)
 
diff --git a/src/stores/messages.ts b/src/stores/messages.ts
index b7a22703..418b5cf6 100644
--- a/src/stores/messages.ts
+++ b/src/stores/messages.ts
@@ -73,3 +73,31 @@ export const deleteMessageByConversationId = action(
     })
   },
 )
+
+export const spliceMessageByConversationId = action(
+  conversationMessagesMap,
+  'spliceMessagesByConversationId',
+  (map, id: string, payload: MessageInstance) => {
+    const oldMessages = map.get()[id] || []
+    const currentIndex = oldMessages.findIndex(message => message.id === payload.id)
+    map.setKey(id, [...oldMessages.slice(0, currentIndex + 1)])
+    db.setItem(id, [...oldMessages.slice(0, currentIndex + 1)])
+    updateConversationById(id, {
+      lastUseTime: Date.now(),
+    })
+  },
+)
+
+export const spliceUpdateMessageByConversationId = action(
+  conversationMessagesMap,
+  'spliceMessagesByConversationId',
+  (map, id: string, payload: MessageInstance) => {
+    const oldMessages = map.get()[id] || []
+    const currentIndex = oldMessages.findIndex(message => message.id === payload.id)
+    map.setKey(id, [...oldMessages.slice(0, currentIndex), payload])
+    db.setItem(id, [...oldMessages.slice(0, currentIndex), payload])
+    updateConversationById(id, {
+      lastUseTime: Date.now(),
+    })
+  },
+)
diff --git a/src/stores/settings.ts b/src/stores/settings.ts
index f4d78720..fbb542e2 100644
--- a/src/stores/settings.ts
+++ b/src/stores/settings.ts
@@ -1,10 +1,11 @@
-import { action, map } from 'nanostores'
+import { action, atom, map } from 'nanostores'
 import { db } from './storage/settings'
 import { getProviderById, providerMetaList } from './provider'
 import type { SettingsPayload } from '@/types/provider'
 import type { GeneralSettings } from '@/types/app'
 
 export const providerSettingsMap = map<Record<string, SettingsPayload>>({})
+export const globalAbortController = atom<AbortController | null>(null)
 
 export const rebuildSettingsStore = async() => {
   const exportData = await db.exportData()
diff --git a/src/types/provider.ts b/src/types/provider.ts
index 87245093..dbabea99 100644
--- a/src/types/provider.ts
+++ b/src/types/provider.ts
@@ -34,7 +34,7 @@ export interface HandlerPayload {
   botId: string
   globalSettings: SettingsPayload
   botSettings: SettingsPayload
-  prompt: string
+  prompt?: string
   messages: Message[]
 }
 

From a699aac21e3bbe719ede5f20db1b125347025a53 Mon Sep 17 00:00:00 2001
From: yzh990918 <251205668@qq.com>
Date: Mon, 8 May 2023 17:07:24 +0800
Subject: [PATCH 05/16] feat: add Index props

---
 src/components/main/Continuous.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/main/Continuous.tsx b/src/components/main/Continuous.tsx
index 8f516136..8357a849 100644
--- a/src/components/main/Continuous.tsx
+++ b/src/components/main/Continuous.tsx
@@ -45,7 +45,7 @@ export default (props: Props) => {
                 conversationId={props.conversationId}
                 message={message}
                 handleStreaming={handleStreamableTextUpdate}
-                // index={index()}
+                index={index()}
               />
             </div>
           )}

From 01c7e8dbc1edaf31011ee9019cc9719d9ab9fc09 Mon Sep 17 00:00:00 2001
From: yzh990918 <251205668@qq.com>
Date: Mon, 8 May 2023 18:20:07 +0800
Subject: [PATCH 06/16] feat: add useClickOutside hooks, hidden dropmenu when
 clickOutside

---
 src/components/main/MessageItem.tsx     |  5 +++--
 src/components/ui/base/DropdownMenu.tsx | 14 +++++++++++---
 src/hooks/index.ts                      |  1 +
 src/hooks/useClickOutside.ts            | 25 +++++++++++++++++++++++++
 4 files changed, 40 insertions(+), 5 deletions(-)
 create mode 100644 src/hooks/useClickOutside.ts

diff --git a/src/components/main/MessageItem.tsx b/src/components/main/MessageItem.tsx
index 4e4bbe6c..0feaf8d6 100644
--- a/src/components/main/MessageItem.tsx
+++ b/src/components/main/MessageItem.tsx
@@ -1,5 +1,5 @@
 import { For, Show } from 'solid-js/web'
-import { createSignal } from 'solid-js'
+import { createSignal, onCleanup } from 'solid-js'
 import { useStore } from '@nanostores/solid'
 import { useClipboardCopy } from '@/hooks'
 import { deleteMessageByConversationId, spliceMessageByConversationId, spliceUpdateMessageByConversationId } from '@/stores/messages'
@@ -20,12 +20,12 @@ interface Props {
 }
 
 export default (props: Props) => {
+  let inputRef: HTMLTextAreaElement
   const $conversationMap = useStore(conversationMap)
 
   const [showRawCode, setShowRawCode] = createSignal(false)
   const [copied, setCopied] = createSignal(false)
   const [isEditing, setIsEditing] = createSignal(false)
-  let inputRef: HTMLTextAreaElement
   const [inputPrompt, setInputPrompt] = createSignal(props.message.content)
 
   const currentConversation = () => {
@@ -38,6 +38,7 @@ export default (props: Props) => {
     setCopied(Iscopied())
     setTimeout(() => setCopied(false), 1000)
   }
+
   const handleDeleteMessageItem = () => {
     deleteMessageByConversationId(props.conversationId, props.message)
   }
diff --git a/src/components/ui/base/DropdownMenu.tsx b/src/components/ui/base/DropdownMenu.tsx
index a2ab1396..e8ad0ca4 100644
--- a/src/components/ui/base/DropdownMenu.tsx
+++ b/src/components/ui/base/DropdownMenu.tsx
@@ -2,7 +2,8 @@ import * as menu from '@zag-js/menu'
 import { normalizeProps, useMachine } from '@zag-js/solid'
 import { Show, children, createEffect, createMemo, createUniqueId } from 'solid-js'
 import { Dynamic, For, Portal, spread } from 'solid-js/web'
-import type { JSX, JSXElement } from 'solid-js'
+import { useClickOutside } from '@/hooks'
+import type { Accessor, JSX, JSXElement } from 'solid-js'
 
 export interface MenuItem {
   id: string
@@ -16,6 +17,7 @@ export interface MenuItem {
 interface Props {
   children: JSX.Element
   menuList: MenuItem[]
+  close?: () => Accessor<boolean>
 }
 
 export const DropDownMenu = (props: Props) => {
@@ -31,6 +33,7 @@ export const DropDownMenu = (props: Props) => {
       },
     }),
   )
+  let dropDownMenuRef: HTMLDivElement
 
   const api = createMemo(() => menu.connect(state, send, normalizeProps))
 
@@ -45,15 +48,20 @@ export const DropDownMenu = (props: Props) => {
   createEffect(() => {
     // https://github.com/chakra-ui/zag/issues/595
     api().setPositioning({})
+
+    dropDownMenuRef = document.getElementById('DropDownMenuRef') as HTMLDivElement
+    useClickOutside(dropDownMenuRef, () => {
+      api().close()
+    })
   })
 
   return (
-    <div class="!outline-none">
+    <div id="DropDownMenuRef" class="!outline-none" >
       <Dynamic component={resolvedChild} />
       <Show when={api().isOpen}>
         <Portal>
           <div {...api().positionerProps} z-20>
-            <div {...api().contentProps} class=" bg-white dark-bg-zinc-900 flex flex-col space-y-1 rounded-md shadow-md">
+            <div {...api().contentProps} class="bg-white dark-bg-zinc-900 flex flex-col space-y-1 rounded-md shadow-md ">
               <Show when={api().isOpen}>
                 <For each={props.menuList}>
                   {item => (<div class="px-3 py-2 flex items-center space-x-2 hv-base" {...api().getItemProps({ id: item.id })}>{item.icon && <div class={item.icon} />}<div>{item.label}</div></div>)}
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
index b39860b8..a679460a 100644
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@@ -1,2 +1,3 @@
 export * from './useDark'
 export * from './useCopy'
+export * from './useClickOutside'
diff --git a/src/hooks/useClickOutside.ts b/src/hooks/useClickOutside.ts
new file mode 100644
index 00000000..7fd9fbf7
--- /dev/null
+++ b/src/hooks/useClickOutside.ts
@@ -0,0 +1,25 @@
+import { createSignal, onCleanup } from 'solid-js'
+
+export const useClickOutside = (ref: HTMLElement, handler: (e: MouseEvent) => any) => {
+  const [clickedOutside, setClickedOutside] = createSignal(false)
+
+  const handleClick = (event: MouseEvent) => {
+    if (ref && (ref.contains(event.target as Node) || event.composedPath().includes(ref))) {
+      setClickedOutside(false)
+      return clickedOutside()
+    } else {
+      setClickedOutside(true)
+      handler(event)
+    }
+  }
+
+  const handleCleanup = () => {
+    document.removeEventListener('click', handleClick)
+  }
+
+  document.addEventListener('click', handleClick)
+
+  onCleanup(handleCleanup)
+
+  return clickedOutside()
+}

From 1a48846c4e0dbca4fc82c87865a400dbd2499674 Mon Sep 17 00:00:00 2001
From: yzh990918 <251205668@qq.com>
Date: Mon, 8 May 2023 18:34:30 +0800
Subject: [PATCH 07/16] chore: update

---
 src/components/main/MessageItem.tsx     |  5 +++--
 src/components/ui/base/DropdownMenu.tsx | 11 ++---------
 2 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/src/components/main/MessageItem.tsx b/src/components/main/MessageItem.tsx
index 0feaf8d6..04358273 100644
--- a/src/components/main/MessageItem.tsx
+++ b/src/components/main/MessageItem.tsx
@@ -1,5 +1,5 @@
 import { For, Show } from 'solid-js/web'
-import { createSignal, onCleanup } from 'solid-js'
+import { createSignal } from 'solid-js'
 import { useStore } from '@nanostores/solid'
 import { useClipboardCopy } from '@/hooks'
 import { deleteMessageByConversationId, spliceMessageByConversationId, spliceUpdateMessageByConversationId } from '@/stores/messages'
@@ -103,7 +103,8 @@ export default (props: Props) => {
     >
       <div class="max-w-base flex gap-4 overflow-hidden">
         <div class={`shrink-0 w-7 h-7 rounded-md op-80 ${roleClass[props.message.role]}`} />
-        <div class={`sm:hidden block absolute bottom-2 right-4 z-10 op-70 cursor-pointer ${isEditing() && '!hidden'}`}>
+        <div id="menuList-wrapper" class={`sm:hidden block absolute bottom-2 right-4 z-10 op-70 cursor-pointer ${isEditing() && '!hidden'}`}>
+          {/* TODO: hiden when clickOutside */}
           <DropDownMenu menuList={menuList()}>
             <div class="text-xl i-carbon:overflow-menu-horizontal" />
           </DropDownMenu>
diff --git a/src/components/ui/base/DropdownMenu.tsx b/src/components/ui/base/DropdownMenu.tsx
index e8ad0ca4..7fef835b 100644
--- a/src/components/ui/base/DropdownMenu.tsx
+++ b/src/components/ui/base/DropdownMenu.tsx
@@ -2,8 +2,7 @@ import * as menu from '@zag-js/menu'
 import { normalizeProps, useMachine } from '@zag-js/solid'
 import { Show, children, createEffect, createMemo, createUniqueId } from 'solid-js'
 import { Dynamic, For, Portal, spread } from 'solid-js/web'
-import { useClickOutside } from '@/hooks'
-import type { Accessor, JSX, JSXElement } from 'solid-js'
+import type { JSX, JSXElement } from 'solid-js'
 
 export interface MenuItem {
   id: string
@@ -17,7 +16,7 @@ export interface MenuItem {
 interface Props {
   children: JSX.Element
   menuList: MenuItem[]
-  close?: () => Accessor<boolean>
+  close?: boolean
 }
 
 export const DropDownMenu = (props: Props) => {
@@ -33,7 +32,6 @@ export const DropDownMenu = (props: Props) => {
       },
     }),
   )
-  let dropDownMenuRef: HTMLDivElement
 
   const api = createMemo(() => menu.connect(state, send, normalizeProps))
 
@@ -48,11 +46,6 @@ export const DropDownMenu = (props: Props) => {
   createEffect(() => {
     // https://github.com/chakra-ui/zag/issues/595
     api().setPositioning({})
-
-    dropDownMenuRef = document.getElementById('DropDownMenuRef') as HTMLDivElement
-    useClickOutside(dropDownMenuRef, () => {
-      api().close()
-    })
   })
 
   return (

From a2cf9e19c39c1eedbb4807f46283497cdd04b45e Mon Sep 17 00:00:00 2001
From: Evan Yang <251205668@qq.com>
Date: Mon, 8 May 2023 18:52:54 +0800
Subject: [PATCH 08/16] fix(netlify): fix resolve path error

---
 src/components/main/MessageItem.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/main/MessageItem.tsx b/src/components/main/MessageItem.tsx
index 04358273..b9c52cbf 100644
--- a/src/components/main/MessageItem.tsx
+++ b/src/components/main/MessageItem.tsx
@@ -1,7 +1,7 @@
 import { For, Show } from 'solid-js/web'
 import { createSignal } from 'solid-js'
 import { useStore } from '@nanostores/solid'
-import { useClipboardCopy } from '@/hooks'
+import { useClipboardCopy } from '../../hooks'
 import { deleteMessageByConversationId, spliceMessageByConversationId, spliceUpdateMessageByConversationId } from '@/stores/messages'
 import { conversationMap } from '@/stores/conversation'
 import { handlePrompt } from '@/logics/conversation'

From 6a727c3e7242d62c2d6c4058bf17b1ce0804cca5 Mon Sep 17 00:00:00 2001
From: yzh990918 <251205668@qq.com>
Date: Mon, 8 May 2023 18:57:33 +0800
Subject: [PATCH 09/16] fix: change client type to fix build error

---
 src/components/Main.astro           | 2 +-
 src/components/main/MessageItem.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Main.astro b/src/components/Main.astro
index 339d62f5..d027d0eb 100644
--- a/src/components/Main.astro
+++ b/src/components/Main.astro
@@ -12,7 +12,7 @@ import Conversation from './main/Conversation'
   <main class="flex-1 mt-14 flex flex-col overflow-hidden">
     <!-- <ConversationConfiguration /> -->
     <div class="flex-1 relative overflow-hidden">
-      <Conversation client:load />
+      <Conversation client:only />
     </div>
   </main>
   <Send client:load />
diff --git a/src/components/main/MessageItem.tsx b/src/components/main/MessageItem.tsx
index b9c52cbf..04358273 100644
--- a/src/components/main/MessageItem.tsx
+++ b/src/components/main/MessageItem.tsx
@@ -1,7 +1,7 @@
 import { For, Show } from 'solid-js/web'
 import { createSignal } from 'solid-js'
 import { useStore } from '@nanostores/solid'
-import { useClipboardCopy } from '../../hooks'
+import { useClipboardCopy } from '@/hooks'
 import { deleteMessageByConversationId, spliceMessageByConversationId, spliceUpdateMessageByConversationId } from '@/stores/messages'
 import { conversationMap } from '@/stores/conversation'
 import { handlePrompt } from '@/logics/conversation'

From 674383b15a8880b6990c542cb9ee3e7662be0d3c Mon Sep 17 00:00:00 2001
From: ddiu8081 <ddiu8081@gmail.com>
Date: Wed, 10 May 2023 03:24:02 +0800
Subject: [PATCH 10/16] chore: upgrade zag dependencies

---
 package.json   |  18 ++---
 pnpm-lock.yaml | 215 ++++++++++++++-----------------------------------
 2 files changed, 70 insertions(+), 163 deletions(-)

diff --git a/package.json b/package.json
index 67f10ce8..0058a9b0 100644
--- a/package.json
+++ b/package.json
@@ -26,15 +26,15 @@
     "@solid-primitives/scheduled": "^1.3.2",
     "@solid-primitives/scroll": "^2.0.14",
     "@unocss/reset": "^0.50.6",
-    "@zag-js/dialog": "^0.2.15",
-    "@zag-js/menu": "^0.5.0",
-    "@zag-js/select": "^0.6.0",
-    "@zag-js/slider": "^0.2.14",
-    "@zag-js/solid": "^0.3.1",
-    "@zag-js/switch": "^0.5.0",
-    "@zag-js/toast": "^0.2.13",
-    "@zag-js/toggle": "^0.2.15",
-    "@zag-js/tooltip": "^0.2.12",
+    "@zag-js/dialog": "^0.7.0",
+    "@zag-js/menu": "^0.7.0",
+    "@zag-js/select": "^0.7.0",
+    "@zag-js/slider": "^0.7.0",
+    "@zag-js/solid": "^0.7.0",
+    "@zag-js/switch": "^0.7.0",
+    "@zag-js/toast": "^0.7.0",
+    "@zag-js/toggle": "^0.7.0",
+    "@zag-js/tooltip": "^0.7.0",
     "astro": "^2.2.0",
     "bumpp": "^9.1.0",
     "destr": "^1.2.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2bcfc239..76e19e52 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -35,32 +35,32 @@ dependencies:
     specifier: ^0.50.6
     version: 0.50.6
   '@zag-js/dialog':
-    specifier: ^0.2.15
-    version: 0.2.15
+    specifier: ^0.7.0
+    version: 0.7.0
   '@zag-js/menu':
-    specifier: ^0.5.0
-    version: 0.5.0
+    specifier: ^0.7.0
+    version: 0.7.0
   '@zag-js/select':
-    specifier: ^0.6.0
-    version: 0.6.0
+    specifier: ^0.7.0
+    version: 0.7.0
   '@zag-js/slider':
-    specifier: ^0.2.14
-    version: 0.2.17
+    specifier: ^0.7.0
+    version: 0.7.0
   '@zag-js/solid':
-    specifier: ^0.3.1
-    version: 0.3.1(solid-js@1.6.12)
+    specifier: ^0.7.0
+    version: 0.7.0(solid-js@1.6.12)
   '@zag-js/switch':
-    specifier: ^0.5.0
-    version: 0.5.0
+    specifier: ^0.7.0
+    version: 0.7.0
   '@zag-js/toast':
-    specifier: ^0.2.13
-    version: 0.2.16
+    specifier: ^0.7.0
+    version: 0.7.0
   '@zag-js/toggle':
-    specifier: ^0.2.15
-    version: 0.2.15
+    specifier: ^0.7.0
+    version: 0.7.0
   '@zag-js/tooltip':
-    specifier: ^0.2.12
-    version: 0.2.13
+    specifier: ^0.7.0
+    version: 0.7.0
   astro:
     specifier: ^2.2.0
     version: 2.2.0
@@ -1777,12 +1777,6 @@ packages:
     resolution: {integrity: sha512-qrcbyfnRVziRlB6IYwjCopYhO7Vud750JlJyuljruIXcPxr22y8zdckcJGsuOdnQ639uVD1tTXddrcH3t3QYIQ==}
     dev: false
 
-  /@floating-ui/dom@1.2.1:
-    resolution: {integrity: sha512-Rt45SmRiV8eU+xXSB9t0uMYiQ/ZWGE/jumse2o3i5RGlyvcbqOF4q+1qBnzLE2kZ5JGhq0iMkcGXUKbFe7MpTA==}
-    dependencies:
-      '@floating-ui/core': 1.2.5
-    dev: false
-
   /@floating-ui/dom@1.2.5:
     resolution: {integrity: sha512-+sAUfpQ3Frz+VCbPCqj+cZzvEESy3fjSeT/pDWkYCWOBXYNNKZfuVsHuv8/JO2zze8+Eb/Q7a6hZVgzS81fLbQ==}
     dependencies:
@@ -2682,59 +2676,27 @@ packages:
     resolution: {integrity: sha512-48e5YT2hb4pyPoTTs97CVcHjq+VGF6yfcpmJ8KY4cSKoB0WWSrb8NLNwv8uMceyqhy4QVE7dEWayR47FRPY02g==}
     dev: false
 
-  /@zag-js/core@0.2.10:
-    resolution: {integrity: sha512-Hc8a8KF+5VpSlLkeKFqFTRvlBtBOL+yjUEy0/pD5jTOPOwKyEHz+Yt/nCaGW5L3rzNkALpiAfrKHkXdhYKNOVg==}
-    dependencies:
-      '@zag-js/store': 0.2.8
-      klona: 2.0.6
-    dev: false
-
-  /@zag-js/core@0.2.12:
-    resolution: {integrity: sha512-XAcB9BorwetDljwLQeFHrTeBpw7jQUSKNj1zfy+TU/ZmQ9JVaKSDLO0JdKAy05lJIT7jKpjOkGB3g5tt+mT79w==}
+  /@zag-js/core@0.7.0:
+    resolution: {integrity: sha512-5c3HJ1beuAoX9mi8GZ8E6JPRGSEe2aVEAxyR4e7lHGKc/UoLoRrtn/caFGFtN9jNraWQZHS4PDGACHnwD8O+zg==}
     dependencies:
       '@zag-js/store': 0.2.8
       klona: 2.0.6
     dev: false
 
-  /@zag-js/core@0.5.0:
-    resolution: {integrity: sha512-hFQeMsQP274r/0L3n8BV+Esm06kKkxvBVORJ7tfdIqb7gPuGCuh1X88E3VmP/OrxjZA3Ped8MpENqXlEOpUaHw==}
-    dependencies:
-      '@zag-js/store': 0.2.8
-      klona: 2.0.6
-    dev: false
-
-  /@zag-js/dialog@0.2.15:
-    resolution: {integrity: sha512-BqlLJkNbiMNZJG91fXzJZMe0gnjsmfzBZ6+asiIlEel1TMYQqFkimPK3YtGmTEeqM8S0vkcF3eIF4NLOsFtDFA==}
+  /@zag-js/dialog@0.7.0:
+    resolution: {integrity: sha512-A7GMopQQrWxHt+p5OuABvpKv+jahwX7/NFPmAYAcQAdrdiue/wSEUCOXC2KSZIimHkCbSO2CXzGHiX3TSNp+pA==}
     dependencies:
       '@zag-js/anatomy': 0.1.4
       '@zag-js/aria-hidden': 0.2.2
-      '@zag-js/core': 0.2.12
-      '@zag-js/dismissable': 0.2.6
+      '@zag-js/core': 0.7.0
+      '@zag-js/dismissable': 0.6.0
       '@zag-js/dom-query': 0.1.4
       '@zag-js/remove-scroll': 0.2.4
-      '@zag-js/types': 0.3.4
+      '@zag-js/types': 0.5.0
       '@zag-js/utils': 0.3.4
       focus-trap: 7.4.0
     dev: false
 
-  /@zag-js/dismissable@0.2.6:
-    resolution: {integrity: sha512-ra72EJySeKRuVaUj/m/OiMFq32dAkVY8dD387EhhSZejN0GLUQlKfZG4/3Mq6j4mm71N1Nig0epGZ6o1LSxDIA==}
-    dependencies:
-      '@zag-js/dom-event': 0.0.1
-      '@zag-js/dom-query': 0.1.4
-      '@zag-js/interact-outside': 0.2.6
-      '@zag-js/utils': 0.3.4
-    dev: false
-
-  /@zag-js/dismissable@0.5.0:
-    resolution: {integrity: sha512-Iz/UNLaClWush0q8zpotqI/QMZw7hhxxRy2o5W34ItDi+aRXhfRf4My0Na4n0wRAdep9kMa02tAzGkp7vGq/9Q==}
-    dependencies:
-      '@zag-js/dom-event': 0.5.0
-      '@zag-js/dom-query': 0.1.4
-      '@zag-js/interact-outside': 0.5.0
-      '@zag-js/utils': 0.3.4
-    dev: false
-
   /@zag-js/dismissable@0.6.0:
     resolution: {integrity: sha512-D6drGv+ZzGguyPFefd4nLCFQGgGy/zQkDaXnHqkBffnooqqWnJizmgxgynajfCQrVK3VfZ473D8V8SD66/jBdQ==}
     dependencies:
@@ -2744,20 +2706,6 @@ packages:
       '@zag-js/utils': 0.3.4
     dev: false
 
-  /@zag-js/dom-event@0.0.1:
-    resolution: {integrity: sha512-oRDWn/31JUwTc9nIUG/Ingug6FNBkhXUnd2dh3vEcqfk+NVHPZ9Lgx5tauiEDyiRKeWr9PS5GJpBQVNc2YDo3Q==}
-    dependencies:
-      '@zag-js/text-selection': 0.0.1
-      '@zag-js/types': 0.3.4
-    dev: false
-
-  /@zag-js/dom-event@0.5.0:
-    resolution: {integrity: sha512-O1qBxYemJkEvsLBzVpbch76W+CYHnosoV4mFEtTVqtrgjtGAp/z4ql5Fviudh8ORg07uIQyykXH3lDvk4V7Tmg==}
-    dependencies:
-      '@zag-js/text-selection': 0.0.1
-      '@zag-js/types': 0.5.0
-    dev: false
-
   /@zag-js/dom-event@0.6.0:
     resolution: {integrity: sha512-C/3v8tGOYcslmNcBB0Jyxuwthr/Pyw9WGYDMFUOQ0GqX3q019M2DdndqH9Iof35OfJ4ZLDOX9VyTNfPEGZAwVA==}
     dependencies:
@@ -2769,10 +2717,6 @@ packages:
     resolution: {integrity: sha512-s2q18k3z3ABAkySc6xK1NLPVIdgZGTLSZxok7yzpCYoywEeCnFvP6K63Q4ONElk74XgO7Eq8KMzIj702LDS+Mg==}
     dev: false
 
-  /@zag-js/element-rect@0.2.2:
-    resolution: {integrity: sha512-6sh+3wRfq5MlMTxQ30CS3B6cvrHY5cEhOHHsXAJC1y9WVLTtA5Z1GhdCQxqd5lVt6yEc8uaoOQppM/VpWn6m3Q==}
-    dev: false
-
   /@zag-js/element-rect@0.3.0:
     resolution: {integrity: sha512-P3bdcfE5Bk3Bm7qhs8lPDykgWNYJeMgyqa+3Z93QPCH9cXsg76O0OrhkK3kWruHzT/f+sVXDDZ1yEUxxgLCRFg==}
     dev: false
@@ -2787,24 +2731,6 @@ packages:
       '@zag-js/mutation-observer': 0.0.1
     dev: false
 
-  /@zag-js/interact-outside@0.2.6:
-    resolution: {integrity: sha512-4Q3ij2aDYwcGkJmlyxIq+lq3J9gF2hjMJGAIYFC6AOfN/SCivkPFlq3zabCZUSZrzPYwggMVL6GdUI+bTAE4Iw==}
-    dependencies:
-      '@zag-js/dom-event': 0.0.1
-      '@zag-js/dom-query': 0.1.4
-      '@zag-js/tabbable': 0.1.1
-      '@zag-js/utils': 0.3.4
-    dev: false
-
-  /@zag-js/interact-outside@0.5.0:
-    resolution: {integrity: sha512-S77WBF7jzvMNZZB0qIhBkqax+l2znUCcfjTKRL1tDYOQONlQqA9zTB2EoQgGfADXmu3rWBLLAmznRPCfToJy/w==}
-    dependencies:
-      '@zag-js/dom-event': 0.5.0
-      '@zag-js/dom-query': 0.1.4
-      '@zag-js/tabbable': 0.1.1
-      '@zag-js/utils': 0.3.4
-    dev: false
-
   /@zag-js/interact-outside@0.6.0:
     resolution: {integrity: sha512-jIMhKit3iwCj50muUQsFMSLB6vouvnwgFFuTVuhNIUmqstmH0cvhmaywXcIQyrrEbM6nL2BjF+Csy3BaUgtzZA==}
     dependencies:
@@ -2814,13 +2740,13 @@ packages:
       '@zag-js/utils': 0.3.4
     dev: false
 
-  /@zag-js/menu@0.5.0:
-    resolution: {integrity: sha512-HWdIjY3B1wOarWS86rkgcjOgMemzlNg4B1VIanjMsivxLoB4QbwFu8u03vu91wbFU/5WeZYFx0FEYQmAgxrl3A==}
+  /@zag-js/menu@0.7.0:
+    resolution: {integrity: sha512-RfzOKO+zK4JL9Up/Q+0LpHK9oWHnCSalRhHfG6HWAdTL2pLI3q2byWXmFxZgPCvAhF/APFAmD6x0ADN8GvRO0g==}
     dependencies:
       '@zag-js/anatomy': 0.1.4
-      '@zag-js/core': 0.5.0
-      '@zag-js/dismissable': 0.5.0
-      '@zag-js/dom-event': 0.5.0
+      '@zag-js/core': 0.7.0
+      '@zag-js/dismissable': 0.6.0
+      '@zag-js/dom-event': 0.6.0
       '@zag-js/dom-query': 0.1.4
       '@zag-js/popper': 0.2.7
       '@zag-js/rect-utils': 0.2.3
@@ -2836,15 +2762,6 @@ packages:
     resolution: {integrity: sha512-TVOUG6aXfzUaSrigFeTdN/pGlKBInMRTYhYfPWGg3UOACkRVSyiUc8I3W1j4a66JHE5urzB35jQCU8Y4EcGuIw==}
     dev: false
 
-  /@zag-js/popper@0.2.5:
-    resolution: {integrity: sha512-FhMjiu7mdwbFAEovGBhL5w/LLhZXREnjAODszNTkcAahZnwsd4xAPTQnSEYkG80oe58pdBsD0IPu4fn3sbcr1A==}
-    dependencies:
-      '@floating-ui/dom': 1.2.1
-      '@zag-js/dom-query': 0.1.4
-      '@zag-js/element-rect': 0.2.2
-      '@zag-js/utils': 0.3.3
-    dev: false
-
   /@zag-js/popper@0.2.7:
     resolution: {integrity: sha512-ruWgwZXYt+hEhMamjuQ1J/UdQsRazB0t4eajatgb9ei9YPtFDxEmXf3UegeWkhMTMfZdTTZEozmtrzcflzAmKQ==}
     dependencies:
@@ -2864,11 +2781,11 @@ packages:
       '@zag-js/dom-query': 0.1.4
     dev: false
 
-  /@zag-js/select@0.6.0:
-    resolution: {integrity: sha512-oyH1zW18uHXyhCEsUma199r1jwqplPU4AVHw0R22NdIjDtMC4Av595vXolSyCNsOuBFPD08794sq6efnrfpyHg==}
+  /@zag-js/select@0.7.0:
+    resolution: {integrity: sha512-TaseOx7WTQCl2HRaGu6I6tB1VW5PYDb/1F7jh5ATs3f3gZuB9Gu0nvtCW3YHNtUceWLH8W0MakWbIUAqKPxJmw==}
     dependencies:
       '@zag-js/anatomy': 0.1.4
-      '@zag-js/core': 0.5.0
+      '@zag-js/core': 0.7.0
       '@zag-js/dismissable': 0.6.0
       '@zag-js/dom-event': 0.6.0
       '@zag-js/dom-query': 0.1.4
@@ -2881,28 +2798,28 @@ packages:
       '@zag-js/visually-hidden': 0.0.1
     dev: false
 
-  /@zag-js/slider@0.2.17:
-    resolution: {integrity: sha512-jdJjLRdi0j/cHyBnobqgj5dIcM3h9fur3I05SbCxgPg4wx9caE9pX/T75J9p19TutEjFUzw7ZAJ51WyWkb8Mvw==}
+  /@zag-js/slider@0.7.0:
+    resolution: {integrity: sha512-YYbNNFxr5j91L4IfIvbS6JewGoFF0QqbkKRTYeACgg9qUazT1zKHBVtkI4ul8oFyhB7MrUzK0sVjEwDmiaFxpg==}
     dependencies:
       '@zag-js/anatomy': 0.1.4
-      '@zag-js/core': 0.2.12
-      '@zag-js/dom-event': 0.0.1
+      '@zag-js/core': 0.7.0
+      '@zag-js/dom-event': 0.6.0
       '@zag-js/dom-query': 0.1.4
       '@zag-js/element-size': 0.3.2
       '@zag-js/form-utils': 0.2.5
       '@zag-js/numeric-range': 0.1.1
-      '@zag-js/types': 0.3.4
+      '@zag-js/types': 0.5.0
       '@zag-js/utils': 0.3.4
     dev: false
 
-  /@zag-js/solid@0.3.1(solid-js@1.6.12):
-    resolution: {integrity: sha512-rTaAHtDs/jH9/WGuZmPe2KlKJVDl7qWbYuOy0nNOdfJYC51hoINvhsarbyrXqO/dKnbkRPS5en7cT1XnGf4RPQ==}
+  /@zag-js/solid@0.7.0(solid-js@1.6.12):
+    resolution: {integrity: sha512-yM046VdWMaLelMyilKEFiGDDzqCIlnjwasmMNulh3mL4jmV8DhB2EO2HP7vnIUAqOyWn/rLejPxfS6tYr01cZw==}
     peerDependencies:
       solid-js: '>=1.1.3'
     dependencies:
-      '@zag-js/core': 0.2.12
+      '@zag-js/core': 0.7.0
       '@zag-js/store': 0.2.8
-      '@zag-js/types': 0.3.4
+      '@zag-js/types': 0.5.0
       hyphenate-style-name: 1.0.4
       solid-js: 1.6.12
     dev: false
@@ -2913,11 +2830,11 @@ packages:
       proxy-compare: 2.5.0
     dev: false
 
-  /@zag-js/switch@0.5.0:
-    resolution: {integrity: sha512-IdJ9zAuKDc9LByz0eb0pyfbkbw7p9Kbi8BDkyeIOY0+UgIa7RLB+LJ9K5lWqFazbllI4chADq7XxaoSx5pEs9A==}
+  /@zag-js/switch@0.7.0:
+    resolution: {integrity: sha512-XKW761B4MhGQidoOkpE8MZhXBWk+IeYlh886MNC5g2BRWpEsTxDmS1PH5kPsTzEhRz4iJp5bYp/RW9rRzvnhzg==}
     dependencies:
       '@zag-js/anatomy': 0.1.4
-      '@zag-js/core': 0.5.0
+      '@zag-js/core': 0.7.0
       '@zag-js/dom-query': 0.1.4
       '@zag-js/form-utils': 0.2.5
       '@zag-js/types': 0.5.0
@@ -2933,56 +2850,46 @@ packages:
     resolution: {integrity: sha512-l8Im0FkMw63BPXocHRbtFgMIz3SkVpc4HI/S/wV0FqKgWMzOZzd/avHljCNfoXyhjhKauwR5xPivAwsOcye8CA==}
     dev: false
 
-  /@zag-js/toast@0.2.16:
-    resolution: {integrity: sha512-oNRAX96Utm0mWA/sfyk4yCDTjURu8K/14EL5U8AqIyVDJcn93EzGwhHEPFOwfOZnS1BlfePbXsojSRn2u3gryw==}
+  /@zag-js/toast@0.7.0:
+    resolution: {integrity: sha512-iZq9w7uCXDSPzDNtpNpGOVzTRbR51HkAMd7DJi4WHEyJ2Y3dhj6rBWIOS9SkI3tFFh3GrEbzlDZrfy5Mpokh3w==}
     dependencies:
       '@zag-js/anatomy': 0.1.4
-      '@zag-js/core': 0.2.12
-      '@zag-js/dom-event': 0.0.1
+      '@zag-js/core': 0.7.0
+      '@zag-js/dom-event': 0.6.0
       '@zag-js/dom-query': 0.1.4
-      '@zag-js/types': 0.3.4
+      '@zag-js/types': 0.5.0
       '@zag-js/utils': 0.3.4
     dev: false
 
-  /@zag-js/toggle@0.2.15:
-    resolution: {integrity: sha512-LoPAhRICCq5m05lwvxJKZK0N7/6E160UT7KJSQxwCtTg3nw8HZNO4Uup/dTjEFlAu+vwPN46n/B4f4Mf59OZxQ==}
+  /@zag-js/toggle@0.7.0:
+    resolution: {integrity: sha512-69DBPuoeXdqPuOCabLjGpyWuiXWfozwP4X0u5+jHrEQncMlf4ItHCeQSTevySH20PhYhbu/b2H6beJzf3t/HpQ==}
     dependencies:
       '@zag-js/anatomy': 0.1.4
-      '@zag-js/core': 0.2.12
+      '@zag-js/core': 0.7.0
       '@zag-js/dom-query': 0.1.4
-      '@zag-js/types': 0.3.4
+      '@zag-js/types': 0.5.0
       '@zag-js/utils': 0.3.4
     dev: false
 
-  /@zag-js/tooltip@0.2.13:
-    resolution: {integrity: sha512-S6TxqbWYiNeAbz8w5/Sv/iLZmtUt5hI2VFLE0bksAQH+zDnzuOd43UJmEleba2YPbgy3lM5TCbPVHSeBPzOMcw==}
+  /@zag-js/tooltip@0.7.0:
+    resolution: {integrity: sha512-p0sIDL2KFZReD9cxCGa+YaT2ye+QqWNkEgzX0J4sNFxXY7SF09KNLbAzGUVMNr1UykEr9H3vfyg7AkNiRF15ow==}
     dependencies:
       '@zag-js/anatomy': 0.1.4
-      '@zag-js/core': 0.2.10
-      '@zag-js/dom-event': 0.0.1
+      '@zag-js/core': 0.7.0
+      '@zag-js/dom-event': 0.6.0
       '@zag-js/dom-query': 0.1.4
-      '@zag-js/popper': 0.2.5
-      '@zag-js/types': 0.3.4
-      '@zag-js/utils': 0.3.3
+      '@zag-js/popper': 0.2.7
+      '@zag-js/types': 0.5.0
+      '@zag-js/utils': 0.3.4
       '@zag-js/visually-hidden': 0.0.1
     dev: false
 
-  /@zag-js/types@0.3.4:
-    resolution: {integrity: sha512-KkZOMNqFZA0TaVF70O6WIRJPWTcDyRQjhXLDkLVfo99gwJdsC1bMZWfjrCiR8g1CfzvCyGNSWzdArIgzTJVEMA==}
-    dependencies:
-      csstype: 3.1.1
-    dev: false
-
   /@zag-js/types@0.5.0:
     resolution: {integrity: sha512-in0N3xWjg9U4reI+u9yFEa9iP35b1GpEA0PDDJFuJTyramRcAdMRJAqKmhVlzAW8HmgQM84fs5Prr1jQXsxpWA==}
     dependencies:
       csstype: 3.1.1
     dev: false
 
-  /@zag-js/utils@0.3.3:
-    resolution: {integrity: sha512-INNuBcu1+Y5Nxo/PGW51qqkVwBzUCjzO0WjUJDBoqNo8hRs5KsWLcGKdrCayRPaDjNvQetXsUH54LGImUjUHTQ==}
-    dev: false
-
   /@zag-js/utils@0.3.4:
     resolution: {integrity: sha512-Wz6OsvGsteCmu8uGot5H/xj0QpUzXlmAlDw+d2Lnqz1Y3uWcq36r6EPWfH15HXJXdEDuCameAmdOruZ0s/SVjA==}
     dev: false

From 42c373a7b5af9495ec58e4dd31df77a5ceede8d3 Mon Sep 17 00:00:00 2001
From: ddiu8081 <ddiu8081@gmail.com>
Date: Wed, 10 May 2023 03:25:12 +0800
Subject: [PATCH 11/16] fix(ui): enable close-on-outside-click in modals

---
 src/components/ui/Modal.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/components/ui/Modal.tsx b/src/components/ui/Modal.tsx
index dc2d8c9d..6de4862a 100644
--- a/src/components/ui/Modal.tsx
+++ b/src/components/ui/Modal.tsx
@@ -16,9 +16,6 @@ interface Props {
 export default (props: Props) => {
   const [state, send] = useMachine(dialog.machine({
     id: createUniqueId(),
-    // TODO: set it to true will cause the modal closes exceptionally
-    // https://github.com/chakra-ui/zag/issues/596
-    closeOnOutsideClick: false,
   }))
   const api = createMemo(() => dialog.connect(state, send, normalizeProps))
 

From 5691818753e2c26a4e247d5a128403df2a26e38f Mon Sep 17 00:00:00 2001
From: ddiu8081 <ddiu8081@gmail.com>
Date: Wed, 10 May 2023 03:42:56 +0800
Subject: [PATCH 12/16] fix(ui): close menu when click outside

---
 src/components/ui/base/DropdownMenu.tsx | 34 +++++++++++--------------
 1 file changed, 15 insertions(+), 19 deletions(-)

diff --git a/src/components/ui/base/DropdownMenu.tsx b/src/components/ui/base/DropdownMenu.tsx
index 7fef835b..ead55274 100644
--- a/src/components/ui/base/DropdownMenu.tsx
+++ b/src/components/ui/base/DropdownMenu.tsx
@@ -1,6 +1,6 @@
 import * as menu from '@zag-js/menu'
 import { normalizeProps, useMachine } from '@zag-js/solid'
-import { Show, children, createEffect, createMemo, createUniqueId } from 'solid-js'
+import { children, createEffect, createMemo, createUniqueId } from 'solid-js'
 import { Dynamic, For, Portal, spread } from 'solid-js/web'
 import type { JSX, JSXElement } from 'solid-js'
 
@@ -43,27 +43,23 @@ export const DropDownMenu = (props: Props) => {
     return child
   }
 
-  createEffect(() => {
-    // https://github.com/chakra-ui/zag/issues/595
-    api().setPositioning({})
-  })
-
   return (
-    <div id="DropDownMenuRef" class="!outline-none" >
+    <div>
       <Dynamic component={resolvedChild} />
-      <Show when={api().isOpen}>
-        <Portal>
-          <div {...api().positionerProps} z-20>
-            <div {...api().contentProps} class="bg-white dark-bg-zinc-900 flex flex-col space-y-1 rounded-md shadow-md ">
-              <Show when={api().isOpen}>
-                <For each={props.menuList}>
-                  {item => (<div class="px-3 py-2 flex items-center space-x-2 hv-base" {...api().getItemProps({ id: item.id })}>{item.icon && <div class={item.icon} />}<div>{item.label}</div></div>)}
-                </For>
-              </Show>
-            </div>
+      <Portal>
+        <div {...api().positionerProps}>
+          <div {...api().contentProps} class="bg-base rounded-md shadow-md">
+            <For each={props.menuList}>
+              {item => (
+                <div class="px-3 py-2 flex items-center space-x-2 hv-base" {...api().getItemProps({ id: item.id })}>
+                  {item.icon && <div class={item.icon} />}
+                  <div>{item.label}</div>
+                </div>
+              )}
+            </For>
           </div>
-        </Portal>
-      </Show>
+        </div>
+      </Portal>
     </div>
   )
 }

From bc2b7f3279eca57af62c7aab5972d8a29b00b9ba Mon Sep 17 00:00:00 2001
From: ddiu8081 <ddiu8081@gmail.com>
Date: Wed, 10 May 2023 04:17:55 +0800
Subject: [PATCH 13/16] feat(ui): adjust menu ui

---
 package.json                            |  1 -
 pnpm-lock.yaml                          |  9 ---------
 src/components/main/MessageItem.tsx     |  9 ++++-----
 src/components/ui/base/DropdownMenu.tsx | 26 +++++++++++++------------
 src/components/ui/base/Tooltip.tsx      |  2 +-
 unocss.config.ts                        |  2 +-
 6 files changed, 20 insertions(+), 29 deletions(-)

diff --git a/package.json b/package.json
index 0058a9b0..2fc18cd1 100644
--- a/package.json
+++ b/package.json
@@ -59,7 +59,6 @@
   "devDependencies": {
     "@evan-yang/eslint-config": "^1.0.9",
     "@iconify-json/carbon": "^1.1.16",
-    "@iconify-json/ion": "^1.1.10",
     "@iconify-json/simple-icons": "^1.1.48",
     "@types/mapbox__rehype-prism": "^0.8.0",
     "@typescript-eslint/parser": "^5.57.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 76e19e52..a7661ffa 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -129,9 +129,6 @@ devDependencies:
   '@iconify-json/carbon':
     specifier: ^1.1.16
     version: 1.1.16
-  '@iconify-json/ion':
-    specifier: ^1.1.10
-    version: 1.1.10
   '@iconify-json/simple-icons':
     specifier: ^1.1.48
     version: 1.1.48
@@ -1806,12 +1803,6 @@ packages:
       '@iconify/types': 2.0.0
     dev: true
 
-  /@iconify-json/ion@1.1.10:
-    resolution: {integrity: sha512-JH8T6Xzn+JtuONVXnP8ADRHWF9SdTRVrYpl8rnhKvHNE1qDgLGAMbUE645Irtycq6Xxg8VWGwtjEI8HmEKb21Q==}
-    dependencies:
-      '@iconify/types': 2.0.0
-    dev: true
-
   /@iconify-json/simple-icons@1.1.48:
     resolution: {integrity: sha512-haFEPmTPriak+bcmhJawCTW2N2KxcaNNpS3z5hofBUBlCzwRhjM+vU0eImJ6i51HNFlSozt8sxVOZtT7NsWZJg==}
     dependencies:
diff --git a/src/components/main/MessageItem.tsx b/src/components/main/MessageItem.tsx
index 04358273..737d3b3a 100644
--- a/src/components/main/MessageItem.tsx
+++ b/src/components/main/MessageItem.tsx
@@ -74,11 +74,11 @@ export default (props: Props) => {
   }
 
   const [menuList, setMenuList] = createSignal<MenuItem[]>([
-    { id: 'retry', label: 'Retry send', icon: 'i-ion:refresh-outline', role: 'all', action: handleRetryMessageItem },
+    { id: 'retry', label: 'Retry send', icon: 'i-carbon:restart', role: 'all', action: handleRetryMessageItem },
     { id: 'raw', label: 'Show raw code', icon: 'i-carbon-code', role: 'system', action: () => setShowRawCode(!showRawCode()) },
     // TODO: Share message
-    // { id: 'share', label: 'Share message', icon: 'i-ion:ios-share-alt' },
-    { id: 'edit', label: 'Edit message', icon: 'i-ion:md-create', role: 'user', action: handleEditMessageItem },
+    // { id: 'share', label: 'Share message', icon: 'i-carbon:share' },
+    { id: 'edit', label: 'Edit message', icon: 'i-carbon:edit', role: 'user', action: handleEditMessageItem },
     { id: 'copy', label: 'Copy message', icon: 'i-carbon-copy', role: 'all', action: handleCopyMessageItem },
     { id: 'delete', label: 'Delete message', icon: 'i-carbon-trash-can', role: 'all', action: handleDeleteMessageItem },
   ])
@@ -104,13 +104,12 @@ export default (props: Props) => {
       <div class="max-w-base flex gap-4 overflow-hidden">
         <div class={`shrink-0 w-7 h-7 rounded-md op-80 ${roleClass[props.message.role]}`} />
         <div id="menuList-wrapper" class={`sm:hidden block absolute bottom-2 right-4 z-10 op-70 cursor-pointer ${isEditing() && '!hidden'}`}>
-          {/* TODO: hiden when clickOutside */}
           <DropDownMenu menuList={menuList()}>
             <div class="text-xl i-carbon:overflow-menu-horizontal" />
           </DropDownMenu>
         </div>
         <div class={`hidden sm:block absolute right-6 -top-4 ${!props.index && 'top-0'} ${isEditing() && '!hidden'}`}>
-          <div class="op-0 group-hover:op-80 fcc space-x-2 !bg-base px-4 py-1 rounded-xl b border-base transition-opacity duration-400">
+          <div class="op-0 group-hover:op-80 fcc space-x-2 !bg-base px-2 py-1 rounded-md border border-base transition-opacity">
             <For each={menuList()}>
               {item => (
                 <Tooltip tip={item.label} handleChildClick={item.action}>
diff --git a/src/components/ui/base/DropdownMenu.tsx b/src/components/ui/base/DropdownMenu.tsx
index ead55274..4e1eb1ce 100644
--- a/src/components/ui/base/DropdownMenu.tsx
+++ b/src/components/ui/base/DropdownMenu.tsx
@@ -1,6 +1,6 @@
 import * as menu from '@zag-js/menu'
 import { normalizeProps, useMachine } from '@zag-js/solid'
-import { children, createEffect, createMemo, createUniqueId } from 'solid-js'
+import { Show, children, createEffect, createMemo, createUniqueId } from 'solid-js'
 import { Dynamic, For, Portal, spread } from 'solid-js/web'
 import type { JSX, JSXElement } from 'solid-js'
 
@@ -47,18 +47,20 @@ export const DropDownMenu = (props: Props) => {
     <div>
       <Dynamic component={resolvedChild} />
       <Portal>
-        <div {...api().positionerProps}>
-          <div {...api().contentProps} class="bg-base rounded-md shadow-md">
-            <For each={props.menuList}>
-              {item => (
-                <div class="px-3 py-2 flex items-center space-x-2 hv-base" {...api().getItemProps({ id: item.id })}>
-                  {item.icon && <div class={item.icon} />}
-                  <div>{item.label}</div>
-                </div>
-              )}
-            </For>
+        <Show when={props.children}>
+          <div {...api().positionerProps}>
+            <div {...api().contentProps} class="bg-base text-sm border border-base rounded-md outline-none overflow-hidden shadow-md">
+              <For each={props.menuList}>
+                {item => (
+                  <div class="px-3 py-2 flex items-center space-x-2 hv-base" {...api().getItemProps({ id: item.id })}>
+                    {item.icon && <div class={item.icon} />}
+                    <div>{item.label}</div>
+                  </div>
+                )}
+              </For>
+            </div>
           </div>
-        </div>
+        </Show>
       </Portal>
     </div>
   )
diff --git a/src/components/ui/base/Tooltip.tsx b/src/components/ui/base/Tooltip.tsx
index 54cff90a..8f363b31 100644
--- a/src/components/ui/base/Tooltip.tsx
+++ b/src/components/ui/base/Tooltip.tsx
@@ -41,7 +41,7 @@ export const Tooltip = (props: Props) => {
       <Dynamic component={resolvedChild} />
       <Show when={api().isOpen}>
         <div {...api().positionerProps} class="transition-opacity duration-300">
-          <div {...api().contentProps} class="px-2 py-1 text-sm text-white bg-dark-600 dark-bg-zinc-900 rounded-md shadow-sm op-80">{ props.tip }</div>
+          <div {...api().contentProps} class="px-2 py-1 text-xs text-white bg-dark-600 dark-bg-zinc-900 rounded-md shadow-sm op-80">{ props.tip }</div>
         </div>
       </Show>
     </div>
diff --git a/unocss.config.ts b/unocss.config.ts
index 5f76c37f..7fe52918 100644
--- a/unocss.config.ts
+++ b/unocss.config.ts
@@ -63,7 +63,7 @@ export default defineConfig({
     'text-error': 'text-red-700 dark:text-red-400/80',
     'border-error': 'border border-red-700 dark:border-red-400/80',
     'text-info': 'text-gray-400 dark:text-gray-200',
-    'menu-icon': 'cursor-pointer text-xl fg-base hover-text-emerald-600',
+    'menu-icon': 'cursor-pointer text-base fg-base hover-text-emerald-600',
     'fc': 'flex justify-center',
     'fi': 'flex items-center',
     'fcc': 'fc items-center',

From ae35e151b7a50916476f844d4450d31609eb3349 Mon Sep 17 00:00:00 2001
From: ddiu8081 <ddiu8081@gmail.com>
Date: Wed, 10 May 2023 04:27:56 +0800
Subject: [PATCH 14/16] Revert "fix(ui): enable close-on-outside-click in
 modals"

This reverts commit 42c373a7b5af9495ec58e4dd31df77a5ceede8d3.
---
 src/components/ui/Modal.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/ui/Modal.tsx b/src/components/ui/Modal.tsx
index 6de4862a..dc2d8c9d 100644
--- a/src/components/ui/Modal.tsx
+++ b/src/components/ui/Modal.tsx
@@ -16,6 +16,9 @@ interface Props {
 export default (props: Props) => {
   const [state, send] = useMachine(dialog.machine({
     id: createUniqueId(),
+    // TODO: set it to true will cause the modal closes exceptionally
+    // https://github.com/chakra-ui/zag/issues/596
+    closeOnOutsideClick: false,
   }))
   const api = createMemo(() => dialog.connect(state, send, normalizeProps))
 

From 7733a3f4bfa7847c6ddf11828221c5f94c810fae Mon Sep 17 00:00:00 2001
From: yzh990918 <251205668@qq.com>
Date: Wed, 10 May 2023 11:59:24 +0800
Subject: [PATCH 15/16] fix(ui): change switch value to checked

---
 src/components/ui/base/Toggle.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ui/base/Toggle.tsx b/src/components/ui/base/Toggle.tsx
index c9403a41..8fe009da 100644
--- a/src/components/ui/base/Toggle.tsx
+++ b/src/components/ui/base/Toggle.tsx
@@ -15,7 +15,7 @@ export const Toggle = (inputProps: Props) => {
   const [state, send] = useMachine(zagSwitch.machine({
     id: createUniqueId(),
     readOnly: props.readOnly,
-    value: props.value(),
+    checked: props.value(),
     onChange({ checked }) {
       if (hack_FirstTimeRender) {
         hack_FirstTimeRender = false

From 28ce5b425b1ed27696e1be5778af6b3486575a5a Mon Sep 17 00:00:00 2001
From: yzh990918 <251205668@qq.com>
Date: Wed, 10 May 2023 14:16:15 +0800
Subject: [PATCH 16/16] chore: release v1.1.2

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 2fc18cd1..20524408 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "anse",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "packageManager": "pnpm@7.28.0",
   "scripts": {
     "dev": "astro dev",