feat: Allow sending commands from custom elements (#2459)

This PR enhances the functionality of custom elements by adding the
ability to send a command with a user message via the `sendUserMessage`
function.

**Feature Implementation**:
- Modified `frontend/src/components/Elements/CustomElement/index.tsx` to
add an optional command parameter to the `sendUserMessage` function.
- Updated `frontend/src/components/Elements/CustomElement/Renderer.tsx`
as well.

**Testing**:

- Added a new test in `cypress/e2e/custom_element_command` to verify the
feature from the UI to the backend.

---------

Co-authored-by: Josh Hayes <[email protected]>

Author: agutierrezmorag

cypress/e2e/custom_element_command/main.py

@@ -0,0 +1,15 @@
+import chainlit as cl
+
+
+@cl.on_chat_start
+async def on_start():
+    custom_element = cl.CustomElement(name="Commander")
+    await cl.Message(
+        content="This message has a custom element!", elements=[custom_element]
+    ).send()
+
+
+@cl.on_message
+async def on_message(message: cl.Message):
+    if message.command:
+        await cl.Message(content=f"Received command: {message.command}").send()

cypress/e2e/custom_element_command/public/elements/Commander.jsx

@@ -0,0 +1,17 @@
+import { Button } from '@/components/ui/button';
+
+export default function Commander() {
+  return (
+    <div id="custom-commander" className="mt-4 flex flex-col gap-2">
+      <Button
+        id="send"
+        onClick={() =>
+          sendUserMessage('Hello from custom element', 'my_command')
+        }
+      >
+        {' '}
+        Send with command
+      </Button>
+    </div>
+  );
+}

cypress/e2e/custom_element_command/spec.cy.ts

@@ -0,0 +1,12 @@
+describe('Custom Element Command', () => {
+  it('should be able to send a command from a custom element', () => {
+    cy.get('.step').should('have.length', 1);
+    cy.get('.step').eq(0).find('.inline-custom').should('have.length', 1);
+
+    cy.get('#send').click();
+
+    cy.get('.step').should('have.length', 3);
+    cy.get('.step').eq(1).should('contain', 'Hello from custom element');
+    cy.get('.step').eq(2).should('contain', 'Received command: my_command');
+  });
+});

frontend/src/components/Elements/CustomElement/Renderer.tsx

@@ -27,8 +27,8 @@ const createMockAPIs = () => {
       return { success: true };
     },
 
-    sendUserMessage: (message: string): void => {
-      console.log('sendUserMessage called with:', message);
+    sendUserMessage: (message: string, command?: string): void => {
+      console.log('sendUserMessage called with:', message, command);
     }
   };
 };

frontend/src/components/Elements/CustomElement/index.tsx

@@ -66,15 +66,16 @@ const CustomElement = memo(function ({ element }: { element: ICustomElement }) {
   );
 
   const sendUserMessage = useCallback(
-    (message: string) => {
+    (message: string, command?: string) => {
       return sendMessage({
         threadId: '',
         id: uuidv4(),
         name: user?.identifier || 'User',
         type: 'user_message',
         output: message,
         createdAt: new Date().toISOString(),
-        metadata: { location: window.location.href }
+        metadata: { location: window.location.href },
+        command
       });
     },
     [sendMessage, user]