feat: Support AI search

Author: mantou132

packages/webapp/cf/index.ts

@@ -135,17 +135,17 @@ export default {
           });
         }
         const q = params.get('q') || '';
+        const l = params.get('l') || req.headers.get('Accept-Language') || 'en';
         const [values] = await embedding(env.AI, [q]);
         const res = await env.GAMES_SEARCH.query(values, { returnMetadata: true });
         const messages = [
           {
             role: 'system',
             content: `You are an application assistant.
-Response user input based on the context and your existing knowledge.
 
 Requirements:
-1. Language: respond in (${req.headers.get('Accept-Language') ?? 'en'}).
-2. Maximum 1000 words.
+1. Respond briefly to user input based on context.
+2. Language: respond in (${l}).
 
 Context:
 ${res.matches.map((e) => (e.metadata as any).text).join('\n\n---\n\n')}

packages/webapp/src/modules/search.ts

@@ -18,6 +18,7 @@ import type { DuoyunOptionsElement, Option } from 'duoyun-ui/elements/options';
 import { createPath } from 'duoyun-ui/elements/route';
 import { getDisplayKey, hotkeys, isMac } from 'duoyun-ui/lib/hotkeys';
 import { locale } from 'duoyun-ui/lib/locale';
+import { debounce } from 'duoyun-ui/lib/timer';
 import { isNotNullish } from 'duoyun-ui/lib/types';
 import { isIncludesString } from 'duoyun-ui/lib/utils';
 import { configure, getShortcut, SearchCommand, setSearchCommand, toggleSearchState } from 'src/configure';
@@ -36,8 +37,7 @@ import 'duoyun-ui/elements/list';
 import 'duoyun-ui/elements/options';
 import 'duoyun-ui/elements/paragraph';
 import 'duoyun-ui/elements/space';
-
-import { debounce } from 'duoyun-ui/lib/timer';
+import 'src/modules/sse';
 
 const style = css`
   :scope {
@@ -224,7 +224,7 @@ export class MSearchElement extends GemElement {
   };
 
   #genHelpOptions = (): Option[] => {
-    return this.#helpMessages
+    const result = this.#helpMessages
       .map((value) => {
         if (!this.#matchSearch(value)) return;
         const [title, desc] = value.split('\n');
@@ -244,6 +244,13 @@ export class MSearchElement extends GemElement {
         };
       })
       .filter(isNotNullish);
+    return result.length
+      ? result
+      : [
+          {
+            label: html`<m-sse prompt=${this.#state.search}></m-sse>`,
+          },
+        ];
   };
 
   #genFriendOptions = (): Option[] => {
@@ -395,6 +402,25 @@ export class MSearchElement extends GemElement {
       });
     }
 
+    const placeholder = getTempText(
+      i18n.get(
+        configure.searchCommand === SearchCommand.HELP
+          ? 'tooltip.docs.help'
+          : configure.searchCommand === SearchCommand.SELECT_GAME
+            ? 'tooltip.game.change'
+            : this.#isRooms
+              ? 'placeholder.roomSearch'
+              : configure.user?.playing
+                ? 'placeholder.searchPlaying'
+                : 'placeholder.search',
+        configure.searchCommand === SearchCommand.HELP
+          ? getShortcut('OPEN_SEARCH', true)
+          : configure.searchCommand === SearchCommand.SELECT_GAME
+            ? ''
+            : getShortcut('OPEN_SEARCH', true),
+      ),
+    );
+
     return html`
       <div class="input-wrap">
         <dy-input
@@ -405,24 +431,7 @@ export class MSearchElement extends GemElement {
           .icon=${this.#getSearchCommandIcon(configure.searchCommand)}
           @change=${this.#onChange}
           @keydown=${this.#onKeydownInput}
-          placeholder=${getTempText(
-            i18n.get(
-              configure.searchCommand === SearchCommand.HELP
-                ? 'tooltip.docs.help'
-                : configure.searchCommand === SearchCommand.SELECT_GAME
-                  ? 'tooltip.game.change'
-                  : this.#isRooms
-                    ? 'placeholder.roomSearch'
-                    : configure.user?.playing
-                      ? 'placeholder.searchPlaying'
-                      : 'placeholder.search',
-              configure.searchCommand === SearchCommand.HELP
-                ? getShortcut('OPEN_SEARCH', true)
-                : configure.searchCommand === SearchCommand.SELECT_GAME
-                  ? ''
-                  : getShortcut('OPEN_SEARCH', true),
-            ),
-          )}
+          placeholder=${placeholder}
         ></dy-input>
       </div>
       <div class="result">

packages/webapp/src/modules/sse.ts

@@ -0,0 +1,56 @@
+import { adoptedStyle, attribute, createState, css, customElement, effect, GemElement, html } from '@mantou/gem';
+import { marked } from 'marked';
+import { eventStream } from 'src/services';
+
+import 'duoyun-ui/elements/unsafe';
+
+import { i18n } from 'src/i18n/basic';
+
+const style = css`
+  :scope {
+    display: block;
+    white-space: normal;
+  }
+`;
+
+const contentStyle = css`
+  :host > :first-child {
+    margin-top: 0;
+  }
+  :host > :last-child {
+    margin-bottom: 0;
+  }
+`;
+
+@customElement('m-sse')
+@adoptedStyle(style)
+export class MSeeElement extends GemElement {
+  @attribute prompt: string;
+
+  #state = createState({ md: '' });
+
+  #control = new AbortController();
+
+  @effect((i) => [i.prompt])
+  #req = () => {
+    const initMd = 'Thinking...';
+    this.#state({ md: initMd });
+    const timer = setTimeout(async () => {
+      const url = `https://nesbox.709922234.workers.dev/completions?${new URLSearchParams({ q: this.prompt, l: i18n.currentLanguage })}`;
+      const iter = eventStream(url, { signal: this.#control.signal });
+      for await (const chunk of iter) {
+        const append = chunk.choices?.at(0)?.delta?.content ?? '';
+        this.#state({ md: (this.#state.md === initMd ? '' : this.#state.md) + append });
+      }
+    }, 2000);
+    return () => {
+      clearTimeout(timer);
+      this.#control.abort();
+      this.#control = new AbortController();
+    };
+  };
+
+  render = () => {
+    return html`<dy-unsafe html=${marked.parse(this.#state.md)} .styles=${contentStyle}></dy-unsafe>`;
+  };
+}