Chat Components – Usage Guide

1. Register Pinia and Provide Assets

// main.ts
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const app = createApp(App)

const pinia = createPinia()
app.use(pinia)

// Optional: images used by PrimaryInput / FullScreenImageViewer
app.provide('appImages', {
  'pencil-icon.svg': '/assets/pencil.svg',
  'spinnerLoader.gif': '/assets/spinner.gif',
  'suggestionDropdownMessageIcon.svg': '/assets/chat-bullet.svg',
})

app.mount('#app')

The chat store (src/stores/chatAgent.store.js) already ships with seeded data, so the UI renders immediately once Pinia is available. Replace the initial conversationList with your own seed data if necessary.

2. Render the Entry Point

ChatViewWrapper.vue composes the full experience: conversation list, prompt input, attachments, fullscreen viewer, and the animated background.

<script setup>
import { onMounted } from 'vue'
import ChatViewWrapper from '@/components/ChatAgentComponents/ChatComponents/ChatViewWrapper.vue'
import { useChatAgentStore } from '@/stores/chatAgent.store'

const chatStore = useChatAgentStore()

onMounted(() => {
  chatStore.isChatBoxVisible = false
})
</script>

<template>
  <ChatViewWrapper />
</template>

3. Access the Store (Optional)

import { useChatAgentStore } from '@/stores/chatAgent.store'

const chatStore = useChatAgentStore()

chatStore.conversationList.push({
  _id: crypto.randomUUID(),
  role: 'assistant',
  message: 'Hello! Ask me anything.',
  uploadedFiles: [],
})

The helper methods exposed by the store are the same ones used inside ChatViewWrapper:

• startAiAgentResponseStreaming(options) – Kick off a streaming request.
• convertAndResizeImageToBase64(file) – Prepares previews for pasted/dropped images.
• openFullScreenImageViewer(url) / downloadImage(url) – Controls the fullscreen modal.

4. Use the Floating Shell (Optional)

If you prefer the draggable launcher experience, wrap the same entry point with the shell component:

<script setup>
import DraggableChatBoxWrapper from '@/components/ChatAgentComponents/ChatComponents/DraggableChatBoxWrapper.vue'
</script>

<template>
  <DraggableChatBoxWrapper />
</template>

This adds the floating avatar + draggable window while still rendering ChatViewWrapper internally.

You can also mix and match the inner building blocks. Example: keep PrimaryInput but render messages inside your own container.

<script setup>
import PrimaryInput from '@/components/ChatAgentComponents/ChatComponents/PrimaryInput.vue'
import { ref } from 'vue'

const prompt = ref('')

function handleSubmit(message) {
  // send to your API
}
</script>

<template>
  <PrimaryInput
    v-model="prompt"
    :dropdown-suggestions="['Weekly summary', 'Draft an email']"
    @submit:message="handleSubmit"
  />
</template>

5. File Upload Hooks

PrimaryInput emits selected files; ChatViewWrapper converts them and stores the preview object { _id, fileName, type, preview, fileType }. To hook into external storage, listen to files-selected and perform uploads before calling startAiAgentResponseStreaming.

6. Markdown Renderers (Standalone Use)

If you want to reuse the same output experience outside the chat shell, you can import the markdown components directly:

<script setup>
import CustomMarkdown from '@/components/ChatAgentComponents/MarkdownComponent/CustomMarkdown.vue'
import SentMessageMarkdown from '@/components/ChatAgentComponents/MarkdownComponent/SentMessageMarkdown.vue'

const assistantReply = `## Hello!\n\n\`\`\`ts\nconst greet = (name: string) => console.log(name)\n\`\`\`\n\nColor swatch: #4F46E5`
const userReply = `1. First step\n2. Second step\n\nNeed help? [Create a ticket](https://altersquare.ai)`
</script>

<template>
  <div class="markdown-thread">
    <CustomMarkdown :content="assistantReply" />
    <SentMessageMarkdown :content="userReply" />
  </div>
</template>

Both components live in src/components/ChatAgentComponents/MarkdownComponent/ and expect the markdown-related dependencies listed in the overview.