diff --git a/src/components/chat-toolbar/chat-toolbar.tsx b/src/components/chat-toolbar/chat-toolbar.tsx
index 2d790ef6541bcb66ed61fe388a762de1683f2c38..696fd38fe9b578bfbecf07ba3cd318eff750922e 100644
--- a/src/components/chat-toolbar/chat-toolbar.tsx
+++ b/src/components/chat-toolbar/chat-toolbar.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { h } from 'preact';
-import { useMemo } from 'preact/hooks';
+import { useComputed } from '@preact/signals';
 import { Namespace } from '../../utils';
 import { IChatToolbarItem } from '../../interface';
 import { AiChatController } from '../../controller';
@@ -164,9 +164,9 @@ export const ChatToolbar = (props: ChatToolbarProps) => {
     item.onClick?.(e, controller.context, controller.params, data);
   };
 
-  const isLoadding = useMemo(() => {
-    return data.state === 20 && data.completed !== true;
-  }, [data.state, data.completed]);
+  const isLoadding = useComputed(() => {
+    return data?.state === 20 && data?.completed !== true;
+  });
 
   return (
     <div className={`${ns.b()} ${ns.e(style)} ${className || ''}`}>
@@ -178,7 +178,7 @@ export const ChatToolbar = (props: ChatToolbarProps) => {
             className={`${ns.e('item')} ${ns.is(
               'disabled',
               disabled(item),
-            )} ${ns.is('loading', isLoadding)} ${className || ''}`}
+            )} ${ns.is('loading', isLoadding.value)} ${className || ''}`}
             title={item.title}
             onClick={e => handleItemClick(e, item)}
           >