mirror of
https://github.com/CopilotKit/CopilotKit.git
synced 2026-09-14 16:26:20 +08:00
Benjamin Taylor
07da747088
Replaces the permanent 420px chat column with a collapsible slide-over panel (toggle FAB + close button), mirroring React's CopilotSidebar. The chat now OVERLAYS rather than reserving a grid track, so the threads drawer's desktop push no longer smushes the content and the medium-width layout has room. - app.ts: 2-track grid (drawer + content); fixed .chat slide-over + open FAB; chatOpen signal (defaults open, like React defaultOpen). Theme var hoisted to the component HOST so the weather card (now in the fixed chat) still inherits it. - styles.css + web-inspector.ts: move the dev inspector FAB to bottom-left; its default top-right anchor (max z-index, transform-positioned) sat over the chat's close button and ate the click. Verified live (real Gemini key): open/close/reopen slide-over; content 880px at 1200w (no smush); 0 horizontal overflow + no clipping at 580/1050/1200; inspector clears both the close button and open-FAB; 'set theme to teal, then weather in Paris' recolors the panel AND renders a teal-themed weather card in the floating chat.
40 lines
1.1 KiB
CSS
40 lines
1.1 KiB
CSS
@import "@copilotkit/angular/styles.css";
|
|
|
|
/*
|
|
Global border-box reset. Without it, elements default to content-box, so a
|
|
width:100% element with padding (e.g. the proverbs card) overflows its parent
|
|
and gets clipped on narrow screens. React/Next examples get this from their
|
|
Tailwind preflight; the Angular app needs it explicitly.
|
|
*/
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
height: 100%;
|
|
margin: 0;
|
|
}
|
|
|
|
/*
|
|
Move the dev web-inspector's FAB to the bottom-left. Its default top-right
|
|
anchor sits on top of the floating chat panel's top-right close button (the
|
|
inspector uses a max z-index), intercepting the click. Bottom-left clears both
|
|
the close button (top-right) and the open-chat FAB (bottom-right).
|
|
*/
|
|
cpk-web-inspector {
|
|
/* The inspector is draggable and positions its FAB with an inline transform
|
|
(defaulting top-right); neutralize it so the corner below takes effect. */
|
|
transform: none !important;
|
|
top: auto !important;
|
|
bottom: 1rem !important;
|
|
left: 1rem !important;
|
|
right: auto !important;
|
|
}
|
|
|
|
body {
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
}
|