admin/39950-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make AI governance copilot expandable

Browse Source
This commit is contained in:
Flatlogic Bot 2026-05-11 15:29:05 +00:00
parent 718b53b2a9
commit 448566bb34
1 changed files with 25 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
frontend/src/components/AiGovernanceCopilot.tsx
View File

@ -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>