feat: add user service

Author: sinedied

packages/agent-webapp/index.html

@@ -13,6 +13,9 @@
       <img src="/favicon.png" alt="" />
       Contoso Burgers AI Agent
       <div class="spacer"></div>
+      <azc-auth type="guard">
+        <a href="">Member card</a>
+      </azc-auth>
       <azc-auth type="status"></azc-auth>
     </nav>
     <main>
@@ -22,23 +25,9 @@
       </azc-auth>
     </main>
     <script type="module" src="/src/index.ts"></script>
-    <script>
-      // TODO: use userId from API
-      // Generate a unique ID and store it in local storage
-      const userId = localStorage.getItem('userId') || crypto.randomUUID();
-      localStorage.setItem('userId', userId);
-
-      window.chatHistory.userId = userId;
-      window.chatHistory.addEventListener('loadSession', (e) => {
-        const { id, messages } = e.detail;
-        window.chat.sessionId = id;
-        window.chat.messages = messages;
-      });
-
-      window.chat.userId = userId;
-      window.chat.addEventListener('messagesUpdated', () => {
-        window.chatHistory.refresh();
-      });
+    <script type="module">
+      import { initUserSession } from '/src/index.ts';
+      await initUserSession();
     </script>
   </body>
 </html>

packages/agent-webapp/src/api.ts renamed to packages/agent-webapp/src/api.service.ts

@@ -26,7 +26,3 @@ export async function* getCompletion(options: ChatRequestOptions) {
     });
   }
 }
-
-export function getCitationUrl(citation: string): string {
-  return `${apiBaseUrl}/api/documents/${citation}`;
-}

packages/agent-webapp/src/components/auth.ts

@@ -79,7 +79,7 @@ export const authDefaultOptions: AuthComponentOptions = {
   ],
 };
 
-export type AuthButtonType = 'status' | 'login' | 'logout';
+export type AuthButtonType = 'status' | 'login' | 'logout' | 'guard';
 
 @customElement('azc-auth')
 export class AuthComponent extends LitElement {
@@ -131,6 +131,8 @@ export class AuthComponent extends LitElement {
         : nothing}
     </section>`;
 
+  protected renderGuard = () => (Boolean(this.loaded) ? html`<slot></slot>` : nothing);
+
   protected renderLogin = () =>
     !this.loaded
       ? html`<slot name="loader"></slot>`
@@ -177,6 +179,8 @@ export class AuthComponent extends LitElement {
     switch (this.type) {
       case 'status':
         return this.renderStatus();
+      case 'guard':
+        return this.renderGuard();
       case 'logout':
         return this.renderLogout();
       default:

packages/agent-webapp/src/components/card.ts

@@ -10,22 +10,22 @@ export const apiBaseUrl: string =
 
 @customElement("register-user")
 export class RegisterUser extends LitElement {
-  @state() protected accessToken: string = "";
+  @state() protected userId: string = "";
   @state() protected isLoading = false;
   @state() protected hasError = false;
   @state() protected username: string = "";
 
   constructor() {
     super();
-    this.getAccessToken();
+    this.getUserId();
   }
 
   protected renderLoading = () => html`<p>Loading...</p>`;
 
   protected copyUserIdToClipboard = async () => {
-    if (this.accessToken) {
+    if (this.userId) {
       try {
-        await navigator.clipboard.writeText(this.accessToken);
+        await navigator.clipboard.writeText(this.userId);
         // Select the user-id text
         const pre = this.renderRoot.querySelector(".user-id");
         if (pre) {
@@ -61,7 +61,7 @@ export class RegisterUser extends LitElement {
         <div><pre>${this.username}</pre></div>
         <p>Unique user ID:</p>
         <div class="user-id-row">
-          <pre class="user-id">${this.accessToken}</pre>
+          <pre class="user-id">${this.userId}</pre>
           <button
             class="copy-button"
             @click="${this.copyUserIdToClipboard}"
@@ -79,22 +79,22 @@ export class RegisterUser extends LitElement {
     </div>
   `;
 
-  protected getAccessToken = async () => {
+  protected getUserId = async () => {
     this.isLoading = true;
     this.hasError = false;
     try {
       const authDetails = await getUserInfo();
       if (!authDetails) return;
       this.username = authDetails.userDetails;
 
-      const response = await fetch(`${apiBaseUrl}/api/me/access-token`);
+      const response = await fetch(`${apiBaseUrl}/me`);
       if (!response.ok) {
-        throw new Error("An error occurred while fetching the access token");
+        throw new Error("An error occurred while fetching the user ID");
       }
       const data = await response.json();
-      this.accessToken = data.accessToken;
+      this.userId = data.userId;
     } catch (error) {
-      console.error("Error fetching access token:", error);
+      console.error("Error fetching user ID:", error);
       this.hasError = true;
     } finally {
       this.isLoading = false;
@@ -111,7 +111,7 @@ export class RegisterUser extends LitElement {
       : this.renderRegistrationCard();
   }
 
-  static styles = css`
+  static override styles = css`
     :host {
       max-width: 1280px;
       margin: 0 auto;

packages/agent-webapp/src/components/chat.ts

@@ -5,7 +5,7 @@ import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { customElement, property, state, query } from 'lit/decorators.js';
 import { AIChatCompletionDelta, AIChatMessage } from '@microsoft/ai-chat-protocol';
 import { DebugComponent } from './debug.js';
-import { type ChatRequestOptions, getCitationUrl, getCompletion } from '../api.js';
+import { type ChatRequestOptions, getCompletion } from '../api.service.js';
 import { type ParsedMessage, parseMessageIntoHtml } from '../message-parser.js';
 import sendSvg from '../../assets/icons/send.svg?raw';
 import questionSvg from '../../assets/icons/question.svg?raw';
@@ -258,14 +258,6 @@ export class ChatComponent extends LitElement {
           <azc-debug .message=${message}></azc-debug>
         </div>
         <div class="content">${message.html}</div>
-        ${message.citations.length > 0
-          ? html`
-              <div class="citations">
-                <div class="citations-title">${this.options.strings.citationsTitle}</div>
-                ${map(message.citations, this.renderCitation)}
-              </div>
-            `
-          : nothing}
       </div>
       <div class="message-role">
         ${message.role === 'user' ? this.options.strings.user : this.options.strings.assistant}
@@ -282,18 +274,6 @@ export class ChatComponent extends LitElement {
     </div>
   `;
 
-  protected renderCitation = (citation: string, index: number) =>
-    html`<button
-      class="citation"
-      @click=${() => {
-        this.onCitationClicked(citation);
-      }}
-    >
-      ${index + 1}. ${citation}
-    </button>`;
-
-  protected renderCitationReference = (_citation: string, index: number) => html`<sup>[${index}]</sup>`;
-
   protected renderFollowupQuestions = (questions: string[]) =>
     questions.length > 0
       ? html`
@@ -354,7 +334,7 @@ export class ChatComponent extends LitElement {
   `;
 
   protected override render() {
-    const parsedMessages = this.messages.map((message) => parseMessageIntoHtml(message, this.renderCitationReference));
+    const parsedMessages = this.messages.map((message) => parseMessageIntoHtml(message));
     return html`
       <section class="chat-container">
         ${this.options.enablePromptSuggestions &&

packages/agent-webapp/src/index.ts

@@ -1,4 +1,5 @@
-export * from './api.js';
+export * from './api.service.js';
+export * from './user.service.js';
 export * from './components/auth.js';
 export * from './components/chat.js';
 export * from './components/debug.js';

packages/agent-webapp/src/message-parser.ts

@@ -1,4 +1,4 @@
-import { type HTMLTemplateResult, html, nothing } from 'lit';
+import { type HTMLTemplateResult, html } from 'lit';
 import { AIChatMessage } from '@microsoft/ai-chat-protocol';
 
 export type ParsedMessage = {
@@ -9,10 +9,7 @@ export type ParsedMessage = {
   context?: object;
 };
 
-export function parseMessageIntoHtml(
-  message: AIChatMessage,
-  renderCitationReference: (citation: string, index: number) => HTMLTemplateResult,
-): ParsedMessage {
+export function parseMessageIntoHtml(message: AIChatMessage): ParsedMessage {
   if (message.role === 'user') {
     return {
       html: html`${message.content}`,
@@ -36,27 +33,7 @@ export function parseMessageIntoHtml(
     .trim();
 
   // Extract any citations that might be in the message
-  const parts = text.split(/\[([^\]]+)]/g);
-  const result = html`${parts.map((part, index) => {
-    if (index % 2 === 0) {
-      return html`${part}`;
-    }
-
-    if (index + 1 < parts.length) {
-      // Handle only completed citations
-      let citationIndex = citations.indexOf(part);
-      if (citationIndex === -1) {
-        citations.push(part);
-        citationIndex = citations.length;
-      } else {
-        citationIndex++;
-      }
-
-      return renderCitationReference(part, citationIndex);
-    }
-
-    return nothing;
-  })}`;
+  const result = html`${text}`;
 
   return {
     html: result,

packages/agent-webapp/src/styles.css

@@ -65,7 +65,8 @@ azc-chat {
   margin: 0 auto;
 }
 
-azc-auth[type='status'] {
+azc-auth[type] {
   font-size: 16px;
+  margin-left: 1em;
 }
 

packages/agent-webapp/src/user.service.ts

@@ -0,0 +1,43 @@
+declare global {
+  interface Window {
+    chatHistory: any;
+    chat: any;
+  }
+}
+
+let userId: string | undefined;
+
+export async function getUserId(refresh = false): Promise<string | undefined> {
+  if (userId && !refresh) {
+    return userId;
+  }
+  const response = await fetch(`/api/me`);
+  const payload = await response.json();
+  userId = payload?.id;
+  return userId;
+}
+
+export async function initUserSession() {
+  try {
+    const userId = await getUserId();
+    if (!userId) {
+      throw new Error('User not authenticated');
+    }
+
+    // Set up user ID for chat history and chat components
+    window.chatHistory.userId = userId;
+    window.chatHistory.addEventListener('loadSession', (e) => {
+      const { id, messages } = e.detail;
+      window.chat.sessionId = id;
+      window.chat.messages = messages;
+    });
+
+    window.chat.userId = userId;
+    window.chat.addEventListener('messagesUpdated', () => {
+      window.chatHistory.refresh();
+    });
+
+  } catch (error) {
+    console.log('Error initializing user session:', error);
+  }
+}