simple built_in ai chat bot for code support

SQUASHED: AUTO-COMMIT-demos-stefan-chrome-built-in-ai.js,AUTO-COMMIT-src-components-demo-ai-chat-chrome-built-in-ai.html,AUTO-COMMIT-src-components-demo-ai-chat-chrome-built-in-ai.js,AUTO-COMMIT-src-components-widgets-ubg-card.js,

demos/stefan/chrome-built-in-ai.js

@@ -1,29 +1,29 @@
 const LANGUAGE_DETECTOR_TOKEN = 'Av3bzQBWIWHR9KM7l38VcDX7wJkdFzXyTwfsfOQ4/fbEGUJ9m/ogcSX3jO/shp9ItNcrWfoF1GnD4YVaByNtjgwAAAByeyJvcmlnaW4iOiJodHRwczovL2xpdmVseS1rZXJuZWwub3JnOjQ0MyIsImZlYXR1cmUiOiJMYW5ndWFnZURldGVjdGlvbkFQSSIsImV4cGlyeSI6MTc0OTU5OTk5OSwiaXNTdWJkb21haW4iOnRydWV9';
 
-function addToken(token) {
-  const meta = document.createElement('meta');
-  meta.httpEquiv = 'origin-trial';
-  meta.content = token;
-  document.head.appendChild(meta);
-}
-
-function hasToken(token) {
-  const existingMetaTag = [...document.querySelectorAll('meta[http-equiv="origin-trial"]')]
+function ensureToken(token) {
+  function addToken(token) {
+    const meta = document.createElement('meta');
+    meta.httpEquiv = 'origin-trial';
+    meta.content = token;
+    document.head.appendChild(meta);
+  }
+
+  function hasToken(token) {
+    const existingMetaTag = [...document.querySelectorAll('meta[http-equiv="origin-trial"]')]
     .some(meta => meta.content === token);
-
-  if (existingMetaTag) {
-    // lively.notify(`Token "${token}" is already applied.`);
-    return
+
+    if (existingMetaTag) {
+      // lively.notify(`Token "${token}" is already applied.`);
+      return
+    }
+
+    const meta = document.createElement('meta');
+    meta.httpEquiv = 'origin-trial';
+    meta.content = token;
+    document.head.appendChild(meta);
+    // lively.notify(`Token "${token}" applied successfully.`);
   }
-
-  const meta = document.createElement('meta');
-  meta.httpEquiv = 'origin-trial';
-  meta.content = token;
-  document.head.appendChild(meta);
-  // lively.notify(`Token "${token}" applied successfully.`);
-}
-
-function ensureToken(token) {
+
   if (!hasToken(token)) {
     addToken(token)
   }

src/components/demo/ai-chat-chrome-built-in-ai.html

@@ -0,0 +1,118 @@
+<template id="ai-chat-chrome-built-in-ai" >
+  <style data-src="/src/external/font-awesome/css/font-awesome.css"></style>
+  <style data-src="/templates/livelystyle.css"></style>
+  <style>
+    #editor {
+      max-height: calc(100%);
+      flex: 1; 
+    }
+    #pane {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+    } 
+    #player {
+      float: right
+    }
+    #quality {
+      width: 80px;
+    }
+    #textInput {
+      padding:15px;
+      background-color:white;
+      border: 1px solid lightgray;
+      border-radius: 10px;
+      width: calc(100% - 100px);
+      bottom: 20px;
+      position: absolute;
+      margin-left: 35px;
+      margin-right: 35px
+    }
+    #recordButton {
+      padding:14px;
+      background-color: white;
+      border: 1px solid lightgray;
+      border-radius: 10px;
+      bottom: 15px;
+      position: absolute;
+      right: 35px;
+      background:transparent;
+      border:none;
+      font-size: 20px
+    }
+
+    :host(.recording)  #recordButton {
+      border: 4px solid red;
+    }
+
+
+    #resetButton {
+      border-radius: 100px
+    }
+
+    #buttonBar {
+      width: 100%;
+      border: 1px solid gray;
+
+    }
+
+    #responses {
+      list-style-type: none;
+      width: calc(100% - 50px);
+      height: calc(100% - 140px) ;
+      overflow-y: scroll;
+      top: 40px;
+      position: absolute;
+    }
+
+    #responses li.user, #responses li.system {
+      background: #F3F3F3;
+      border-radius: 10px;
+      padding: 2px;
+      padding-right: 10px;
+      padding-left: 10px;
+
+    }
+
+    #responses li.system {
+      background: aliceblue;
+    }
+
+    #responses li.assistant {
+    }
+
+    #pane {
+      height: 100%;
+      width: 100%;
+      position: absolute;
+      top: 0px;
+      left: 0px
+    }
+
+    #meta-data {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      font-size: small;
+      color: gray;
+    }
+  </style>
+  <div id="pane" style=" ">
+    <ul id="responses"></ul>
+    <div id="buttonBar">
+      <button id="resetButton">🔄</button>
+      <input-combobox id="voiceBox"></input-combobox>
+      <input-combobox id="modelBox"></input-combobox>
+      <audio id="player" controls="true"></audio>
+    </div>
+
+    <div id="textBar">
+      <textarea  id="textInput" type="text" placeholder="Message ChatGPT"></textarea>
+      <button id="recordButton">🎤</button>
+    </div>
+  </div>
+  <span id='meta-data'>
+    <span id="tokens-so-far"></span>/<span id="max-tokens"></span> (<span id="tokens-left"></span> left)
+  </span>
+</template>