Vue Component Library

Appearance

Chat Agent Chat Components ​

The chat component suite provides the structural pieces you need to ship a fully interactive AI assistant interface: a floating launcher, draggable conversation window, streaming conversation view, prompt box with uploads, attachment gallery, and full screen image preview.

Unlike the Markdown suite (which focuses on message rendering), these components orchestrate the entire end-to-end chat experience by coordinating with useChatAgentStore for state, handling uploads, and exposing ergonomic hooks for play/pause or “ask about this” interactions.

ChatViewWrapper (Entry Point) ​

  • Composes MainAIChatView, PrimaryInput, UploadedFilesSection, and FullScreenImageViewer.
  • Converts pasted/dropped files into Base64 previews via convertAndResizeImageToBase64.
  • Calls startAiAgentResponseStreaming with the current conversation id, typed message, referenced selection, and uploaded files.
  • Works standalone or inside DraggableChatBoxWrapper.

Installation ​

These components rely on the Markdown renderers for streaming messages, so install the required libraries in your host app:

bash
npm install markdown-it@^14 dompurify@^3.2.6 highlight.js@^11.11.1

Architecture Overview ​

  • Global store – useChatAgentStore (Pinia) owns conversations, streaming state, uploaded file metadata, and visibility flags.
  • Entry point – ChatViewWrapper composes the chat message list, prompt input, attachments, and viewer logic. Drop it anywhere you need the full assistant surface.
  • Floating shell – DraggableChatBoxWrapper renders the floating AI avatar. Clicking morphs into the draggable chat window powered by ChatViewWrapper.
  • Chat window – DraggableChatBox hosts ChatViewWrapper, which itself composes MainAIChatView, PrimaryInput, UploadedFilesSection, and FullScreenImageViewer.
  • Visual polish – RotationAnimation powers the hero avatar and breathing gradients; OTooltip enables “Ask follow-up” selection controls.

All components are plain Vue SFCs, so you can swap any layer (e.g., keep PrimaryInput but replace the window shell) as needed.

Component Highlights ​

Markdown Renderers ​

  • CustomMarkdown handles assistant responses with syntax highlighting, image zoom, color swatches, and copy buttons.
  • SentMessageMarkdown renders outbound user text with DOMPurify sanitization and custom list formatting.
  • Both live inside src/components/ChatAgentComponents/MarkdownComponent/ and are leveraged by MainAIChatView.

DraggableChatBoxWrapper ​

  • Fixed-position launcher with animated avatar (uses RotationAnimation).
  • Fades the icon out when clicked and toggles isChatBoxVisible in the store.
  • Re-mounts DraggableChatBox when the user closes the window.

DraggableChatBox ​

  • Provides drag-and-drop interactions with inertia and bounds clamping.
  • Header embeds restart + minimize controls with OTooltip hints.
  • Persists the last dragged position so reopening keeps the same coordinates.

MainAIChatView ​

  • Streams chats from conversationList, shows typing/“thinking” timers, and renders assistant output through CustomMarkdown while user entries go through SentMessageMarkdown.
  • Displays generated images inline and raises askSelection when a user highlights text and hits “Ask about this”.
  • Handles copy-to-clipboard affordances, skeleton cards, and open-in-viewer gestures.

PrimaryInput ​

  • Controlled textarea that auto-resizes, captures global keystrokes, and exposes pause/resume semantics via inProgress.
  • Emits fine-grained events (textarea:focused, files-selected, submit:message, etc.) so parent containers can react.
  • Supports drag-and-drop, paste-based uploads, and suggestion navigation with keyboard arrows/Enter.

UploadedFilesSection ​

  • Shows an inline carousel of queued uploads with optional remove buttons.
  • Emits file:clicked for preview and file:remove for deletion before send.

FullScreenImageViewer ​

  • Modal overlay with download + close actions, tailored for generated imagery.
  • Emits fullScreenViewerClose plus downloadImage so parents can hook into persistence layers.

RotationAnimation ​

  • Gradient SVG spinner used by both the launcher and empty-state cards.
  • Accepts props for duration, primaryColor, secondaryColor, and backgroundColor to match your brand palette.

When to Use This Suite ​

  • You want an opinionated, ready-to-use AI chat surface with toggleable floating launcher.
  • You need to showcase streaming responses (with “thinking” timers) while handling uploads and follow-up questions.
  • You already have a backend that exposes streaming endpoints and file-upload APIs and need a polished front-end wrapper.

Prerequisites ​

  • Vue 3 + Vite (already part of this repo).
  • Pinia store registered at the app root: app.use(createPinia()).
  • Optional: provide an appImages object if you want to swap the placeholder assets referenced inside tooltips or loaders.