AI Document Assistant

import { useUmoEditor } from '@umoteam/editor'
import OpenAI from 'openai'
 
const onMessage = async (payload, content) => {
  console.log(payload, content)
  const { command, lang, input, output } = payload
  const client = new OpenAI({
    baseURL: '...',
    apiKey: '...',
    dangerouslyAllowBrowser: true, // Allow using OpenAI SDK in the browser
  })
  const langs = {
    'en-US': 'English',
    'zh-CN': 'Chinese',
  }
  const options = {
    stream: true,
    model: '...',
    messages: [
      {
        role: 'system',
        content: `You are a document assistant. Based on the user's input text or HTML content and the corresponding operation command, generate document content that meets the requirements. Requirements: 1. If the command does not require translation, return in ${langs[lang]}; otherwise, return in the language specified by the user. 2. Return in ${output === 'rich-text' ? 'rich-text (HTML)' : 'plain text (remove HTML tags)'} format. 3. If you cannot understand the user's command, prepend "[ERROR]: " to the returned content. 4. Do not return any other unnecessary content.`,
      },
      {
        role: 'user',
        content: `Perform the following operation: [${command}].\n${input}`,
      },
    ],
  }
  const completion = await client.chat.completions.create(options)
  const stream = new ReadableStream({
    async start(controller) {
      for await (const chunk of completion) {
        controller.enqueue(chunk.choices[0]?.delta?.content || '')
      }
      controller.close()
    },
  })
  return stream
}
 
const options = {
  ai: {
    assistant: {
      onMessage,
    },
  },
};
 
app.use(useUmoEditor, options)

<template>
  <umo-editor 
    v-bind="options"
  />
</template>
 
<script setup>
import { UmoEditor } from '@umoteam/editor'
import OpenAI from 'openai'
 
const onMessage = async (payload, content) => {
  console.log(payload, content)
  const { command, lang, input, output } = payload
  const client = new OpenAI({
    baseURL: '...',
    apiKey: '...',
    dangerouslyAllowBrowser: true, // Allow using OpenAI SDK in the browser
  })
  const langs = {
    'en-US': 'English',
    'zh-CN': 'Chinese',
  }
  const options = {
    stream: true,
    model: '...',
    messages: [
      {
        role: 'system',
        content: `You are a document assistant. Based on the user's input text or HTML content and the corresponding operation command, generate document content that meets the requirements. Requirements: 1. If the command does not require translation, return in ${langs[lang]}; otherwise, return in the language specified by the user. 2. Return in ${output === 'rich-text' ? 'rich-text (HTML)' : 'plain text (remove HTML tags)'} format. 3. If you cannot understand the user's command, prepend "[ERROR]: " to the returned content. 4. Do not return any other unnecessary content.`,
      },
      {
        role: 'user',
        content: `Perform the following operation: [${command}].\n${input}`,
      },
    ],
  }
  const completion = await client.chat.completions.create(options)
  const stream = new ReadableStream({
    async start(controller) {
      for await (const chunk of completion) {
        controller.enqueue(chunk.choices[0]?.delta?.content || '')
      }
      controller.close()
    },
  })
  return stream
}
 
const options = {
  ai: {
    assistant: {
      onMessage,
    },
  },
}
</script>