From 448566bb34e96c75680596a6a16ae3cc25ff54a4 Mon Sep 17 00:00:00 2001
From: Flatlogic Bot <support@flatlogic.com>
Date: Mon, 11 May 2026 15:29:05 +0000
Subject: [PATCH] Make AI governance copilot expandable

---
 .../src/components/AiGovernanceCopilot.tsx    | 36 +++++++++++++------
 1 file changed, 25 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/AiGovernanceCopilot.tsx b/frontend/src/components/AiGovernanceCopilot.tsx
index 80cdffa..bf14ed6 100644
--- a/frontend/src/components/AiGovernanceCopilot.tsx
+++ b/frontend/src/components/AiGovernanceCopilot.tsx
@@ -241,6 +241,7 @@ export default function AiGovernanceCopilot() {
   const currentUser = useAppSelector((state) => state.auth.currentUser)
   const isAskingResponse = useAppSelector((state) => state.openAi.isAskingResponse)
   const [isOpen, setIsOpen] = useState(false)
+  const [isExpanded, setIsExpanded] = useState(false)
   const [input, setInput] = useState('')
   const [messages, setMessages] = useState<CopilotMessage[]>([welcomeMessage])
   const [localError, setLocalError] = useState('')
@@ -248,6 +249,9 @@ export default function AiGovernanceCopilot() {
 
   const page = useMemo(() => findPageContext(router.pathname), [router.pathname])
   const userLabel = currentUser?.email || currentUser?.firstName || 'authenticated user'
+  const panelSizeClass = isExpanded
+    ? 'fixed bottom-4 right-4 h-[calc(100vh-2rem)] w-[920px] max-w-[calc(100vw-2rem)] max-sm:bottom-3 max-sm:right-3 max-sm:h-[calc(100vh-1.5rem)] max-sm:w-[calc(100vw-1.5rem)]'
+    : 'fixed bottom-5 right-5 h-[720px] max-h-[calc(100vh-4rem)] w-[560px] max-w-[calc(100vw-2rem)] max-sm:bottom-3 max-sm:right-3 max-sm:h-[calc(100vh-1.5rem)] max-sm:w-[calc(100vw-1.5rem)]'
 
   useEffect(() => {
     if (!isOpen) {
@@ -353,7 +357,7 @@ export default function AiGovernanceCopilot() {
 
   return (
     <section
-      className="fixed bottom-5 right-5 z-50 flex h-[620px] max-h-[calc(100vh-5rem)] w-[420px] max-w-[calc(100vw-2rem)] flex-col overflow-hidden rounded-xl border border-[#D8CBB9] bg-[#FBFAF7] shadow-2xl shadow-[#0E1A2B]/25 dark:border-[#273447] dark:bg-[#0B1424] dark:shadow-black/50 max-sm:bottom-3 max-sm:right-3 max-sm:h-[calc(100vh-1.5rem)] max-sm:w-[calc(100vw-1.5rem)]"
+      className={`${panelSizeClass} z-50 flex flex-col overflow-hidden rounded-xl border border-[#D8CBB9] bg-[#FBFAF7] shadow-2xl shadow-[#0E1A2B]/25 transition-all duration-200 dark:border-[#273447] dark:bg-[#0B1424] dark:shadow-black/50`}
       aria-label="AI Governance Copilot"
     >
       <header className="border-b border-[#E5DDCF] bg-[#0E1A2B] px-4 py-4 text-white dark:border-[#273447]">
@@ -368,19 +372,29 @@ export default function AiGovernanceCopilot() {
               <p className="mt-1 text-xs leading-5 text-slate-300">Context: {page.title}</p>
             </div>
           </div>
-          <button
-            type="button"
-            onClick={() => setIsOpen(false)}
-            className="flex h-9 w-9 shrink-0 items-center justify-center rounded-md border border-white/15 text-lg font-semibold text-slate-200 transition hover:border-[#D8B75E] hover:text-white focus:outline-none focus:ring-2 focus:ring-[#D8B75E]"
-            aria-label="Close AI Governance Copilot"
-          >
-            X
-          </button>
+          <div className="flex shrink-0 gap-2">
+            <button
+              type="button"
+              onClick={() => setIsExpanded((currentValue) => !currentValue)}
+              className="flex h-9 min-w-[4.25rem] items-center justify-center rounded-md border border-white/15 px-3 text-sm font-semibold text-slate-200 transition hover:border-[#D8B75E] hover:text-white focus:outline-none focus:ring-2 focus:ring-[#D8B75E]"
+              aria-label={isExpanded ? 'Reduce AI Governance Copilot' : 'Expand AI Governance Copilot'}
+            >
+              {isExpanded ? 'Min' : 'Max'}
+            </button>
+            <button
+              type="button"
+              onClick={() => setIsOpen(false)}
+              className="flex h-9 w-9 items-center justify-center rounded-md border border-white/15 text-lg font-semibold text-slate-200 transition hover:border-[#D8B75E] hover:text-white focus:outline-none focus:ring-2 focus:ring-[#D8B75E]"
+              aria-label="Close AI Governance Copilot"
+            >
+              X
+            </button>
+          </div>
         </div>
       </header>
 
-      <div className="border-b border-[#E5DDCF] bg-[#F6F3EC] px-4 py-3 dark:border-[#273447] dark:bg-[#111C2E]">
-        <div className="rounded-lg border border-[#E2D7C4] bg-white p-3 dark:border-[#273447] dark:bg-[#0B1424]">
+      <div className="border-b border-[#E5DDCF] bg-[#F6F3EC] px-4 py-2.5 dark:border-[#273447] dark:bg-[#111C2E]">
+        <div className="rounded-lg border border-[#E2D7C4] bg-white px-3 py-2.5 dark:border-[#273447] dark:bg-[#0B1424]">
           <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-[#7A5B13] dark:text-[#D8B75E]">Workspace context</p>
           <p className="mt-1 text-sm leading-5 text-[#374151] dark:text-slate-300">{page.focus}</p>
         </div>