fix(smart): add chat web component

xmlking · Dec 5, 2024 · 4719708 · 4719708
1 parent 1d3a4c5
commit 4719708
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 0 deletions.
diff --git a/apps/console/src/routes/(app)/ai/smart/+page.svelte b/apps/console/src/routes/(app)/ai/smart/+page.svelte
@@ -235,3 +235,6 @@ $: loadingState.setFormLoading($delayed);
     </DebugShell>
   </div>
 </div>
+
+<!--Smart-Chat-->
+<Smart.Chat />
diff --git a/packages/smart/src/components/chat.svelte b/packages/smart/src/components/chat.svelte
@@ -0,0 +1,92 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  onMount(() => {
+    // The page is ready.
+    console.log("chat mounted");
+    const assistant = document.querySelector("msc-ai-assistant");
+    assistant?.show(); // toggle(force)
+  });
+
+  const mappings = {
+    "front-end-expert": {
+      prompts:
+        "You are a front-end engineer and very good at CSS, HTML and JavaScript.",
+      subject: "AI Assistant (front-end)",
+    },
+    "top-sales": {
+      prompts:
+        "You are a top sales and very good at product consulting. You are also good at rewriting product information and make them more vivid.",
+      subject: "AI Assistant (top sales)",
+    },
+    translator: {
+      prompts:
+        "You are a translator and very good at translate English to Traditional Chinese or Traditional Chinese to English.",
+      subject: "AI Assistant (translator)",
+    },
+    writer: {
+      prompts:
+        "You are a writer and very good at rewriting article and make them more vivid.",
+      subject: "AI Assistant (writer)",
+    },
+    gamer: {
+      prompts:
+        "You are a gamer and very good at playing PC games and video games. You also know to all games' background and stories.",
+      subject: "AI Assistant (gamer)",
+    },
+    none: {
+      prompts: "",
+      subject: "AI Assistant",
+    },
+  };
+</script>
+
+<svelte:head>
+  <script
+    type="module"
+    src="https://unpkg.com/msc-ai-assistant/mjs/wc-msc-ai-assistant.js"
+  >
+  </script>
+</svelte:head>
+
+<msc-ai-assistant>
+  <script type="application/json">
+    {
+      "config": {
+        "systemPrompt": "You are a front-end engineer and very good at CSS, HTML and JavaScript.",
+        "temperature": 0.8,
+        "topK": 3
+      },
+      "l10n": {
+        "subject": "AI Assistant",
+        "placeholder": "Ask Gemini"
+      },
+      "pip": false
+    }
+  </script>
+</msc-ai-assistant>
+
+<style>
+  msc-ai-assistant {
+    /* main */
+    --msc-ai-assistant-inline-size: 400px;
+    --msc-ai-assistant-block-size: 600px;
+    /* --msc-ai-assistant-inset-inline-start: 16px; */
+    /* --msc-ai-assistant-inset-block-start: 16px; */
+    --msc-ai-assistant-inset-inline-start: calc(
+      100% - 16px - var(--msc-ai-assistant-inline-size)
+    );
+    --msc-ai-assistant-inset-block-start: : calc(100% - 16px -
+          var(--msc-ai-assistant-block-size));
+    --msc-ai-assistant-box-shadow: none;
+    --msc-ai-assistant-z-index: 1000;
+    --msc-ai-assistant-background-color: rgba(255 255 255);
+    --msc-ai-assistant-head-text-color: rgba(35 42 49);
+    --msc-ai-assistant-line-color: rgba(199 205 210);
+    --msc-ai-assistant-close-icon-color: rgba(95 99 104);
+    --msc-ai-assistant-close-hover-background-color: rgba(245 248 250);
+    --msc-ai-assistant-content-text-color: rgba(35 42 49);
+    --msc-ai-assistant-content-highlight-text-color: rgba(68 71 70);
+    --msc-ai-assistant-content-highlight-background-color: rgba(233 238 246);
+    --msc-ai-assistant-content-group-background-color: rgba(241 244 248);
+  }
+</style>
diff --git a/packages/smart/src/components/index.ts b/packages/smart/src/components/index.ts
@@ -10,6 +10,7 @@ import Textarea from './textarea.svelte';
 import Date from './date.svelte';
 import ComboBox from './combo-box.svelte';
 import Sentiment from './sentiment.svelte';
+import Chat from './chat.svelte';
 
 export {
   Stats,
@@ -20,6 +21,7 @@ export {
   Date,
   ComboBox,
   Sentiment,
+  Chat,
   //
   Stats as SmartStats,
   Settings as SmartSettings,
@@ -29,4 +31,5 @@ export {
   Date as SmartDate,
   ComboBox as SmartComboBox,
   Sentiment as SmartSentiment,
+  Chat as SmartChat,
 };
diff --git a/packages/smart/src/components/sentiment.svelte b/packages/smart/src/components/sentiment.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+// https://developer.chrome.com/docs/ai/product-reviews-on-device
 // TODO
 let review = 'This is a great product. I love it!';