fix: resolve toggle_commands state handling in starters

xiaowei.mao · xiaowei.mao · commit e815fb05be30 · 2025-04-23T10:35:55.000+08:00
Fixed the following issues:
1. When starter.toggle_commands is an empty array, all toggleables (including persistent ones)
   are now set to inactive, making behavior consistent with commands handling
2. Fixed UI state and backend message synchronization issues, ensuring toggleables sent to
   backend match UI display
3. Improved state update logic, distinguishing between empty array and undefined toggle_commands
4. Added detailed logging for debugging and tracking state changes

Changes:
- Optimized toggle_commands handling logic in Starter.tsx
- Enhanced state monitoring in ToggleableButtons component
- Added debug logs to track toggleables state changes
- Fixed synchronization issues between state updates and message sending
```
diff --git a/backend/chainlit/types.py b/backend/chainlit/types.py
@@ -257,6 +257,8 @@ class Starter(DataClassJsonMixin):
     label: str
     message: str
     icon: Optional[str] = None
+    commands: Optional[List[str]] = None
+    toggle_commands: Optional[List[str]] = None
 
 
 @dataclass
diff --git a/frontend/src/components/chat/MessageComposer/ToggleableButtons.tsx b/frontend/src/components/chat/MessageComposer/ToggleableButtons.tsx
@@ -1,5 +1,6 @@
 import { cn } from '@/lib/utils';
 import { useRecoilState, useRecoilValue } from 'recoil';
+import { useEffect } from 'react';
 
 import { IToggleCommand, toggleCommandsState } from '@chainlit/react-client';
 
@@ -21,6 +22,17 @@ export const ToggleableButtons = ({ disabled = false }: Props) => {
   const toggleCommands = useRecoilValue(toggleCommandsState);
   const [toggleables, setToggleables] = useRecoilState(toggleableStates);
   
+  // 添加useEffect以监听toggleables的变化
+  useEffect(() => {
+    console.log("ToggleableButtons: toggleables状态变化:", toggleables);
+    
+    // 重新渲染每个按钮以确保UI状态一致
+    toggleCommands.forEach(cmd => {
+      const isToggleActive = toggleables.some(t => t.id === cmd.id && t.active);
+      console.log(`Toggle命令 ${cmd.id} 激活状态更新为:`, isToggleActive);
+    });
+  }, [toggleables, toggleCommands]);
+  
   if (!toggleCommands.length) return null;
   
   const handleToggle = (command: IToggleCommand) => {
@@ -29,18 +41,21 @@ export const ToggleableButtons = ({ disabled = false }: Props) => {
     
     if (index === -1) {
       // 不存在则添加，默认为激活状态
-      setToggleables([...toggleables, { 
+      const newToggleables = [...toggleables, { 
         id: command.id, 
         active: true,
         persistent: command.persistent
-      }]);
+      }];
+      console.log("添加新的toggle:", newToggleables);
+      setToggleables(newToggleables);
     } else {
       // 存在则切换状态
       const newToggleables = [...toggleables];
       newToggleables[index] = { 
         ...newToggleables[index], 
         active: !newToggleables[index].active 
       };
+      console.log("切换toggle状态:", newToggleables);
       setToggleables(newToggleables);
     }
   };
@@ -51,32 +66,41 @@ export const ToggleableButtons = ({ disabled = false }: Props) => {
     return toggleable ? toggleable.active : false;
   };
 
+  // DEBUG: 添加控制台日志以查看toggleables状态
+  console.log("ToggleableButtons渲染时的toggleables状态:", toggleables);
+
   return (
     <div className="flex gap-2 ml-1 flex-wrap">
       <TooltipProvider>
-        {toggleCommands.map((command) => (
-          <Tooltip key={command.id}>
-            <TooltipTrigger asChild>
-              <Button
-                id={`toggleable-${command.id}`}
-                variant="ghost"
-                disabled={disabled}
-                className={cn(
-                  'p-2 h-9 text-[13px] font-medium rounded-full',
-                  isActive(command.id) &&
-                    'border-transparent text-[#08f] hover:text-[#08f] bg-[#DAEEFF] hover:bg-[#BDDCF4] dark:bg-[#2A4A6D] dark:text-[#48AAFF] dark:hover:bg-[#1A416A]'
-                )}
-                onClick={() => handleToggle(command)}
-              >
-                <Icon name={command.icon} className="!h-5 !w-5" />
-                {command.id}
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>
-              <p>{command.description}</p>
-            </TooltipContent>
-          </Tooltip>
-        ))}
+        {toggleCommands.map((command) => {
+          const active = isActive(command.id);
+          // DEBUG: 输出每个命令的状态
+          console.log(`Toggle命令 ${command.id} 激活状态:`, active);
+          
+          return (
+            <Tooltip key={command.id}>
+              <TooltipTrigger asChild>
+                <Button
+                  id={`toggleable-${command.id}`}
+                  variant="ghost"
+                  disabled={disabled}
+                  className={cn(
+                    'p-2 h-9 text-[13px] font-medium rounded-full',
+                    active &&
+                      'border-transparent text-[#08f] hover:text-[#08f] bg-[#DAEEFF] hover:bg-[#BDDCF4] dark:bg-[#2A4A6D] dark:text-[#48AAFF] dark:hover:bg-[#1A416A]'
+                  )}
+                  onClick={() => handleToggle(command)}
+                >
+                  <Icon name={command.icon} className="!h-5 !w-5" />
+                  {command.id}
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>{command.description}</p>
+              </TooltipContent>
+            </Tooltip>
+          );
+        })}
       </TooltipProvider>
     </div>
   );
diff --git a/frontend/src/components/chat/MessageComposer/index.tsx b/frontend/src/components/chat/MessageComposer/index.tsx
@@ -64,9 +64,14 @@ export default function MessageComposer({
   
   // 在新对话开始时重置toggleables
   useEffect(() => {
+    console.log("MessageComposer useEffect 执行，重置非持久化toggleables");
     // 只重置非persistent的toggles
-    setToggleables(prevToggles => prevToggles.filter(toggle => toggle.persistent));
-  }, []);
+    setToggleables(prevToggles => {
+      const persistentOnly = prevToggles.filter(toggle => toggle.persistent);
+      console.log("保留的持久化toggleables:", persistentOnly);
+      return persistentOnly;
+    });
+  }, []); // 空依赖数组，只在组件挂载时执行一次
 
   const onPaste = useCallback((event: ClipboardEvent) => {
     if (event.clipboardData && event.clipboardData.items) {
@@ -144,7 +149,12 @@ export default function MessageComposer({
     } else {
       onSubmit(value, attachments, selectedCommand?.id, toggleables);
       // 重置非persistent的toggles
-      setToggleables(prevToggles => prevToggles.filter(toggle => toggle.persistent));
+      console.log("提交消息后重置非持久化toggleables");
+      setToggleables(prevToggles => {
+        const persistentOnly = prevToggles.filter(toggle => toggle.persistent);
+        console.log("保留的持久化toggleables:", persistentOnly);
+        return persistentOnly;
+      });
     }
     setAttachments([]);
     inputRef.current?.reset();
diff --git a/frontend/src/components/chat/Messages/Message/AskActionButtons.tsx b/frontend/src/components/chat/Messages/Message/AskActionButtons.tsx
@@ -11,6 +11,7 @@ import {
   TooltipProvider,
   TooltipTrigger
 } from '@/components/ui/tooltip';
+import { cn } from '@/lib/utils';
 
 const AskActionButton = ({ action }: { action: IAction }) => {
   const { loading, askUser } = useContext(MessageContext);
@@ -28,14 +29,30 @@ const AskActionButton = ({ action }: { action: IAction }) => {
     return null;
   }, [action]);
 
+  // 创建自定义样式对象
+  const customStyle = {};
+  if (action.bgColor) {
+    customStyle['backgroundColor'] = action.bgColor;
+  }
+  if (action.textColor) {
+    customStyle['color'] = action.textColor;
+  }
+
   const button = (
     <Button
-      className="break-words h-auto min-h-10 whitespace-normal"
+      className={cn(
+        "break-words h-auto min-h-10 whitespace-normal",
+        action.fullWidth ? "w-full justify-start" : "",
+        action.className,
+        icon ? "gap-2" : ""
+      )}
       id={action.id}
       onClick={() => {
         askUser?.callback(action);
       }}
-      variant="outline"
+      variant={action.variant as any || "outline"}
+      size={action.size as any || "default"}
+      style={customStyle}
       disabled={loading}
     >
       {icon}
@@ -76,8 +93,14 @@ const AskActionButtons = ({
 
   if (!belongsToMessage || !isAskingAction || !actions.length) return null;
 
+  // 检查是否有任何按钮设置了fullWidth属性
+  const hasFullWidthButtons = filteredActions.some(a => a.fullWidth);
+
   return (
-    <div className="flex items-center gap-1 flex-wrap">
+    <div className={cn(
+      "flex gap-1",
+      hasFullWidthButtons ? "flex-col w-full" : "items-center flex-wrap"
+    )}>
       {filteredActions.map((a) => (
         <AskActionButton key={a.id} action={a} />
       ))}
diff --git a/frontend/src/components/chat/Starter.tsx b/frontend/src/components/chat/Starter.tsx
@@ -1,5 +1,5 @@
 import { useCallback, useContext } from 'react';
-import { useRecoilValue } from 'recoil';
+import { useRecoilState, useRecoilValue } from 'recoil';
 import { v4 as uuidv4 } from 'uuid';
 
 import {
@@ -8,40 +8,125 @@ import {
   IStep,
   useAuth,
   useChatData,
-  useChatInteract
+  useChatInteract,
+  commandsState,
+  toggleCommandsState
 } from '@chainlit/react-client';
 
+import Icon from '@/components/Icon';
 import { Button } from '@/components/ui/button';
 
-import { persistentCommandState } from '@/state/chat';
+import { IToggleable, persistentCommandState, toggleableStates } from '@/state/chat';
 
 interface StarterProps {
   starter: IStarter;
 }
 
 export default function Starter({ starter }: StarterProps) {
   const apiClient = useContext(ChainlitContext);
-  const selectedCommand = useRecoilValue(persistentCommandState);
+  const [selectedCommand, setSelectedCommand] = useRecoilState(persistentCommandState);
+  const [toggleables, setToggleables] = useRecoilState(toggleableStates);
   const { sendMessage } = useChatInteract();
   const { loading, connected } = useChatData();
   const { user } = useAuth();
+  const commands = useRecoilValue(commandsState);
+  const toggleCommands = useRecoilValue(toggleCommandsState);
 
   const disabled = loading || !connected;
 
   const onSubmit = useCallback(async () => {
+    console.log("点击Starter，当前toggle状态:", toggleables);
+    
+    // 处理命令激活
+    if (starter.commands && starter.commands.length > 0) {
+      const commandToActivate = commands.find(cmd => cmd.id === starter.commands![0]);
+      if (commandToActivate) {
+        setSelectedCommand(commandToActivate);
+      }
+    } else {
+      // 如果starter没有指定commands，则清除当前选中的command
+      setSelectedCommand(undefined);
+    }
+
+    // 处理可切换命令激活
+    let newToggleables: IToggleable[] = [];
+
+    // 根据starter.toggle_commands处理toggleables
+    if (starter.toggle_commands) {
+      if (starter.toggle_commands.length > 0) {
+        // 如果有指定的toggle_commands，先保留所有持久化的toggleables
+        const persistentToggles = toggleables.filter(t => t.persistent);
+        newToggleables.push(...persistentToggles);
+        
+        // 添加starter中指定的toggle_commands，确保它们被激活
+        starter.toggle_commands.forEach(cmdId => {
+          const toggleCmd = toggleCommands.find(cmd => cmd.id === cmdId);
+          if (toggleCmd) {
+            // 检查是否已经存在于新的toggleables中
+            const existingIndex = newToggleables.findIndex(t => t.id === cmdId);
+            
+            if (existingIndex >= 0) {
+              // 如果已存在，确保它是激活状态
+              newToggleables[existingIndex] = {
+                ...newToggleables[existingIndex],
+                active: true
+              };
+            } else {
+              // 如果不存在，添加新的toggleable
+              newToggleables.push({
+                id: toggleCmd.id,
+                active: true,
+                persistent: toggleCmd.persistent
+              });
+            }
+          }
+        });
+      } else {
+        // 如果toggle_commands是空数组，保留所有toggleables但设置为非激活状态
+        newToggleables = toggleables.map(toggle => ({
+          ...toggle,
+          active: false
+        }));
+        console.log("重置所有toggleables为非激活状态:", newToggleables);
+      }
+    } else {
+      // 如果toggle_commands不存在，保留所有持久化的toggleables
+      const persistentToggles = toggleables.filter(t => t.persistent);
+      newToggleables.push(...persistentToggles);
+    }
+
+    console.log("即将设置的新toggle状态:", newToggleables);
+    
+    // 直接构造消息对象并发送，不等待状态更新
     const message: IStep = {
       threadId: '',
       id: uuidv4(),
-      command: selectedCommand?.id,
+      command: starter.commands && starter.commands.length > 0 ? starter.commands[0] : undefined,
+      toggleables: starter.toggle_commands && starter.toggle_commands.length > 0 
+        ? starter.toggle_commands 
+        : [],
       name: user?.identifier || 'User',
       type: 'user_message',
       output: starter.message,
       createdAt: new Date().toISOString(),
       metadata: { location: window.location.href }
     };
 
+    // 发送消息
     sendMessage(message, []);
-  }, [user, selectedCommand, sendMessage, starter]);
+    
+    // 然后更新UI状态，这样不会影响消息发送
+    setToggleables(newToggleables);
+    
+  }, [user, selectedCommand, toggleables, commands, toggleCommands, sendMessage, starter, setSelectedCommand, setToggleables]);
+
+  // 检查是否是图片URL
+  const isImageUrl = (url: string): boolean => {
+    return url.startsWith('http') || 
+           url.startsWith('/') || 
+           url.startsWith('./') || 
+           url.startsWith('../');
+  };
 
   return (
     <Button
@@ -53,15 +138,19 @@ export default function Starter({ starter }: StarterProps) {
     >
       <div className="flex gap-2">
         {starter.icon ? (
-          <img
-            className="h-5 w-5 rounded-md"
-            src={
-              starter.icon?.startsWith('/public')
-                ? apiClient.buildEndpoint(starter.icon)
-                : starter.icon
-            }
-            alt={starter.label}
-          />
+          isImageUrl(starter.icon) ? (
+            <img
+              className="h-5 w-5 rounded-md"
+              src={
+                starter.icon?.startsWith('/public')
+                  ? apiClient.buildEndpoint(starter.icon)
+                  : starter.icon
+              }
+              alt={starter.label}
+            />
+          ) : (
+            <Icon name={starter.icon} className="!h-5 !w-5" />
+          )
         ) : null}
         <p className="text-sm text-muted-foreground truncate">
           {starter.label}
diff --git a/libs/react-client/src/types/config.ts b/libs/react-client/src/types/config.ts
@@ -2,6 +2,8 @@ export interface IStarter {
   label: string;
   message: string;
   icon?: string;
+  commands?: string[];
+  toggle_commands?: string[];
 }
 
 export interface ChatProfile {

Original file line number	Diff line number	Diff line change
`@@ -2,6 +2,8 @@ export interface IStarter {`
`2`	`2`	`label: string;`
`3`	`3`	`message: string;`
`4`	`4`	`icon?: string;`
	`5`	`+ commands?: string[];`
	`6`	`+ toggle_commands?: string[];`
`5`	`7`	`}`
`6`	`8`
`7`	`9`	`export interface ChatProfile {`