feat: add function on window to toggle the copilot (#1645)

Chainlit · Jan 8, 2025 · bb09d34 · bb09d34
1 parent 990e24a
commit bb09d34
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 2 deletions.
diff --git a/libs/copilot/index.tsx b/libs/copilot/index.tsx
@@ -25,6 +25,7 @@ declare global {
     };
     mountChainlitWidget: (config: IWidgetConfig) => void;
     unmountChainlitWidget: () => void;
+    toggleChainlitCopilot: () => void;
     sendChainlitMessage: (message: IStep) => void;
   }
 }

diff --git a/libs/copilot/src/app.tsx b/libs/copilot/src/app.tsx
@@ -15,6 +15,7 @@ interface Props {
 declare global {
   interface Window {
     cl_shadowRootElement: HTMLDivElement;
+    toggleChainlitCopilot: () => void;
     theme?: {
       light: Record<string, string>;
       dark: Record<string, string>;

diff --git a/libs/copilot/src/widget.tsx b/libs/copilot/src/widget.tsx
@@ -1,6 +1,6 @@
 import { cn } from '@/lib/utils';
 import { MessageCircle, X } from 'lucide-react';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import Alert from '@chainlit/app/src/components/Alert';
 import { Button } from '@chainlit/app/src/components/ui/button';
@@ -24,10 +24,18 @@ const Widget = ({ config, error }: Props) => {
   const [expanded, setExpanded] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
 
+  useEffect(() => {
+    window.toggleChainlitCopilot = () => setIsOpen((prev) => !prev);
+
+    return () => {
+      window.toggleChainlitCopilot = () => console.error('Widget not mounted.');
+    };
+  }, []);
+
   const customClassName = config?.button?.className || '';
 
   return (
-    <Popover onOpenChange={setIsOpen}>
+    <Popover open={isOpen} onOpenChange={setIsOpen}>
       <PopoverTrigger asChild>
         <Button
           id="chainlit-copilot-button"