From 3911b2f75c4a7516589862242fe9ffe59286ec95 Mon Sep 17 00:00:00 2001
From: Willy Douhard <willy.douhard@gmail.com>
Date: Wed, 8 Jan 2025 10:29:42 +0100
Subject: [PATCH] feat: add function on window to toggle the copilot

---
 libs/copilot/index.tsx      |  1 +
 libs/copilot/src/app.tsx    |  1 +
 libs/copilot/src/widget.tsx | 12 ++++++++++--
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/libs/copilot/index.tsx b/libs/copilot/index.tsx
index 1e8b61cf85..a2fe060d3f 100644
--- 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
index 8f5ea60fc1..39936a4fdd 100644
--- 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
index 885a90b20b..aad6c5ced2 100644
--- 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"