feat: 对接 Spark 大模型

components/Markdown.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import md from 'markdown-it'
+import hljs from "highlight.js";
+import 'highlight.js/styles/github-dark-dimmed.min.css';
+
+const renderer = md({
+  html: true,
+  linkify: true,
+  typographer: true,
+  breaks: true,
+  highlight: function (str, lang) {
+    if (lang && hljs.getLanguage(lang)) {
+      try {
+        return (
+            `<pre class="hljs" style="overflow-x: auto"><code>${
+                hljs.highlight(str, {language: lang, ignoreIllegals: true}).value
+            }</code></pre>`
+        )
+      } catch (_) {
+      }
+    }
+
+    return '<pre class="hljs"><code>' + md().utils.escapeHtml(str) + '</code></pre>';
+  }
+})
+
+const props = defineProps({
+  source: {
+    type: String,
+    required: true,
+  },
+})
+</script>
+
+<template>
+  <article
+      class="prose dark:prose-invert max-w-none prose-sm prose-neutral"
+      v-html="renderer.render(source.replaceAll('\t', '&nbsp;&nbsp;&nbsp;&nbsp;'))"
+  ></article>
+</template>
+
+<style scoped>
+
+</style>

components/aigc/chat/ChatItem.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type {ChatSession} from "~/components/aigc/chat/index";
 import type {PropType} from "vue";
+import type {ChatSession} from "~/typings/llm";
 
 const props = defineProps({
   active: {

components/aigc/chat/Message.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type {PropType} from "vue";
-import type {ChatMessage} from "~/components/aigc/chat/index";
+import type {ChatMessage} from "~/typings/llm";
 import MessageResponding from "~/components/Icon/MessageResponding.vue";
 
 const props = defineProps({
@@ -24,6 +24,9 @@ const message_avatar = computed(() => {
   }
 })
 const message_background = computed(() => {
+  if (props.message?.interrupted) {
+    return 'bg-red-200/50 dark:bg-red-800/20 border-red-300 dark:!border-red-500/50'
+  }
   switch (props.message?.role) {
     case 'user':
       return 'bg-primary-100 dark:bg-primary-800'
@@ -47,15 +50,23 @@ const message_background = computed(() => {
               :class="message_background"
               :key="message.content"
           >
-            <span v-if="message.content">
-              {{ message.content }}
-            </span>
+            <div v-if="message.content">
+<!--              <span v-if="message.interrupted">-->
+<!--                <svg class="inline -mt-0.5 opacity-80" xmlns="http://www.w3.org/2000/svg" width="1.2em"-->
+<!--                       height="1.2em" viewBox="0 0 24 24">-->
+<!--                  <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"-->
+<!--                        d="M12 9v4m-1.637-9.409L2.257 17.125a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636-2.87L13.637 3.59a1.914 1.914 0 0 0-3.274 0zM12 16h.01"/>-->
+<!--                </svg>-->
+<!--                {{ message.content }}-->
+<!--              </span>-->
+              <Markdown :source="message.content"/>
+            </div>
             <span v-else>
               <MessageResponding class="text-xl text-neutral-500 dark:text-neutral-300 mx-2"/>
             </span>
           </div>
         </Transition>
-        <div class="chat-inside-extra">
+        <div v-if="message.create_at" class="chat-inside-extra">
           {{ dayjs(message.create_at * 1000).format('YYYY-MM-DD HH:mm:ss') }}
         </div>
       </div>

components/aigc/chat/index.d.ts

@@ -1,20 +0,0 @@
-export type ChatSessionId = string
-export type ChatMessageId = string
-
-export interface ChatSession {
-  id: ChatSessionId
-  subject: string
-  create_at: number
-  messages: ChatMessage[]
-  last_input?: string
-}
-
-export type MessageRole = 'user' | 'assistant' | 'system'
-
-export interface ChatMessage {
-  id: ChatMessageId
-  role: MessageRole
-  content: string
-  create_at: number
-  interrupted?: boolean
-}