feat: commands can now be buttons (#1969)

* feat: commands can now be buttons

* fix: light theme hover text color

* fix: wrap button commands if no space left

Author: willydouhard

backend/chainlit/types.py

@@ -257,6 +257,8 @@ class CommandDict(TypedDict):
     description: str
     # The lucide icon name
     icon: str
+    # Display the command as a button in the composer
+    button: Optional[bool]
 
 
 class FeedbackDict(TypedDict):

cypress/e2e/command/main.py

@@ -2,7 +2,7 @@
 
 commands = [
     {"id": "Picture", "icon": "image", "description": "Use DALL-E"},
-    {"id": "Search", "icon": "globe", "description": "Find on the web"},
+    {"id": "Search", "icon": "globe", "description": "Find on the web", "button": True},
     {
         "id": "Canvas",
         "icon": "pen-line",

frontend/src/components/chat/MessageComposer/CommandButtons.tsx

@@ -0,0 +1,67 @@
+import { cn } from '@/lib/utils';
+import { useRecoilValue } from 'recoil';
+
+import { ICommand, commandsState } from '@chainlit/react-client';
+
+import Icon from '@/components/Icon';
+import { Button } from '@/components/ui/button';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+} from '@/components/ui/tooltip';
+
+interface Props {
+  disabled?: boolean;
+  selectedCommandId?: string;
+  onCommandSelect: (command?: ICommand) => void;
+}
+
+export const CommandButtons = ({
+  disabled = false,
+  selectedCommandId,
+  onCommandSelect
+}: Props) => {
+  const commands = useRecoilValue(commandsState);
+  const commandButtons = commands.filter((c) => !!c.button);
+
+  if (!commandButtons.length) return null;
+
+  return (
+    <div className="flex gap-2 ml-1 flex-wrap">
+      <TooltipProvider>
+        {commandButtons.map((command) => (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                key={command.id}
+                id={`command-${command.id}`}
+                variant="ghost"
+                disabled={disabled}
+                className={cn(
+                  'p-2 h-9 text-[13px] font-medium rounded-full',
+                  selectedCommandId === 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={() =>
+                  selectedCommandId === command.id
+                    ? onCommandSelect(undefined)
+                    : onCommandSelect(command)
+                }
+              >
+                <Icon name={command.icon} className="!h-5 !w-5" />
+                {command.id}
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{command.description}</p>
+            </TooltipContent>
+          </Tooltip>
+        ))}
+      </TooltipProvider>
+    </div>
+  );
+};
+
+export default CommandButtons;

frontend/src/components/chat/MessageComposer/CommandButton.tsx frontend/src/components/chat/MessageComposer/CommandPopoverButton.tsx

@@ -28,7 +28,10 @@ interface Props {
   onCommandSelect: (command: ICommand) => void;
 }
 
-export const CommandButton = ({ disabled = false, onCommandSelect }: Props) => {
+export const CommandPopoverButton = ({
+  disabled = false,
+  onCommandSelect
+}: Props) => {
   const commands = useRecoilValue(commandsState);
 
   if (!commands.length) return null;
@@ -89,4 +92,4 @@ export const CommandButton = ({ disabled = false, onCommandSelect }: Props) => {
   );
 };
 
-export default CommandButton;
+export default CommandPopoverButton;

frontend/src/components/chat/MessageComposer/Input.tsx

@@ -159,7 +159,7 @@ const Input = forwardRef<InputMethods, Props>(
         // Find existing command span
         const existingCommandSpan = content.querySelector('.command-span');
 
-        if (selectedCommand) {
+        if (selectedCommand && !selectedCommand.button) {
           // Create new command block
           const newCommandBlock = document.createElement('div');
           newCommandBlock.className =

frontend/src/components/chat/MessageComposer/index.tsx

@@ -19,7 +19,8 @@ import { chatSettingsOpenState } from '@/state/project';
 import { IAttachment, attachmentsState } from 'state/chat';
 
 import { Attachments } from './Attachments';
-import CommandButton from './CommandButton';
+import CommandButtons from './CommandButtons';
+import CommandButton from './CommandPopoverButton';
 import Input, { InputMethods } from './Input';
 import SubmitButton from './SubmitButton';
 import UploadButton from './UploadButton';
@@ -181,6 +182,11 @@ export default function MessageComposer({
             </Button>
           )}
           <VoiceButton disabled={disabled} />
+          <CommandButtons
+            disabled={disabled}
+            selectedCommandId={selectedCommand?.id}
+            onCommandSelect={setSelectedCommand}
+          />
         </div>
         <div className="flex items-center gap-1">
           <SubmitButton

frontend/tsconfig.tsbuildinfo

@@ -2,4 +2,5 @@ export interface ICommand {
   id: string;
   icon: string;
   description: string;
+  button?: boolean;
 }