|
|
@@ -0,0 +1,169 @@
|
|
|
+<template>
|
|
|
+ <div class="chat-container">
|
|
|
+ <div class="chat-list" >
|
|
|
+ <div class="messages">
|
|
|
+ <div v-for="(msg, index) in messages" :key="index" :class="['message', msg.role]">
|
|
|
+
|
|
|
+ <div class="content">{{msg.content}}</div>
|
|
|
+ <div class="message-bar" >
|
|
|
+ <a-space>
|
|
|
+ <a-tooltip placement="bottom">
|
|
|
+ <template #title>
|
|
|
+ <span>复制</span>
|
|
|
+ </template>
|
|
|
+ <CopyOutlined style="font-size: 14px" />
|
|
|
+ </a-tooltip>
|
|
|
+ <a-tooltip placement="bottom">
|
|
|
+ <template #title>
|
|
|
+ <span>重新生成</span>
|
|
|
+ </template>
|
|
|
+ <ReloadOutlined style="font-size: 14px"/>
|
|
|
+ </a-tooltip>
|
|
|
+ <a-tooltip placement="bottom">
|
|
|
+ <template #title>
|
|
|
+ <span>播放</span>
|
|
|
+ </template>
|
|
|
+ <SoundOutlined style="font-size: 14px" />
|
|
|
+ </a-tooltip>
|
|
|
+ </a-space>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts" >
|
|
|
+import { ref } from 'vue'
|
|
|
+import MarkdownIt from 'markdown-it'
|
|
|
+import hljs from 'highlight.js'
|
|
|
+import 'highlight.js/styles/github.css'
|
|
|
+import { CopyOutlined, SoundOutlined, ReloadOutlined } from '@ant-design/icons-vue'
|
|
|
+
|
|
|
+const md = new MarkdownIt({
|
|
|
+ highlight: function (str, lang) {
|
|
|
+ if (lang && hljs.getLanguage(lang)) {
|
|
|
+ return `<pre><code class="hljs">${hljs.highlight(str, { language: lang }).value}</code></pre>`
|
|
|
+ }
|
|
|
+ return `<pre><code>${str}</code></pre>`
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+const messages = ref([
|
|
|
+ { role: 'ai', content: '你好!有什么可以帮助你的吗?' },
|
|
|
+ { role: 'user', content: '你什么都不能帮助到我!!!!' },
|
|
|
+ { role: 'ai', content: '你好!有什么可以帮助你的吗?' },
|
|
|
+ { role: 'ai', content: '你好!有什么可以帮助你的吗?' },
|
|
|
+ { role: 'ai', content: '你好!有什么可以帮助你的吗?' },
|
|
|
+ { role: 'ai', content: '你好!有什么可以帮助你的吗?' },
|
|
|
+ { role: 'ai', content: '你好!有什么可以帮助你的吗?' },
|
|
|
+ { role: 'ai', content: '你好!有什么可以帮助你的吗?' },
|
|
|
+ { role: 'ai', content: '你好!有什么可以帮助你的吗?' },
|
|
|
+ { role: 'ai', content: '你好!有什么可以帮助你的吗?' },
|
|
|
+ { role: 'ai', content: '你好!有什么可以帮助你的吗?' },
|
|
|
+ { role: 'ai', content: '你好!有什么可以帮助你的吗?' },
|
|
|
+ { role: 'ai', content: '你好!有什么可以帮助你的吗?' },
|
|
|
+ { role: 'ai', content: '你好!有什么可以帮助你的吗?' },
|
|
|
+ { role: 'ai', content: '你好!有什么可以帮助你的吗?' },
|
|
|
+ { role: 'ai', content: '你好!有什么可以帮助你的吗?' },
|
|
|
+ { role: 'ai', content: '你好!有什么可以帮助你的吗?' },
|
|
|
+ { role: 'ai', content: '你好!有什么可以帮助你的吗?' },
|
|
|
+ { role: 'ai', content: '你好!有什么可以帮助你的吗?' },
|
|
|
+ { role: 'ai', content: '你好!有什么可以帮助你的吗?' },
|
|
|
+ { role: 'ai', content: '你好!有什么可以帮助你的吗?' },
|
|
|
+ { role: 'ai', content: '你好!有什么可以帮助你的吗?' },
|
|
|
+ { role: 'ai', content: '你好!有什么可以帮助你的吗?' },
|
|
|
+ { role: 'ai', content: '你好!有什么可以帮助你的吗?' },
|
|
|
+ { role: 'ai', content: '你好!有什么可以帮助你的吗?' },
|
|
|
+ { role: 'ai', content: '你好!有什么可以帮助你的吗?' },
|
|
|
+ { role: 'ai', content: '你好!有什么可以帮助你的吗?' },
|
|
|
+ { role: 'ai', content: '你好!有什么可以帮助你的吗?' },
|
|
|
+ { role: 'ai', content: '你好!有什么可以帮助你的吗?' },
|
|
|
+ { role: 'ai', content: '你好!有什么可以帮助你的吗?' },
|
|
|
+ { role: 'ai', content: '你好!有什么可以帮助你的吗?' },
|
|
|
+ { role: 'ai', content: '你好!有什么可以帮助你的吗?' },
|
|
|
+ { role: 'ai', content: '你好!有什么可以帮助你的吗?' },
|
|
|
+ { role: 'ai', content: '你好!有什么可以帮助你的吗?' }
|
|
|
+])
|
|
|
+
|
|
|
+const input = ref('')
|
|
|
+
|
|
|
+const renderMarkdown = (text) => md.render(text)
|
|
|
+
|
|
|
+const sendMessage = () => {
|
|
|
+ if (!input.value.trim()) return
|
|
|
+ messages.value.push({ role: 'user', content: input.value })
|
|
|
+ // 模拟 AI 回复
|
|
|
+ setTimeout(() => {
|
|
|
+ messages.value.push({ role: 'ai', content: "你刚才说的是:\n```javascript\nconsole.log('Hello, world!');\n```" })
|
|
|
+ }, 1000)
|
|
|
+ input.value = ''
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="less" >
|
|
|
+.chat-container {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ margin: auto;
|
|
|
+ overflow: hidden;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ background-color: #fcfafa;
|
|
|
+ .chat-list {
|
|
|
+ width: 100%;
|
|
|
+ padding-top: 60px;
|
|
|
+ overflow-y: auto;
|
|
|
+ max-height: 100vh;
|
|
|
+ background: #f9f9f9;
|
|
|
+
|
|
|
+ padding-bottom: 360px;
|
|
|
+ .messages {
|
|
|
+ width: 768px;
|
|
|
+ padding: 10px;
|
|
|
+ margin: 0px auto;
|
|
|
+ .message {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ // align-items: flex-start;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ .ai {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ .content {
|
|
|
+ padding: 10px 0px ;
|
|
|
+ max-width: 80%;
|
|
|
+ white-space: pre-wrap;
|
|
|
+ font-size: 16px;
|
|
|
+ text-align: left;
|
|
|
+ // background-color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .user {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ text-align: right;
|
|
|
+ .content {
|
|
|
+ width: max-content;
|
|
|
+ padding: 12px 24px;
|
|
|
+ border-radius: 24px;
|
|
|
+ margin-left: auto;
|
|
|
+ max-width: 80%;
|
|
|
+ white-space: pre-wrap;
|
|
|
+ font-size: 16px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .message-bar {
|
|
|
+ // display: flex;
|
|
|
+ // justify-content: flex-end;
|
|
|
+ margin-top: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+</style>
|