chore: version 2.9.2 (#261)

* feat: 添加  OPENAI_API_BASE_URL 可选参数[#249]

* fix: 生成的代码块不能复制的问题[#251][#260]

* perf: 限制高分屏上的宽度[#257]

* perf: 文字按单词换行[#215][#225]

* perf: highlight.js 新语法警告

* fix: 移动端输入框不会被键盘弹起[#256]

* chore: 更新文档

* chore: version 2.9.2

src/views/chat/components/Message/Text.vue

@@ -30,7 +30,7 @@ renderer.code = (code, language) => {
   const validLang = !!(language && hljs.getLanguage(language))
   if (validLang) {
     const lang = language ?? ''
-    return `<pre class="code-block-wrapper"><div class="code-block-header"><span class="code-block-header__lang">${lang}</span><span class="code-block-header__copy">${t('chat.copyCode')}</span></div><code class="hljs code-block-body ${language}">${hljs.highlight(lang, code).value}</code></pre>`
+    return `<pre class="code-block-wrapper"><div class="code-block-header"><span class="code-block-header__lang">${lang}</span><span class="code-block-header__copy">${t('chat.copyCode')}</span></div><code class="hljs code-block-body ${language}">${hljs.highlight(code, { language: lang }).value}</code></pre>`
   }
   return `<pre style="background: none">${hljs.highlightAuto(code).value}</pre>`
 }
@@ -118,7 +118,7 @@ defineExpose({ textRef })
       <span class="dark:text-white w-[4px] h-[20px] block animate-blink" />
     </template>
     <template v-else>
-      <div ref="textRef" class="leading-relaxed break-all">
+      <div ref="textRef" class="leading-relaxed break-words">
         <div v-if="!inversion" class="markdown-body" v-html="text" />
         <div v-else class="whitespace-pre-wrap" v-text="text" />
       </div>

src/views/chat/hooks/useCopyCode.ts

@@ -1,4 +1,4 @@
-import { onMounted } from 'vue'
+import { onMounted, onUpdated } from 'vue'
 
 export function useCopyCode() {
   function copyCodeBlock() {
@@ -15,4 +15,6 @@ export function useCopyCode() {
   }
 
   onMounted(() => copyCodeBlock())
+
+  onUpdated(() => copyCodeBlock())
 }

src/views/chat/index.vue

@@ -326,15 +326,14 @@ const buttonDisabled = computed(() => {
 
 const wrapClass = computed(() => {
   if (isMobile.value)
-    return ['pt-14', 'pb-16']
-
+    return ['pt-14']
   return []
 })
 
 const footerClass = computed(() => {
   let classes = ['p-4']
   if (isMobile.value)
-    classes = ['p-2', 'pr-4', 'fixed', 'bottom-4', 'left-0', 'right-0', 'z-30', 'h-14', 'overflow-hidden']
+    classes = ['sticky', 'left-0', 'bottom-0', 'right-0', 'p-2', 'pr-4', 'h-14', 'overflow-hidden']
   return classes
 })
 
@@ -349,7 +348,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="flex flex-col h-full" :class="wrapClass">
+  <div class="flex flex-col w-full h-full" :class="wrapClass">
     <main class="flex-1 overflow-hidden">
       <div
         id="scrollRef"
@@ -357,58 +356,62 @@ onUnmounted(() => {
         class="h-full overflow-hidden overflow-y-auto"
         :class="[isMobile ? 'p-2' : 'p-4']"
       >
-        <template v-if="!dataSources.length">
-          <div class="flex items-center justify-center mt-4 text-center text-neutral-300">
-            <SvgIcon icon="ri:bubble-chart-fill" class="mr-2 text-3xl" />
-            <span>Aha~</span>
-          </div>
-        </template>
-        <template v-else>
-          <div>
-            <Message
-              v-for="(item, index) of dataSources"
-              :key="index"
-              :date-time="item.dateTime"
-              :text="item.text"
-              :inversion="item.inversion"
-              :error="item.error"
-              :loading="item.loading"
-              @regenerate="onRegenerate(index)"
-              @delete="handleDelete(index)"
-            />
-            <div class="sticky bottom-0 left-0 flex justify-center">
-              <NButton v-if="loading" type="warning" @click="handleStop">
-                <template #icon>
-                  <SvgIcon icon="ri:stop-circle-line" />
-                </template>
-                Stop Responding
-              </NButton>
+        <div class="w-full max-w-screen-xl m-auto">
+          <template v-if="!dataSources.length">
+            <div class="flex items-center justify-center mt-4 text-center text-neutral-300">
+              <SvgIcon icon="ri:bubble-chart-fill" class="mr-2 text-3xl" />
+              <span>Aha~</span>
             </div>
-          </div>
-        </template>
+          </template>
+          <template v-else>
+            <div>
+              <Message
+                v-for="(item, index) of dataSources"
+                :key="index"
+                :date-time="item.dateTime"
+                :text="item.text"
+                :inversion="item.inversion"
+                :error="item.error"
+                :loading="item.loading"
+                @regenerate="onRegenerate(index)"
+                @delete="handleDelete(index)"
+              />
+              <div class="sticky bottom-0 left-0 flex justify-center">
+                <NButton v-if="loading" type="warning" @click="handleStop">
+                  <template #icon>
+                    <SvgIcon icon="ri:stop-circle-line" />
+                  </template>
+                  Stop Responding
+                </NButton>
+              </div>
+            </div>
+          </template>
+        </div>
       </div>
     </main>
     <footer :class="footerClass">
-      <div class="flex items-center justify-between space-x-2">
-        <HoverButton @click="handleClear">
-          <span class="text-xl text-[#4f555e] dark:text-white">
-            <SvgIcon icon="ri:delete-bin-line" />
-          </span>
-        </HoverButton>
-        <NInput
-          v-model:value="prompt"
-          type="textarea"
-          :autosize="{ minRows: 1, maxRows: 2 }"
-          :placeholder="placeholder"
-          @keypress="handleEnter"
-        />
-        <NButton type="primary" :disabled="buttonDisabled" @click="handleSubmit">
-          <template #icon>
-            <span class="dark:text-black">
-              <SvgIcon icon="ri:send-plane-fill" />
+      <div class="w-full max-w-screen-xl m-auto">
+        <div class="flex items-center justify-between space-x-2">
+          <HoverButton @click="handleClear">
+            <span class="text-xl text-[#4f555e] dark:text-white">
+              <SvgIcon icon="ri:delete-bin-line" />
             </span>
-          </template>
-        </NButton>
+          </HoverButton>
+          <NInput
+            v-model:value="prompt"
+            type="textarea"
+            :autosize="{ minRows: 1, maxRows: 2 }"
+            :placeholder="placeholder"
+            @keypress="handleEnter"
+          />
+          <NButton type="primary" :disabled="buttonDisabled" @click="handleSubmit">
+            <template #icon>
+              <span class="dark:text-black">
+                <SvgIcon icon="ri:send-plane-fill" />
+              </span>
+            </template>
+          </NButton>
+        </div>
       </div>
     </footer>
   </div>