@krystalnaroo/ai-chat-vue3

@krystalnaroo/ai-chat-vue3

安裝

yarn add @krystalnaroo/ai-chat-vue3

Live2D 資源

Live2D 模型與 pixiDisplay.min.js 需要被放到「使用者專案」的 public/Live2D 才能透過 URL 取得。

套件安裝時會自動複製到 public/Live2D。在 monorepo 環境下，若偵測到 apps/vue3/public，會優先複製到該位置。你也可以手動執行：

npx ai-chat-vue3-copy-live2d

如果你的 public 不在專案根目錄，可用 --dest 指定：

npx ai-chat-vue3-copy-live2d --dest /path/to/your/project

也可以用環境變數控制：

AI_CHAT_VUE3_ASSETS_DEST=/path/to/your/project npx ai-chat-vue3-copy-live2d
AI_CHAT_VUE3_ASSETS_DISABLE=1 npx ai-chat-vue3-copy-live2d

Vite 設定（常見 CJS/ESM 相容問題）

若在使用 Vite 專案出現類似 does not provide an export named 'default' 的錯誤，請加入以下設定：

// vite.config.(js|mjs)
export default defineConfig({
  optimizeDeps: {
    include: ["object-assign", "url", "eventemitter3", "earcut"]
  },
  ssr: {
    noExternal: ["@krystalnaroo/ai-chat-vue3"]
  }
});

Live2D Core 引入

請在專案的 index.html 加上：

<script src="/Live2D/pixiDisplay.min.js"></script>

1. 基本用法（懸浮按鈕）

直接在頁面引入，它會自己固定在右下角，可以拖來拖去吸附在瀏覽器邊。

<template>
  <AiChatWidget url="wss://你的後端WebSocket網址/ws/audio" />
</template>

<script setup>
import { AiChatWidget } from "@krystalnaroo/ai-chat-vue3";
</script>

2. 獨立頁面模式（全螢幕）

如果你想要點擊按鈕後，不是打開一個小視窗，而是跳轉到一個獨立的聊天頁面

第一步：在首頁放按鈕 設定 openMode="page"，並告訴它要跳轉去哪 (pageUrl)。

<!-- App.vue -->
<AiChatWidget url="wss://..." openMode="page" pageUrl="/ai-chat" />

第二步：建立聊天頁面 在你路由設定的頁面裡（例如 views/AiChat.vue），加上 layout="fullscreen"。

<!-- views/AiChat.vue -->
<template>
  <AiChatWidget url="wss://..."  layout="fullscreen" />
</template>

Props

initialPosition 說明

設定懸浮按鈕的初始位置，使用 top/bottom 控制垂直、left/right 控制水平，數值為距離視窗邊緣的像素。每個軸只需指定一個方向，放開後仍會自動吸附到最近的邊緣。

<!-- 右下角（預設） -->
<AiChatWidget :initial-position="{ bottom: 200, right: 1 }" />

<!-- 左下角 -->
<AiChatWidget :initial-position="{ bottom: 200, left: 1 }" />

<!-- 右上角 -->
<AiChatWidget :initial-position="{ top: 100, right: 1 }" />

<!-- 左上角 -->
<AiChatWidget :initial-position="{ top: 100, left: 1 }" />

若同時指定 top 和 bottom，以 top 為優先；同時指定 left 和 right，以 left 為優先。

quickQuestions 說明

以分類方式提供快選問題按鈕，每個分類包含類別名稱與問題陣列。當使用者點擊後會直接發送該問題給 AI。

<AiChatWidget
  :quick-questions="[
    {
      category: '公司資訊',
      items: ['請介紹公司', '公司成立時間', '聯絡方式']
    },
    {
      category: '業務資訊',
      items: ['主要業務內容', '服務建案類型', 'iHome 系統介紹']
    }
  ]"
/>

Slots

範例：

<AiChatWidget ...>
  <template #fab-label>
    <span>客服</span>
  </template>
  <template #header-title>
    智慧小幫手
  </template>
</AiChatWidget>