convert ai response with markdown convert

Author: eric2788

package.json

@@ -36,6 +36,7 @@
     "dexie-react-hooks": "^1.1.7",
     "hash-wasm": "^4.11.0",
     "hls.js": "^1.5.8",
+    "markdown-to-jsx": "^7.5.0",
     "media-chrome": "^2.2.5",
     "mpegts.js": "^1.7.3",
     "n-danmaku": "^2.2.1",

pnpm-lock.yaml

@@ -27,7 +27,7 @@ function ChatBubble(props: ChatBubbleProps): JSX.Element {
                 {messages.map((message, index) => (
                     <div key={index} className="max-w-full grid">
                         <div data-testid={`${name}-bubble-chat-${index}`} className="px-3.5 py-2 bg-gray-100 rounded justify-start items-center gap-3 inline-flex">
-                            <h5 className={`text-gray-900 text-sm font-normal leading-snug ${loading ? 'animate-pulse' : ''}`}>{message.text}</h5>
+                            <div className={`text-gray-900 text-sm font-normal leading-snug list-inside ${loading ? 'animate-pulse' : ''}`}>{message.text}</div>
                         </div>
                         {message.time && (
                             <div data-testid={`${name}-bubble-time-${index}`} className="justify-end items-center inline-flex mb-2.5">

src/components/ChatBubble.tsx

@@ -1,9 +1,9 @@
 import { useCallback, useRef } from "react";
 
-export function useFileInput(onFileChange: (files: FileList) => Promise<void>, onError?: (e: Error | any) => void, deps: any[] = []){
+export function useFileInput(onFileChange: (files: FileList) => Promise<void>, onError?: (e: Error | any) => void, deps: any[] = []) {
 
     const inputRef = useRef<HTMLInputElement>()
-    const selectFiles = useCallback(function(): Promise<void> {
+    const selectFiles = useCallback(function (): Promise<void> {
         return new Promise((resolve, reject) => {
             const listener = async (e: Event) => {
                 try {

src/hooks/input.ts src/hooks/form.ts

@@ -19,6 +19,8 @@ export default class CloudFlareAI implements LLMProviders {
         this.model = settings.model || CloudFlareAI.DEFAULT_MODEL
     }
 
+    cumulative: boolean = true
+
     async validate(): Promise<void> {
         const success = await validateAIToken(this.accountId, this.apiToken, this.model)
         if (typeof success === 'boolean' && !success) throw new Error('Cloudflare API 验证失败')

src/llms/cloudflare-ai.ts

@@ -2,6 +2,8 @@ import type { LLMProviders, Session } from "~llms"
 
 export default class GeminiNano implements LLMProviders {
 
+    cumulative: boolean = false
+
     async validate(): Promise<void> {
         if (!window.ai) throw new Error('你的浏览器没有启用 AI 功能')
         if (!window.ai.languageModel &&
@@ -13,43 +15,52 @@ export default class GeminiNano implements LLMProviders {
     async prompt(chat: string): Promise<string> {
         const session = await this.asSession()
         try {
+            console.debug('[gemini nano] prompting: ', chat)
             return session.prompt(chat)
         } finally {
+            console.debug('[gemini nano] done')
             session[Symbol.dispose]()
         }
     }
 
     async *promptStream(chat: string): AsyncGenerator<string> {
         const session = await this.asSession()
         try {
-            return session.promptStream(chat)
+            console.debug('[gemini nano] prompting stream: ', chat)
+            const res = session.promptStream(chat)
+            for await (const chunk of res) {
+                yield chunk
+            }
         } finally {
+            console.debug('[gemini nano] done')
             session[Symbol.dispose]()
         }
     }
 
     async asSession(): Promise<Session<LLMProviders>> {
 
-        if (window.ai.assistant || window.ai.languageModel) {
-            const assistant = window.ai.assistant ?? window.ai.languageModel
-            const capabilities = await assistant.capabilities()
-            if (capabilities.available === 'readily') {
-                return new GeminiAssistant(await assistant.create())
-            } else {
-                console.warn('AI Assistant 当前不可用: ', capabilities)
-            }
-        } 
-        
         if (window.ai.summarizer) {
             const summarizer = window.ai.summarizer
             const capabilities = await summarizer.capabilities()
             if (capabilities.available === 'readily') {
+                console.debug('using gemini summarizer')
                 return new GeminiSummarizer(await summarizer.create())
             } else {
                 console.warn('AI Summarizer 当前不可用: ', capabilities)
             }
         } 
 
+        if (window.ai.assistant || window.ai.languageModel) {
+            const assistant = window.ai.assistant ?? window.ai.languageModel
+            const capabilities = await assistant.capabilities()
+            if (capabilities.available === 'readily') {
+                console.debug('using gemini assistant')
+                return new GeminiAssistant(await assistant.create())
+            } else {
+                console.warn('AI Assistant 当前不可用: ', capabilities)
+            }
+        } 
+
         throw new Error('你的浏览器 AI 功能当前不可用')
     }
 }
@@ -59,10 +70,12 @@ class GeminiAssistant implements Session<LLMProviders> {
     constructor(private readonly assistant: AIAssistant) { }
 
     prompt(chat: string): Promise<string> {
+        console.debug('[assistant] prompting: ', chat)
         return this.assistant.prompt(chat)
     }
 
     async *promptStream(chat: string): AsyncGenerator<string> {
+        console.debug('[assistant] prompting stream: ', chat)
         const stream = this.assistant.promptStreaming(chat)
         for await (const chunk of stream) {
             yield chunk
@@ -80,10 +93,12 @@ class GeminiSummarizer implements Session<LLMProviders> {
     constructor(private readonly summarizer: AISummarizer) { }
 
     prompt(chat: string): Promise<string> {
+        console.debug('[summarizer] summarizing: ', chat)
         return this.summarizer.summarize(chat)
     }
 
     async *promptStream(chat: string): AsyncGenerator<string> {
+        console.debug('[summarizer] summarizing stream: ', chat)
         const stream = this.summarizer.summarizeStreaming(chat)
         for await (const chunk of stream) {
             yield chunk

src/llms/gemini-nano.ts

@@ -5,13 +5,14 @@ import nano from './gemini-nano'
 import worker from './remote-worker'
 
 export interface LLMProviders {
+    cumulative: boolean
     validate(): Promise<void>
     prompt(chat: string): Promise<string>
     promptStream(chat: string): AsyncGenerator<string>
     asSession(): Promise<Session<LLMProviders>>
 }
 
-export type Session<T> = Disposable & Omit<T, 'asSession' | 'validate'>
+export type Session<T> = Disposable & Omit<T, 'asSession' | 'validate' | 'cumulative'>
 
 const llms = {
     cloudflare,

src/llms/index.ts

@@ -11,6 +11,8 @@ export default class RemoteWorker implements LLMProviders {
         this.model = settings.model || undefined
     }
 
+    cumulative: boolean = true
+
     async validate(): Promise<void> {
         const res = await fetch('https://llm.ericlamm.xyz/status')
         const json = await res.json()
@@ -55,5 +57,5 @@ export default class RemoteWorker implements LLMProviders {
             [Symbol.dispose]: () => { }
         }
     }
-    
+
 }

src/llms/remote-worker.ts

@@ -1,5 +1,5 @@
 import { Button, Input, Tooltip, Typography } from "@material-tailwind/react"
-import { Fragment, useState, type ChangeEvent } from "react"
+import { Fragment, useState, type ChangeEvent, type ReactNode } from "react"
 import { toast } from "sonner/dist"
 import type { StateProxy } from "~hooks/binding"
 import type { LLMTypes } from "~llms"
@@ -29,6 +29,29 @@ export const description = [
     '技术提供默认为公共的服务器，质量可能不稳定，建议设置为 Cloudflare 作为技术提供来源。'
 ]
 
+
+function Hints({ children }: { children: ReactNode }): JSX.Element {
+    return (
+        <Typography
+            className="flex items-center gap-1 font-normal dark:text-gray-200 col-span-2"
+        >
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="currentColor"
+                className="-mt-px h-6 w-6"
+            >
+                <path
+                    fillRule="evenodd"
+                    d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 01.67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 11-.671-1.34l.041-.022zM12 9a.75.75 0 100-1.5.75.75 0 000 1.5z"
+                    clipRule="evenodd"
+                />
+            </svg>
+            {children}
+        </Typography>
+    )
+}
+
 function LLMSettings({ state, useHandler }: StateProxy<SettingSchema>): JSX.Element {
 
     const [validating, setValidating] = useState(false)
@@ -63,24 +86,10 @@ function LLMSettings({ state, useHandler }: StateProxy<SettingSchema>): JSX.Elem
             />
             {state.provider === 'cloudflare' && (
                 <Fragment>
-                    <Typography
-                        className="flex items-center gap-1 font-normal dark:text-gray-200 col-span-2"
-                    >
-                        <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            viewBox="0 0 24 24"
-                            fill="currentColor"
-                            className="-mt-px h-6 w-6"
-                        >
-                            <path
-                                fillRule="evenodd"
-                                d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 01.67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 11-.671-1.34l.041-.022zM12 9a.75.75 0 100-1.5.75.75 0 000 1.5z"
-                                clipRule="evenodd"
-                            />
-                        </svg>
+                    <Hints>
                         <Typography className="underline" as="a" href="https://linux.do/t/topic/34037" target="_blank">点击此处</Typography>
                         查看如何获得 Cloudflare API Token 和 Account ID
-                    </Typography>
+                    </Hints>
                     <Input
                         data-testid="cf-account-id"
                         crossOrigin="anonymous"
@@ -113,9 +122,15 @@ function LLMSettings({ state, useHandler }: StateProxy<SettingSchema>): JSX.Elem
                         { label: '@cf/qwen/qwen1.5-1.8b-chat', value: '@cf/qwen/qwen1.5-1.8b-chat' },
                         { label: '@hf/google/gemma-7b-it', value: '@hf/google/gemma-7b-it' },
                         { label: '@hf/nousresearch/hermes-2-pro-mistral-7b', value: '@hf/nousresearch/hermes-2-pro-mistral-7b' }
-                    ]}   
+                    ]}
                 />
             )}
+            {state.provider === 'nano' && (
+                <Hints>
+                    <Typography className="underline" as="a" href="https://juejin.cn/post/7401036139384143910" target="_blank">点击此处</Typography>
+                    查看如何启用 Chrome 浏览器内置 AI
+                </Hints>
+            )}
             <div className="col-span-2">
                 <Button disabled={validating} onClick={onValidate} color="blue" size="lg" className="group flex items-center justify-center gap-3 text-[1rem] hover:shadow-lg">
                     验证是否可用

src/options/fragments/llm.tsx

@@ -17,7 +17,7 @@ import { toast } from 'sonner/dist';
 import PromiseHandler from '~components/PromiseHandler';
 import Tutorial, { type TutorialRefProps, type TutorialStep } from '~components/Tutorial';
 import GenericContext from '~contexts/GenericContext';
-import { useFileInput } from '~hooks/input';
+import { useFileInput } from '~hooks/form';
 import { useStorageWatch } from '~hooks/storage';
 import { getMV2Settings, removeAllMV2Settings } from '~migrations';
 import injectToaster from '~toaster';

src/options/index.tsx

@@ -4,9 +4,13 @@
 @tailwind components;
 @tailwind utilities;
 
-
-* {
-    font-family: Microsoft JhengHei;
+@layer base {
+    ul, ol, menu {
+        list-style: revert;
+    }
+    * {
+        font-family: Microsoft JhengHei;
+    }
 }