@supermsy/smart-chat-widget 1.0.0

package/src/components/ChatMessageList.vue

@@ -0,0 +1,334 @@
+<template>
+  <div
+    class="chat-message-list"
+    ref="scrollContainer">
+    <div
+      v-for="(msg, index) in messages"
+      :key="index"
+      :class="['message', msg.type]">
+      <div class="avatar">
+        <img
+          v-if="msg.type === 'user'"
+          :src="userInfo.avatar || userAvatar" />
+        <img
+          v-else
+          :src="botAvatar" />
+      </div>
+      <div class="content">
+        <div
+          class="message-text"
+          v-html="formatMessage(msg.content)"></div>
+        <div
+          v-if="!msg.isFinished"
+          class="typing-indicator">
+          <span></span>
+          <span></span>
+          <span></span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, nextTick } from 'vue';
+import userAvatar from '@/assets/imgs/touxiang6.png';
+import botAvatar from '@/assets/imgs/jiqirentouxiang.png';
+
+const formatMessage = (content) => {
+  if (!content) return '';
+  return content
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '')
+    .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+    .replace(/\n/g, '<br/>');
+};
+
+const props = defineProps({
+  messages: {
+    type: Array,
+    default: () => []
+  },
+  userInfo: {
+    type: Object,
+    default: () => ({ id: '', name: '', avatar: '' })
+  }
+});
+
+const scrollContainer = ref(null);
+
+const scrollToBottom = () => {
+  nextTick(() => {
+    if (scrollContainer.value) {
+      scrollContainer.value.scrollTop = scrollContainer.value.scrollHeight;
+    }
+  });
+};
+
+watch(() => props.messages.length, scrollToBottom);
+watch(
+  () => props.messages,
+  (newMessages) => {
+    if (newMessages.length > 0) {
+      const lastMessage = newMessages[newMessages.length - 1];
+      if (lastMessage && !lastMessage.isFinished) {
+        scrollToBottom();
+      }
+    }
+  },
+  { deep: true }
+);
+</script>
+
+<style scoped>
+.chat-message-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+  background: #f9fafb;
+}
+
+.chat-message-list::-webkit-scrollbar {
+  width: 6px;
+}
+
+.chat-message-list::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.chat-message-list::-webkit-scrollbar-thumb {
+  background: #d1d5db;
+  border-radius: 3px;
+}
+
+.chat-message-list::-webkit-scrollbar-thumb:hover {
+  background: #9ca3af;
+}
+
+.message {
+  display: flex;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.message.user {
+  justify-content: flex-end;
+}
+
+.message.user .content {
+  background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
+  color: white;
+  border-radius: 16px 16px 4px 16px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  order: 1;
+}
+
+.message.user .avatar {
+  margin-left: 8px;
+  order: 2;
+}
+
+.message.bot {
+  justify-content: flex-start;
+}
+
+.message.bot .content {
+  background: #f3f4f6;
+  color: #1f2937;
+  border-radius: 16px 16px 16px 4px;
+}
+
+.message.bot .avatar {
+  margin-right: 8px;
+}
+
+.avatar {
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
+  background: #f3f4f6;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  overflow: hidden;
+}
+
+.avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.content {
+  max-width: 75%;
+  padding: 12px 16px;
+  font-size: 14px;
+  line-height: 1.6;
+  word-break: break-word;
+}
+
+.message-text {
+  white-space: pre-wrap;
+}
+
+.message-text strong {
+  color: #8b5cf6;
+  font-weight: 600;
+}
+
+.message-text ol {
+  padding-left: 20px;
+  margin: 8px 0;
+}
+
+.message-text li {
+  margin-bottom: 4px;
+}
+
+.message.user .message-text strong {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.thinking-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+  padding-bottom: 8px;
+  border-bottom: 1px dashed #e5e7eb;
+}
+
+.thinking-title {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  color: #6b7280;
+}
+
+.thinking-icon {
+  width: 16px;
+  height: 16px;
+  color: #10b981;
+}
+
+.check-icon {
+  width: 14px;
+  height: 14px;
+  color: #10b981;
+}
+
+.thinking-time {
+  background: #d1fae5;
+  color: #10b981;
+  padding: 2px 10px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.collapse-btn {
+  width: 24px;
+  height: 24px;
+  border: none;
+  background: transparent;
+  color: #6b7280;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.collapse-btn:hover {
+  background: rgba(0, 0, 0, 0.05);
+}
+
+.message-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 12px;
+  padding-top: 8px;
+  border-top: 1px solid #e5e7eb;
+}
+
+.footer-info {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 11px;
+  color: #9ca3af;
+}
+
+.info-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.footer-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.footer-actions button {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  padding: 4px 8px;
+  border: none;
+  background: transparent;
+  color: #6b7280;
+  font-size: 11px;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: all 0.2s;
+}
+
+.footer-actions button:hover {
+  background: rgba(0, 0, 0, 0.05);
+  color: #1f2937;
+}
+
+.typing-indicator {
+  display: flex;
+  gap: 4px;
+  padding: 8px 0;
+}
+
+.typing-indicator span {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #6b7280;
+  animation: typing 1.4s infinite ease-in-out;
+}
+
+.typing-indicator span:nth-child(1) {
+  animation-delay: 0s;
+}
+.typing-indicator span:nth-child(2) {
+  animation-delay: 0.2s;
+}
+.typing-indicator span:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+@keyframes typing {
+  0%,
+  80%,
+  100% {
+    transform: scale(0.6);
+    opacity: 0.5;
+  }
+  40% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+</style>

package/src/components/ChatToggleButton.vue

@@ -0,0 +1,179 @@
+<template>
+  <div
+    class="chat-toggle-btn"
+    @click="handleClick"
+    @mouseenter="showTooltip = true"
+    @mouseleave="showTooltip = false">
+    <div class="avatar-wrapper">
+      <div class="avatar">
+        <div class="face">
+          <div class="eye left-eye"></div>
+          <div class="eye right-eye"></div>
+        </div>
+        <div class="glow"></div>
+      </div>
+    </div>
+    <div
+      v-if="showTooltip"
+      class="tooltip">
+      <div style="font-weight: 600; color: #1f2937">需要帮助么</div>
+      <div style="font-size: 12px; color: #9ca3af; margin-top: 2px">点击我，与我对话</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const emit = defineEmits(['click']);
+
+const showTooltip = ref(false);
+
+const handleClick = () => {
+  showTooltip.value = false;
+  emit('click');
+};
+</script>
+
+<style scoped>
+.chat-toggle-btn {
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  position: relative;
+}
+
+.chat-toggle-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.12);
+}
+
+.avatar-wrapper {
+  width: 36px;
+  height: 36px;
+  position: relative;
+}
+
+.avatar {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background: linear-gradient(180deg, #ffffff 0%, #f3f4f6 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  overflow: hidden;
+  animation: float 3s ease-in-out infinite;
+}
+
+@keyframes float {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-2px);
+  }
+}
+
+.face {
+  position: relative;
+  width: 20px;
+  height: 16px;
+}
+
+.eye {
+  position: absolute;
+  width: 6px;
+  height: 6px;
+  background: #1f2937;
+  border-radius: 50%;
+  animation: blink 4s ease-in-out infinite;
+}
+
+.left-eye {
+  left: 0;
+  top: 2px;
+}
+
+.right-eye {
+  right: 0;
+  top: 2px;
+}
+
+@keyframes blink {
+  0%,
+  45%,
+  55%,
+  100% {
+    transform: scaleY(1);
+  }
+  50% {
+    transform: scaleY(0.1);
+  }
+}
+
+.glow {
+  position: absolute;
+  top: -8px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 30px;
+  height: 15px;
+  background: radial-gradient(ellipse at center, rgba(139, 92, 246, 0.6) 0%, transparent 70%);
+  border-radius: 50%;
+  animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 0.6;
+    transform: translateX(-50%) scale(1);
+  }
+  50% {
+    opacity: 1;
+    transform: translateX(-50%) scale(1.2);
+  }
+}
+
+.tooltip {
+  position: absolute;
+  bottom: calc(100% + 12px);
+  right: 0;
+  background: white;
+  padding: 12px 16px;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  white-space: nowrap;
+  animation: fadeIn 0.2s ease;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(5px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.tooltip::after {
+  content: '';
+  position: absolute;
+  top: 100%;
+  right: 16px;
+  border: 6px solid transparent;
+  border-top-color: white;
+}
+</style>