feat(extensions): AI assistant

examples/App.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <header class="p-3 flex gap-3 justify-center w-full bg-gray-100 text-black">
+    <header class="p-3 flex gap-3 justify-center w-full bg-gray-100 text-foreground">
       <button ghost @click="locale.setLang('zhHans')">中文</button>
       <button ghost @click="locale.setLang('en')">English</button>
       <button ghost @click="theme = 'dark'">dark</button>
@@ -62,6 +62,7 @@ import {
   ImageUpload,
   VideoUpload,
   Code,
+  AI,
 } from 'echo-editor'
 import { ExportWord } from './extensions/ExportWord'
 import OpenAI from 'openai'
@@ -144,41 +145,42 @@ const extensions = [
     },
   }),
   ExportWord,
-  // AI.configure({
-  //   completions: text => AICompletions(text),
-  // }),
+  AI.configure({
+    completions: AICompletions,
+  }),
 ]
-async function AICompletions(text?: string) {
-  // 从.env中获取key 请自行替换
-  // @ts-ignore
+async function AICompletions(prompt: string, text: string, signal?: AbortSignal) {
+  // recommend https://groq.com
   const apiKey = import.meta.env.VITE_OPENAI_API_KEY
-  if (!apiKey) {
-    console.error('请配置VITE_OPENAI_API_KEY')
-    return
+  const baseURL = import.meta.env.VITE_OPENAI_BASE_URL
+  const model = import.meta.env.VITE_OPENAI_MODEL
+  if (!apiKey || !baseURL || !model) {
+    throw new Error('OpenAI configuration is missing. Please check your environment variables.')
   }
   const openai = new OpenAI({
     apiKey: apiKey,
     dangerouslyAllowBrowser: true,
-    baseURL: 'https://api.deepseek.com/v1',
+    baseURL: baseURL,
   })
-  const stream = await openai.chat.completions.create({
-    model: 'deepseek-chat',
-    messages: [
-      {
-        role: 'system',
-        content: `你将扮演一个写作助手,帮助我完成文章的创作、续写、优化等`,
-      },
+  const system = 'be a helpful assistant'
+  try {
+    const stream = await openai.chat.completions.create(
       {
-        role: 'user',
-        content: `${text}`,
+        model,
+        messages: [
+          { role: 'system', content: system },
+          { role: 'user', content: `${prompt} :${text}` },
+        ],
+        stream: true,
       },
-    ],
-    temperature: 0.7,
-    max_tokens: 256,
-    top_p: 0.9,
-    stream: true,
-  })
-
-  return stream
+      { signal }
+    )
+    return stream
+  } catch (error) {
+    if (error instanceof Error) {
+      console.error('Error in AI Completions:', error.message)
+    }
+    throw error
+  }
 }
 </script>

examples/style.css

@@ -1,3 +1,69 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+
+    --ring: 240 10% 3.9%;
+
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+
+    --ring: 240 4.9% 83.9%;
+  }
+}