fully working + dark / light theme + basic UX

pwa-builder · May 30, 2024 · 542c8a8 · 542c8a8
1 parent 1ff58e1
commit 542c8a8
Show file tree

Hide file tree

Showing 5 changed files with 116 additions and 22 deletions.
diff --git a/index.html b/index.html
@@ -29,13 +29,6 @@
   <!-- Imports the manifest to represent the web application. A web app must have a manifest to be a PWA. -->
   <link rel="manifest" href="manifest.json" />
 
-  <!-- light mode and dark mode CSS -->
-  <link rel="stylesheet" media="(prefers-color-scheme:light)"
-    href="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/dist/themes/light.css">
-  <link rel="stylesheet" media="(prefers-color-scheme:dark)"
-    href="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/dist/themes/dark.css"
-    onload="document.documentElement.classList.add('sl-theme-dark');">
-
   <script type="module" src="/src/app-index.ts"></script>
 </head>
 

diff --git a/src/app-index.ts b/src/app-index.ts
@@ -9,8 +9,9 @@ import { router } from './router';
 import { setTheme } from '@fluentui/web-components';
 import { webLightTheme, webDarkTheme } from '@fluentui/tokens';
 
-const themeCheck = window.matchMedia('(prefers-color-scheme: dark)');
-setTheme(themeCheck.matches ? webDarkTheme : webLightTheme);
+const themeCheck = window.matchMedia('(prefers-color-scheme: dark)').matches ? "dark" : "light";
+console.log("themeCheck", themeCheck)
+setTheme(themeCheck === "dark" ? webDarkTheme : webLightTheme);
 
 @customElement('app-index')
 export class AppIndex extends LitElement {

diff --git a/src/components/header.ts b/src/components/header.ts
@@ -5,7 +5,7 @@ import { resolveRouterPath } from '../router';
 import '@shoelace-style/shoelace/dist/components/button/button.js';
 @customElement('app-header')
 export class AppHeader extends LitElement {
-  @property({ type: String }) title = 'PWA Whisper Starter';
+  @property({ type: String }) title = 'Phi3 PWA';
 
   @property({ type: Boolean}) enableBack: boolean = false;
 
@@ -32,6 +32,7 @@ export class AppHeader extends LitElement {
       margin-bottom: 0;
       font-size: 12px;
       font-weight: bold;
+      color: black;
     }
 
     nav a {
@@ -45,9 +46,9 @@ export class AppHeader extends LitElement {
       gap: 8px;
     }
 
-    @media(prefers-color-scheme: light) {
+    @media(prefers-color-scheme: dark) {
       header h1 {
-        color: black;
+        color: white;
       }
     }
   `;

diff --git a/src/pages/app-home.ts b/src/pages/app-home.ts
@@ -3,10 +3,13 @@ import { property, state, customElement } from 'lit/decorators.js';
 
 import '@fluentui/web-components/button.js';
 import '@fluentui/web-components/text-input.js';
+import '@fluentui/web-components/text.js';
 import '@fluentui/web-components/label.js';
 
 import { styles } from '../styles/shared-styles';
 
+import {classMap} from 'lit/directives/class-map.js';
+
 @customElement('app-home')
 export class AppHome extends LitElement {
 
@@ -17,7 +20,7 @@ export class AppHome extends LitElement {
   @state() previousMessages: any[] = [];
   @state() loaded: boolean = false;
 
-  query: string = "";
+  @state() query: string | undefined = undefined;
 
   static styles = [
     styles,
@@ -26,6 +29,9 @@ export class AppHome extends LitElement {
         display: flex;
         flex-direction: column;
         gap: 8px;
+
+        height: -webkit-fill-available;
+        justify-content: space-between;
       }
 
       fluent-button svg {
@@ -34,10 +40,42 @@ export class AppHome extends LitElement {
       }
 
       fluent-text {
-        min-height: 50vh;
-        background: #ffffff12;
         border-radius: 4px;
         padding: 8px;
+        display: block;
+        color: white;
+        background: #292929;
+        min-height: 40px;
+        display: flex;
+        align-items: center;
+      }
+
+      fluent-text-input {
+        flex: 1;
+        max-width: unset;
+      }
+
+      fluent-text-input::part(root) {
+        background: #292929;
+      }
+
+      ul {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        gap: 8px;
+        flex-direction: column;
+        max-height: -webkit-fill-available;
+      }
+
+      li {
+        margin-right: 50vw;
+      }
+
+      li.assistant {
+        margin-left: 50vw;
+        margin-right: unset;
       }
 
       #actions-menu {
@@ -81,9 +119,21 @@ export class AppHome extends LitElement {
         flex-direction: column;
       }
 
+      #toolbar {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 28px;
+      }
+
       @media(prefers-color-scheme: light) {
         fluent-text {
-          background: #f0f0f0;
+          background: white;
+          color: black;
+        }
+
+        fluent-text-input::part(root) {
+          background: white;
         }
       }
 
@@ -107,12 +157,51 @@ export class AppHome extends LitElement {
 
       this.loaded = true;
     }
+
+    //set up to listen for the enter button
+    window.addEventListener("keydown", (e) => {
+      if (e.key === "Enter") {
+        if (this.query && this.query.length > 0) {
+          this.sendMessage();
+        }
+      }
+    });
   }
 
   async sendMessage() {
+    this.previousMessages = [
+      ...this.previousMessages,
+      {
+        type: "user",
+        content: this.query || ""
+      }
+    ];
+
+    // make copy to use below
+    let origQuery = this.query
+
+    // reset this.query
+    this.query = undefined;
+
+
+    let completeMessage = "";
+
+    this.previousMessages = [
+      ...this.previousMessages,
+      {
+        type: "assistant",
+        content: ""
+      }
+    ];
+
     const { Query } = await import('../services/phi');
-    Query(false, this.query, (message: string) => {
+    await Query(false, origQuery, (message: string) => {
       console.log("Message received: ", message);
+      completeMessage = message;
+
+      // update last previous message.content
+      this.previousMessages[this.previousMessages.length - 1].content = completeMessage;
+      this.requestUpdate();
     });
   }
 
@@ -139,15 +228,17 @@ export class AppHome extends LitElement {
       <main>
 
         <ul>
-          ${
-            this.previousMessages.length > 0 ?
-            this.previousMessages.map((message: string) => html``) : null
+          ${this.previousMessages.length > 0 ?
+            this.previousMessages.map((message) => html`
+              <li class=${classMap({assistant: message.type === "assistant"})}>
+                <fluent-text>${message.content}</fluent-text>
+              </li>
+            `) : null
           }
         </ul>
 
         <div id="toolbar">
-          <fluent-text-input @change="${($event: any) => this.handleInputChange($event.target.value)}" ?disabled=${this.loaded === false}>
-            <fluent-label>Why is the sky blue?</fluent-label>
+          <fluent-text-input appearance="filled-lighter" @change="${($event: any) => this.handleInputChange($event.target.value)}" .value="${this.query || ""}" ?disabled=${this.loaded === false}>
           </fluent-text-input>
 
           <fluent-button @click="${this.sendMessage}" ?disabled=${this.loaded === false} appearance="primary">

diff --git a/src/styles/global.css b/src/styles/global.css
@@ -15,4 +15,12 @@ html, body {
   height: 100%;
 
   overflow-y: hidden;
+
+  background: #8080800d;
+}
+
+@media(prefers-color-scheme: dark) {
+  html, body {
+    background: #1b1b1b;
+  }
 }