AI Assistant Sidebar — Free HTML CSS JS Snippet

Because of what happens to the content beside it. transform moves an element visually but leaves its layout box in place — the document area would keep its squeezed width with a 320px hole where the panel was. Negative margin actually removes the panel's footprint from the flex row, so the transition animates a real reflow: the main content smoothly expands to fill the reclaimed space, which is the defining behaviour of a docked panel (VS Code's sidebar, Notion's AI panel). The cost is that margin transitions run on the main thread and trigger layout each frame — fine for one panel toggled occasionally, not for something animating continuously. The media-query fallback to position: fixed on small screens exists because reflowing content in a 375px viewport would compress it unusably; there the panel becomes an overlay and translateX would be an equally valid mechanic.

Send the app state with every question. Implement a getAppContext() that returns what the user can see: for a document view, the document text (or its visible section); for a table, the selected rows serialised; for a form, the field values. Then POST { question, context, history } to your endpoint and prompt the model with the context prepended ("You are assisting inside [app]. The user is viewing: …"). Three practical rules: cap context size (send the relevant section, not the whole database — retrieval if needed), refresh it per question rather than per session (the user navigates), and show the user what was shared (a small "Using: Q3 Revenue Report" line above the reply builds trust and debuggability). This context plumbing — not the chat UI — is what differentiates a sidebar copilot from a generic chatbot, and it is why the integration point in this snippet is a single ask() function where the context injection has an obvious home.

Key the thread to its context. Store messages as [{ role, text }] in sessionStorage under a key like ai-thread:<documentId> — navigating between records then gives each its own conversation, which matches user expectations (questions about invoice #1042 make no sense on invoice #1043). Restore on mount by replaying addMsg() without animation. Use sessionStorage rather than localStorage for the default (conversations about work-in-progress usually should not outlive the tab), promote to server-side persistence when you add a history UI, and always keep a "clear conversation" affordance in the header. One caution: if replies contain generated content the user may rely on (drafted emails), persist before navigation, not on an interval — losing a draft to a route change is the most common complaint against sidebar assistants.

Tailwind: the panel is w-80 shrink-0 flex flex-col bg-slate-900 border-l border-slate-700 transition-[margin] duration-300 with the closed state as -mr-80 via a data-attribute variant (data-[closed]:-mr-80); the thread is flex-1 overflow-y-auto p-4 flex flex-col gap-3; bubbles are self-end bg-indigo-500 rounded-2xl rounded-br-sm px-3 py-2 and self-start bg-slate-800 border border-slate-700 rounded-2xl rounded-bl-sm; the launcher is fixed bottom-5 right-5 size-12 rounded-full. In React, hold open and messages in state, render the thread from the array, and do the streaming into a ref'd element (or via the Vercel AI SDK's useChat, which replaces the whole demo brain); auto-scroll in a useEffect on messages.length. In Angular, a signal for open bound to [class.closed], @for over a messages signal, and the stream appended via Renderer2 or by updating a WritableSignal<string> per streaming message — with the context provider injected as a service so any route can supply getAppContext().