add asdaction

Author: xiaowei.mao

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

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} />
       ))}

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,31 +8,68 @@ 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 () => {
+    // 处理命令激活
+    if (starter.commands && starter.commands.length > 0) {
+      const commandToActivate = commands.find(cmd => cmd.id === starter.commands![0]);
+      if (commandToActivate) {
+        setSelectedCommand(commandToActivate);
+      }
+    }
+
+    // 处理可切换命令激活
+    if (starter.toggle_commands && starter.toggle_commands.length > 0) {
+      const newToggleables: IToggleable[] = [...toggleables];
+      
+      // 移除所有非持久的toggleables
+      const persistentOnly = newToggleables.filter(t => t.persistent);
+      
+      // 添加starter中指定的toggle_commands
+      starter.toggle_commands.forEach(cmdId => {
+        const toggleCmd = toggleCommands.find(cmd => cmd.id === cmdId);
+        if (toggleCmd) {
+          persistentOnly.push({
+            id: toggleCmd.id,
+            active: true,
+            persistent: toggleCmd.persistent
+          });
+        }
+      });
+      
+      setToggleables(persistentOnly);
+    }
+
     const message: IStep = {
       threadId: '',
       id: uuidv4(),
-      command: selectedCommand?.id,
+      command: starter.commands && starter.commands.length > 0 ? starter.commands[0] : selectedCommand?.id,
+      toggleables: starter.toggle_commands || [],
       name: user?.identifier || 'User',
       type: 'user_message',
       output: starter.message,
@@ -41,7 +78,15 @@ export default function Starter({ starter }: StarterProps) {
     };
 
     sendMessage(message, []);
-  }, [user, selectedCommand, sendMessage, starter]);
+  }, [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 +98,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}

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 {