@supermsy/smart-chat-widget 1.0.0

package/src/components/ChatWindow.vue

@@ -0,0 +1,237 @@
+<template>
+  <div class="chat-window">
+    <ChatHeader
+      @minimize="$emit('minimize')"
+      @close="handleClose" />
+
+    <ChatMessageList
+      :messages="messages"
+      :user-info="userInfo" />
+
+    <ChatInput
+      :disabled="isStreaming"
+      :enable-transfer="enableTransfer"
+      @send="$emit('send-message', $event)"
+      @transfer="$emit('transfer')" />
+
+    <div
+      v-if="showConfirmModal"
+      class="modal-overlay"
+      @click="showConfirmModal = false">
+      <div
+        class="confirm-modal"
+        @click.stop>
+        <div class="modal-icon">
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="#f59e0b"
+            stroke-width="2">
+            <circle
+              cx="12"
+              cy="12"
+              r="10" />
+            <line
+              x1="12"
+              y1="8"
+              x2="12"
+              y2="12" />
+            <line
+              x1="12"
+              y1="16"
+              x2="12.01"
+              y2="16" />
+          </svg>
+        </div>
+        <div class="modal-title">确认关闭</div>
+        <div class="modal-content">确定要关闭对话窗口吗？</div>
+        <div class="modal-actions">
+          <button
+            class="btn-cancel"
+            @click="showConfirmModal = false">
+            取消
+          </button>
+          <button
+            class="btn-confirm"
+            @click="confirmClose">
+            确定
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import ChatHeader from './ChatHeader.vue';
+import ChatMessageList from './ChatMessageList.vue';
+import ChatInput from './ChatInput.vue';
+
+const emit = defineEmits(['minimize', 'close', 'send-message', 'transfer']);
+
+const showConfirmModal = ref(false);
+
+const handleClose = () => {
+  showConfirmModal.value = true;
+};
+
+const confirmClose = () => {
+  showConfirmModal.value = false;
+  emit('close');
+};
+
+defineProps({
+  messages: {
+    type: Array,
+    default: () => []
+  },
+  isStreaming: {
+    type: Boolean,
+    default: false
+  },
+  userInfo: {
+    type: Object,
+    default: () => ({ id: '', name: '', avatar: '' })
+  },
+  enableTransfer: {
+    type: Boolean,
+    default: true
+  }
+});
+</script>
+
+<style scoped>
+.chat-window {
+  width: 400px;
+  height: 560px;
+  background: #ffffff;
+  border-radius: 16px;
+  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.08);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  animation: slideUp 0.3s ease;
+  position: relative;
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.modal-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+  animation: fadeIn 0.2s ease;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.confirm-modal {
+  background: white;
+  border-radius: 12px;
+  padding: 24px;
+  width: 280px;
+  text-align: center;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
+  animation: modalSlideUp 0.2s ease;
+}
+
+@keyframes modalSlideUp {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.modal-icon {
+  width: 48px;
+  height: 48px;
+  margin: 0 auto 16px;
+  background: #fef3c7;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.modal-icon svg {
+  width: 24px;
+  height: 24px;
+}
+
+.modal-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #1f2937;
+  margin-bottom: 8px;
+}
+
+.modal-content {
+  font-size: 14px;
+  color: #6b7280;
+  margin-bottom: 20px;
+}
+
+.modal-actions {
+  display: flex;
+  gap: 12px;
+  justify-content: flex-end;
+}
+
+.btn-cancel,
+.btn-confirm {
+  padding: 8px 20px;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.btn-cancel {
+  border: 1px solid #d1d5db;
+  background: white;
+  color: #374151;
+}
+
+.btn-cancel:hover {
+  background: #f9fafb;
+}
+
+.btn-confirm {
+  border: none;
+  background: #8b5cf6;
+  color: white;
+}
+
+.btn-confirm:hover {
+  background: #7c3aed;
+}
+</style>

package/src/components/FAQCard.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="faq-section">
+    <div class="faq-header">
+      <span class="title">常见问题</span>
+      <span class="refresh-btn" @click="$emit('refresh')">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 14px;">
+          <polyline points="23 4 23 10 17 10"/>
+          <polyline points="1 20 1 14 7 14"/>
+          <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/>
+        </svg>
+        换一批
+      </span>
+    </div>
+    <div class="faq-list">
+      <div v-for="(faq, index) in faqList" :key="index" class="faq-item" @click="$emit('select', faq)">
+        {{ faq.question }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  faqList: {
+    type: Array,
+    default: () => []
+  }
+})
+
+defineEmits(['select', 'refresh'])
+</script>
+
+<style scoped>
+.faq-section {
+  padding: 12px 16px;
+  background: #FFFFFF;
+  border-top: 1px solid #E5E7EB;
+}
+
+.faq-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.title {
+  font-size: 13px;
+  font-weight: 600;
+  color: #1F2937;
+}
+
+.refresh-btn {
+  font-size: 12px;
+  color: #8B5CF6;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.faq-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.faq-item {
+  padding: 8px 12px;
+  background: #F9FAFB;
+  border-radius: 8px;
+  font-size: 13px;
+  color: #1F2937;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.faq-item:hover {
+  background: rgba(139, 92, 246, 0.05);
+  color: #8B5CF6;
+}
+</style>

package/src/components/SmartChatWidget.vue

@@ -0,0 +1,220 @@
+<template>
+  <div class="smart-chat-widget">
+    <ChatToggleButton
+      v-if="!isOpen"
+      @click="toggleWindow" />
+
+    <ChatWindow
+      v-if="isOpen"
+      :messages="messages"
+      :is-streaming="isStreaming"
+      :user-info="userInfo"
+      :enable-transfer="enableTransfer"
+      @minimize="toggleWindow"
+      @close="toggleWindow"
+      @send-message="handleSendMessage"
+      @transfer="handleTransfer" />
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import ChatToggleButton from './ChatToggleButton.vue';
+import ChatWindow from './ChatWindow.vue';
+import { sendMessageWithStream } from '@/api/chat';
+
+const props = defineProps({
+  // 智能体ID（可省略，使用默认值）
+  agentId: {
+    type: String,
+    default: 'a29b7cb5-96f3-4126-bbcb-a584659b3f76'
+  },
+  // 用户信息（可省略）
+  userInfo: {
+    type: Object,
+    default: () => ({ id: '', name: '', avatar: '' })
+  },
+  // 初始问候语
+  greeting: {
+    type: String,
+    default: '您好，请问有什么可以帮助您的？'
+  },
+  // 是否显示转人工按钮
+  enableTransfer: {
+    type: Boolean,
+    default: true
+  },
+  // API基础路径（可省略，自动检测）
+  apiBaseUrl: {
+    type: String,
+    default: ''
+  },
+  // 客户端ID（可省略，自动生成）
+  clientId: {
+    type: String,
+    default: ''
+  },
+  // 窗口标题
+  title: {
+    type: String,
+    default: '智能助手'
+  },
+  // 输入框占位符
+  placeholder: {
+    type: String,
+    default: '请问有什么可以帮助您的？'
+  }
+});
+
+const emit = defineEmits([
+  'message-sent',
+  'message-received',
+  'transfer-customer',
+  'window-opened',
+  'window-closed'
+]);
+
+const isOpen = ref(false);
+const messages = ref([]);
+const isStreaming = ref(false);
+const conversationId = ref('');
+
+// 自动检测 API 基础路径
+const getApiBaseUrl = () => {
+  if (props.apiBaseUrl) return props.apiBaseUrl;
+  // 尝试从环境变量获取
+  if (import.meta.env && import.meta.env.VITE_CHAT_API_URL) {
+    return import.meta.env.VITE_CHAT_API_URL;
+  }
+  // 默认使用独立路径，避免与其他项目冲突
+  return '/smart-chat-api';
+};
+
+onMounted(() => {
+  messages.value.push({
+    id: Date.now().toString(),
+    type: 'bot',
+    content: props.greeting,
+    timestamp: new Date().toLocaleString(),
+    isFinished: true
+  });
+});
+
+const toggleWindow = () => {
+  isOpen.value = !isOpen.value;
+  if (isOpen.value) {
+    emit('window-opened');
+  } else {
+    emit('window-closed');
+  }
+};
+
+const handleSendMessage = async (content) => {
+  console.log('[SmartChatWidget] 收到消息:', content);
+
+  if (!content.trim()) return;
+
+  const userMessage = {
+    id: Date.now().toString(),
+    type: 'user',
+    content: content.trim(),
+    timestamp: new Date().toLocaleString(),
+    isFinished: true
+  };
+  messages.value.push(userMessage);
+  console.log('[SmartChatWidget] 添加用户消息:', messages.value);
+  emit('message-sent', { message: userMessage, timestamp: Date.now() });
+
+  isStreaming.value = true;
+  console.log('[SmartChatWidget] 开始流式请求');
+
+  try {
+    const botMessageIndex = messages.value.length;
+    const botMessage = ref({
+      id: Date.now().toString() + '-bot',
+      type: 'bot',
+      content: '',
+      timestamp: new Date().toLocaleString(),
+      isFinished: false
+    });
+    messages.value.push(botMessage.value);
+    console.log('[SmartChatWidget] 添加机器人消息模板:', botMessage.value);
+
+    await sendMessageWithStream(
+      {
+        agentId: props.agentId,
+        prompt: content.trim(),
+        clientId: props.clientId || generateClientId()
+      },
+      getApiBaseUrl(),
+      (streamData) => {
+        console.log('[SmartChatWidget] 收到流式数据:', streamData);
+
+        if (streamData.conversationId) {
+          conversationId.value = streamData.conversationId;
+          console.log('[SmartChatWidget] 更新conversationId:', conversationId.value);
+        }
+        if (streamData.content) {
+          botMessage.value.content += streamData.content;
+          messages.value[botMessageIndex] = { ...botMessage.value };
+          console.log('[SmartChatWidget] 更新消息内容:', botMessage.value.content);
+        }
+        if (streamData.finish) {
+          botMessage.value.isFinished = true;
+          messages.value[botMessageIndex] = { ...botMessage.value };
+          isStreaming.value = false;
+          console.log('[SmartChatWidget] 消息完成:', botMessage.value);
+          emit('message-received', { message: botMessage.value, timestamp: Date.now() });
+        }
+      },
+      (error) => {
+        console.error('[SmartChatWidget] 流式消息错误:', error);
+        isStreaming.value = false;
+        botMessage.value.isFinished = true;
+        messages.value[botMessageIndex] = { ...botMessage.value };
+      }
+    );
+
+    if (!botMessage.value.isFinished) {
+      botMessage.value.isFinished = true;
+      messages.value[botMessageIndex] = { ...botMessage.value };
+      isStreaming.value = false;
+      console.log('[SmartChatWidget] 消息完成（流式结束）:', botMessage.value);
+      emit('message-received', { message: botMessage.value, timestamp: Date.now() });
+    }
+  } catch (error) {
+    console.error('[SmartChatWidget] 发送消息失败:', error);
+    isStreaming.value = false;
+    messages.value.push({
+      id: Date.now().toString() + '-error',
+      type: 'bot',
+      content: '抱歉，服务暂时不可用，请稍后重试',
+      timestamp: new Date().toLocaleString(),
+      isFinished: true
+    });
+  }
+};
+
+const generateClientId = () => {
+  return 'client-' + Date.now().toString(36) + Math.random().toString(36).substr(2, 9);
+};
+
+const handleTransfer = () => {
+  emit('transfer-customer', {
+    userId: props.userInfo.id,
+    conversationId: conversationId.value,
+    context: messages.value
+      .map((m) => `${m.type === 'user' ? '用户' : '助手'}: ${m.content}`)
+      .join('\n')
+  });
+};
+</script>
+
+<style scoped>
+.smart-chat-widget {
+  position: fixed;
+  right: 24px;
+  bottom: 24px;
+  z-index: 9999;
+}
+</style>

package/src/index.js

@@ -0,0 +1,12 @@
+import SmartChatWidget from './components/SmartChatWidget.vue'
+import './styles/index.scss'
+
+const SmartChatWidgetPlugin = {
+  install(app) {
+    app.component('SmartChatWidget', SmartChatWidget)
+  }
+}
+
+export { SmartChatWidget, SmartChatWidgetPlugin }
+
+export default SmartChatWidgetPlugin

package/src/main.js

@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+const app = createApp(App)
+app.mount('#app')

package/src/styles/index.scss

@@ -0,0 +1,8 @@
+/* 智能聊天组件全局样式 */
+.smart-chat-widget * {
+  box-sizing: border-box;
+}
+
+.smart-chat-widget {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+}