⬆️ Use @web-dev-server instead of prpl server

- Refrain from using PRPL server, which is under maintenance.

package.json

@@ -23,7 +23,9 @@
     "types:check:tsc": "tsc --noEmit"
   },
   "dependencies": {
-    "@vaadin/router": "^1.7.5",
+    "@lit-labs/signals": "^0.1.1",
+    "@lit/context": "^1.1.3",
+    "@vaadin/router": "^2.0.0",
     "lit": "^2.7.1",
     "pwa-helper-components": "~0.2.10",
     "tslib": "^2.5.0"
@@ -34,7 +36,7 @@
     "@rollup/plugin-typescript": "^8.5.0",
     "@typescript-eslint/eslint-plugin": "^5.57.1",
     "@typescript-eslint/parser": "^5.57.1",
-    "@web/dev-server": "~0.1.37",
+    "@web/dev-server": "^0.4.6",
     "@web/dev-server-esbuild": "~0.3.5",
     "@web/dev-server-rollup": "~0.3.21",
     "@web/rollup-plugin-copy": "~0.3.0",
@@ -44,7 +46,7 @@
     "eslint-plugin-lit": "^1.8.2",
     "eslint-plugin-lit-a11y": "^2.4.0",
     "eslint-plugin-wc": "^1.4.0",
-    "lit-analyzer": "^1.2.1",
+    "lit-analyzer": "^2.0.3",
     "nano-staged": "^0.8.0",
     "npm-run-all": "^4.1.5",
     "picocolors": "^1.0.0",

src/components/app-index.ts

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { SignalWatcher } from '@lit-labs/signals';
 import { LitElement, html, css } from 'lit';
 import { customElement, query } from 'lit/decorators.js';
 
@@ -15,7 +16,7 @@ import 'pwa-helper-components/pwa-install-button.js';
 import 'pwa-helper-components/pwa-update-available.js';
 
 @customElement('app-index')
-export class AppIndex extends LitElement {
+export class AppIndex extends SignalWatcher(LitElement) {
   @query('main')
   private main!: HTMLElement;
 

src/components/network.ts

@@ -2,37 +2,45 @@
  * Network utilities for communicating with the backend server
  */
 
-const BASE_URL = 'https://druid.eecs.umich.edu';
+import { envSignal } from '../context/app-context.js';
+
+const BASE_URL = envSignal;
 const API_ENDPOINTS = {
   auth: `${BASE_URL}/auth`,
   nlip: `${BASE_URL}/nlip`,
   upload: `${BASE_URL}/upload`,
 };
 
-interface Message {
-  format: 'text' | 'binary';
-  subformat: string;
-  content: string;
-}
+type Format =
+  | 'text'
+  | 'binary'
+  | 'authentication'
+  | 'structured'
+  | 'location'
+  | 'generic';
+type Subformat = 'english' | 'jpeg' | 'jpg' | 'png' | 'gif' | 'bmp';
 
-interface NLIPRequest {
-  format: 'text';
-  subformat: string;
+interface Message {
+  format: Format;
+  subformat: Subformat;
   content: string;
   submessages?: Message[];
 }
 
 interface APIResponse {
-  response: string;
-  // Add other response fields if needed
+  format: Format;
+  subformat: Subformat;
+  content: string;
 }
 
 /**
  * Get authentication URL for a specific provider
  */
-export async function getAuthUrl(): Promise<string> {
+export async function getAuthUrl(
+  provider: 'google' | 'custom' = 'google'
+): Promise<string> {
   try {
-    const response = await fetch(API_ENDPOINTS.auth);
+    const response = await fetch(`${API_ENDPOINTS.auth}/${provider}`);
     if (!response.ok) {
       throw new Error(`HTTP error! status: ${response.status}`);
     }
@@ -48,7 +56,7 @@ export async function getAuthUrl(): Promise<string> {
  * Send a text message to the NLIP endpoint
  */
 export async function sendTextMessage(text: string): Promise<string> {
-  const request: NLIPRequest = {
+  const request: Message = {
     format: 'text',
     subformat: 'english',
     content: text,
@@ -68,7 +76,7 @@ export async function sendTextMessage(text: string): Promise<string> {
     }
 
     const data: APIResponse = await response.json();
-    return data.response;
+    return data.content;
   } catch (error) {
     console.error('Error sending text message:', error);
     throw error;
@@ -83,13 +91,19 @@ export async function sendImageMessage(
   base64Image: string,
   mimeType: string
 ): Promise<string> {
-  // Extract the image format from the MIME type (e.g., 'image/jpeg' -> 'jpeg')
-  const imageFormat = mimeType.split('/')[1];
+  const imageFormat = mimeType.split('/')[1].toLowerCase() as Subformat;
 
-  const request: NLIPRequest = {
+  // Validate image format
+  if (!['jpeg', 'jpg', 'png', 'gif', 'bmp'].includes(imageFormat)) {
+    throw new Error(
+      'Unsupported image format. Please use JPEG, PNG, GIF, or BMP.'
+    );
+  }
+
+  const request: Message = {
     format: 'text',
     subformat: 'english',
-    content: prompt || 'Describe this picture',
+    content: prompt || 'What do you see in this image?',
     submessages: [
       {
         format: 'binary',
@@ -113,7 +127,7 @@ export async function sendImageMessage(
     }
 
     const data: APIResponse = await response.json();
-    return data.response;
+    return data.content;
   } catch (error) {
     console.error('Error sending image message:', error);
     throw error;
@@ -138,7 +152,7 @@ export async function uploadFile(file: File): Promise<string> {
     }
 
     const data = await response.json();
-    return data.url; // Assuming the server returns the URL of the uploaded file
+    return data.url;
   } catch (error) {
     console.error('Error uploading file:', error);
     throw error;

src/context/app-context.ts

@@ -0,0 +1,46 @@
+import { createContext } from '@lit/context';
+import { signal } from '@lit-labs/signals';
+
+// Chat state interface
+export interface ChatState {
+  userPrompt: string;
+  aiResponse: string;
+  isLoading: boolean;
+}
+
+// Create chat state context
+export const chatContext = createContext<ChatState>('chat-state');
+
+// Create environment signal
+export const envSignal = signal('https://druid.eecs.umich.edu');
+
+// Chat state controller
+export class ChatStateController {
+  private state = signal<ChatState>({
+    userPrompt: '',
+    aiResponse: '',
+    isLoading: false,
+  });
+
+  get chatState(): ChatState {
+    return this.state.get();
+  }
+
+  updateState(updates: Partial<ChatState>) {
+    this.state.set({
+      ...this.state.get(),
+      ...updates,
+    });
+  }
+
+  resetState() {
+    this.state.set({
+      userPrompt: '',
+      aiResponse: '',
+      isLoading: false,
+    });
+  }
+}
+
+// Environment configuration
+export const SERVER_URL = 'https://druid.eecs.umich.edu';

src/env.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_NLIP_SERVER_URL: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

src/pages/page-chat.ts

@@ -5,13 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { SignalWatcher } from '@lit-labs/signals';
 import { html, css } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
 import { PageElement } from '../helpers/page-element.js';
 
 @customElement('page-chat')
-export class PageChat extends PageElement {
+export class PageChat extends SignalWatcher(PageElement) {
   @property({ type: String }) userPrompt = '';
   @property({ type: String }) aiResponse = '';
 
@@ -36,7 +37,7 @@ export class PageChat extends PageElement {
         height: calc(60px + env(safe-area-inset-bottom));
         padding-bottom: max(env(safe-area-inset-bottom), 0px);
       }
-    }    :host {
+    }        :host {
       display: block;
       min-height: 100vh;
       padding-bottom: 60px;