Any front end: React, Angular, Vue

dotnet add package Novior.MentorAgent.Server

<ItemGroup>
  <PackageReference Include="Novior.MentorAgent.Server" Version="1.0.0" />
</ItemGroup>

<ItemGroup>
  <PackageVersion Include="Novior.MentorAgent.Server" Version="1.0.0" />
</ItemGroup>

<ItemGroup>
  <PackageReference Include="Novior.MentorAgent.Server" />
</ItemGroup>

#:package Novior.MentorAgent.Server@1.0.0

import { useEffect, useRef, useState, type FormEvent } from 'react';
import * as signalR from '@microsoft/signalr';

export type MentorChatOptions = {
  baseUrl?: string;                           // the backend's origin, such as https://api.example.com
  getToken?: () => string | Promise<string>;  // the signed-in user's access token
};

type Message = { role: 'user' | 'assistant'; text: string };
type Confirmation = { actionId: string; message: string };

export function useMentorChat({ baseUrl = '', getToken }: MentorChatOptions = {}) {
  const connectionRef = useRef<signalR.HubConnection | null>(null);
  const [messages, setMessages] = useState<Message[]>([]);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState('');
  const [confirmation, setConfirmation] = useState<Confirmation | null>(null);

  useEffect(() => {
    let active = true;
    const connection = new signalR.HubConnectionBuilder()
      .withUrl(`${baseUrl}/mentor-hub`, { accessTokenFactory: getToken })
      .withAutomaticReconnect()
      .build();
    connection.on('StreamingChunk', (chunk: string) =>
      setMessages(list => [...list.slice(0, -1), { role: 'assistant', text: list[list.length - 1].text + chunk }]));
    connection.on('BusyChanged', (value: boolean) => setBusy(value));
    connection.on('Error', (message: string) => setError(message));
    connection.on('ConfirmationRequired', (actionId: string, _toolName: string, message: string) =>
      setConfirmation({ actionId, message }));

    // The next connection has no turn in progress: when this one drops, turn the input back on
    const idle = () => { if (active) { setBusy(false); setConfirmation(null); } };
    connection.onreconnecting(idle);
    connection.onclose(idle);

    connection.start().catch(e => active && setError(String(e)));
    connectionRef.current = connection;
    return () => {
      active = false;
      connection.stop();
    };
  }, [baseUrl, getToken]);

  async function headers(): Promise<HeadersInit> {
    const token = await getToken?.();
    return token ? { Authorization: `Bearer ${token}` } : {};
  }

  async function send(text: string) {
    setError('');
    setMessages(list => [...list, { role: 'user', text }, { role: 'assistant', text: '' }]);
    // Always two arguments: null for a message without images
    await connectionRef.current?.invoke('SendMessage', text, null).catch(e => setError(String(e)));
  }

  // Confirm and Stop go over HTTP: the hub runs one call at a time, and SendMessage is still running
  async function confirm(approved: boolean) {
    if (!confirmation) return;
    setConfirmation(null);
    const response = await fetch(`${baseUrl}/mentor/approve?actionId=${confirmation.actionId}&approved=${approved}`, {
      method: 'POST',
      headers: await headers(),
    });
    // 404: nothing waits for the answer any more (answered, stopped or disconnected), so there is nothing to report
    if (!response.ok && response.status !== 404) setError(`The confirmation was not accepted: HTTP ${response.status}`);
  }

  async function stop() {
    await fetch(`${baseUrl}/mentor/cancel?connectionId=${connectionRef.current?.connectionId}`, {
      method: 'POST',
      headers: await headers(),
    });
  }

  return { messages, busy, error, confirmation, send, confirm, stop };
}

export function MentorChat(options: MentorChatOptions) {
  const chat = useMentorChat(options);
  const [input, setInput] = useState('');

  function submit(event: FormEvent) {
    event.preventDefault();
    chat.send(input);
    setInput('');
  }

  return (
    <div className="mentor-chat">
      {chat.messages.map((m, i) => <p key={i} className={m.role}>{m.text}</p>)}
      {chat.error && <p role="alert">{chat.error}</p>}
      {chat.confirmation && (
        <div className="confirmation">
          <p>{chat.confirmation.message}</p>
          <button onClick={() => chat.confirm(true)}>Confirm</button>
          <button onClick={() => chat.confirm(false)}>Cancel</button>
        </div>
      )}
      <form onSubmit={submit}>
        <input value={input} onChange={e => setInput(e.target.value)} disabled={chat.busy} />
        {chat.busy
          ? <button type="button" onClick={chat.stop}>Stop</button>
          : <button type="submit" disabled={!input.trim()}>Send</button>}
      </form>
    </div>
  );
}

import { Injectable, InjectionToken, OnDestroy, inject, signal } from '@angular/core';
import * as signalR from '@microsoft/signalr';

export interface MentorChatOptions {
  baseUrl?: string;                           // the backend's origin, such as https://api.example.com
  getToken?: () => string | Promise<string>;  // the signed-in user's access token
}

export const MENTOR_CHAT_OPTIONS = new InjectionToken<MentorChatOptions>('MentorChatOptions', {
  factory: () => ({}),
});

type Message = { role: 'user' | 'assistant'; text: string };
type Confirmation = { actionId: string; message: string };

@Injectable({ providedIn: 'root' })
export class MentorChatService implements OnDestroy {
  private readonly options = inject(MENTOR_CHAT_OPTIONS);
  private readonly baseUrl = this.options.baseUrl ?? '';
  private readonly connection = new signalR.HubConnectionBuilder()
    .withUrl(`${this.baseUrl}/mentor-hub`, { accessTokenFactory: this.options.getToken })
    .withAutomaticReconnect()
    .build();

  readonly messages = signal<Message[]>([]);
  readonly busy = signal(false);
  readonly error = signal('');
  readonly confirmation = signal<Confirmation | null>(null);

  constructor() {
    this.connection.on('StreamingChunk', (chunk: string) =>
      this.messages.update(list => [...list.slice(0, -1), { role: 'assistant', text: list[list.length - 1].text + chunk }]));
    this.connection.on('BusyChanged', (value: boolean) => this.busy.set(value));
    this.connection.on('Error', (message: string) => this.error.set(message));
    this.connection.on('ConfirmationRequired', (actionId: string, _toolName: string, message: string) =>
      this.confirmation.set({ actionId, message }));

    // The next connection has no turn in progress: when this one drops, turn the input back on
    const idle = () => { this.busy.set(false); this.confirmation.set(null); };
    this.connection.onreconnecting(idle);
    this.connection.onclose(idle);

    this.connection.start().catch(e => this.error.set(String(e)));
  }

  async send(text: string) {
    this.error.set('');
    this.messages.update(list => [...list, { role: 'user', text }, { role: 'assistant', text: '' }]);
    // Always two arguments: null for a message without images
    await this.connection.invoke('SendMessage', text, null).catch(e => this.error.set(String(e)));
  }

  // Confirm and Stop go over HTTP: the hub runs one call at a time, and SendMessage is still running
  async confirm(approved: boolean) {
    const pending = this.confirmation();
    if (!pending) return;
    this.confirmation.set(null);
    const response = await fetch(`${this.baseUrl}/mentor/approve?actionId=${pending.actionId}&approved=${approved}`, {
      method: 'POST',
      headers: await this.headers(),
    });
    // 404: nothing waits for the answer any more (answered, stopped or disconnected), so there is nothing to report
    if (!response.ok && response.status !== 404) this.error.set(`The confirmation was not accepted: HTTP ${response.status}`);
  }

  async stop() {
    await fetch(`${this.baseUrl}/mentor/cancel?connectionId=${this.connection.connectionId}`, {
      method: 'POST',
      headers: await this.headers(),
    });
  }

  ngOnDestroy() {
    this.connection.stop();
  }

  private async headers(): Promise<HeadersInit> {
    const token = await this.options.getToken?.();
    return token ? { Authorization: `Bearer ${token}` } : {};
  }
}

import { Component, inject } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MentorChatService } from './mentor-chat.service';

@Component({
  selector: 'app-mentor-chat',
  standalone: true,
  imports: [FormsModule],
  template: `
    <div class="mentor-chat">
      @for (m of chat.messages(); track $index) {
        <p [class]="m.role" [textContent]="m.text"></p>
      }
      @if (chat.error()) {
        <p role="alert" [textContent]="chat.error()"></p>
      }
      @if (chat.confirmation(); as pending) {
        <div class="confirmation">
          <p [textContent]="pending.message"></p>
          <button (click)="chat.confirm(true)">Confirm</button>
          <button (click)="chat.confirm(false)">Cancel</button>
        </div>
      }
      <form (ngSubmit)="submit()">
        <input name="message" [(ngModel)]="input" [disabled]="chat.busy()" />
        @if (chat.busy()) {
          <button type="button" (click)="chat.stop()">Stop</button>
        } @else {
          <button type="submit" [disabled]="!input.trim()">Send</button>
        }
      </form>
    </div>
  `,
})
export class MentorChatComponent {
  protected readonly chat = inject(MentorChatService);
  protected input = '';

  protected submit() {
    this.chat.send(this.input);
    this.input = '';
  }
}

<script setup lang="ts">
import { onUnmounted, ref } from 'vue';
import * as signalR from '@microsoft/signalr';

const props = defineProps<{
  baseUrl?: string;                           // the backend's origin, such as https://api.example.com
  getToken?: () => string | Promise<string>;  // the signed-in user's access token
}>();
const baseUrl = props.baseUrl ?? '';

const messages = ref<{ role: 'user' | 'assistant'; text: string }[]>([]);
const busy = ref(false);
const error = ref('');
const confirmation = ref<{ actionId: string; message: string } | null>(null);
const input = ref('');

const connection = new signalR.HubConnectionBuilder()
  .withUrl(`${baseUrl}/mentor-hub`, { accessTokenFactory: props.getToken })
  .withAutomaticReconnect()
  .build();
connection.on('StreamingChunk', (chunk: string) => { messages.value[messages.value.length - 1].text += chunk; });
connection.on('BusyChanged', (value: boolean) => { busy.value = value; });
connection.on('Error', (message: string) => { error.value = message; });
connection.on('ConfirmationRequired', (actionId: string, _toolName: string, message: string) => {
  confirmation.value = { actionId, message };
});

// The next connection has no turn in progress: when this one drops, turn the input back on
const idle = () => { busy.value = false; confirmation.value = null; };
connection.onreconnecting(idle);
connection.onclose(idle);

connection.start().catch(e => { error.value = String(e); });
onUnmounted(() => connection.stop());

async function headers(): Promise<HeadersInit> {
  const token = await props.getToken?.();
  return token ? { Authorization: `Bearer ${token}` } : {};
}

async function submit() {
  const text = input.value;
  input.value = '';
  error.value = '';
  messages.value.push({ role: 'user', text }, { role: 'assistant', text: '' });
  // Always two arguments: null for a message without images
  await connection.invoke('SendMessage', text, null).catch(e => { error.value = String(e); });
}

// Confirm and Stop go over HTTP: the hub runs one call at a time, and SendMessage is still running
async function confirm(approved: boolean) {
  const pending = confirmation.value;
  if (!pending) return;
  confirmation.value = null;
  const response = await fetch(`${baseUrl}/mentor/approve?actionId=${pending.actionId}&approved=${approved}`, {
    method: 'POST',
    headers: await headers(),
  });
  // 404: nothing waits for the answer any more (answered, stopped or disconnected), so there is nothing to report
  if (!response.ok && response.status !== 404) error.value = `The confirmation was not accepted: HTTP ${response.status}`;
}

async function stop() {
  await fetch(`${baseUrl}/mentor/cancel?connectionId=${connection.connectionId}`, {
    method: 'POST',
    headers: await headers(),
  });
}
</script>

<template>
  <div class="mentor-chat">
    <p v-for="(m, i) in messages" :key="i" :class="m.role" v-text="m.text"></p>
    <p v-if="error" role="alert" v-text="error"></p>
    <div v-if="confirmation" class="confirmation">
      <p v-text="confirmation.message"></p>
      <button @click="confirm(true)">Confirm</button>
      <button @click="confirm(false)">Cancel</button>
    </div>
    <form @submit.prevent="submit">
      <input v-model="input" :disabled="busy" />
      <button v-if="busy" type="button" @click="stop">Stop</button>
      <button v-else type="submit" :disabled="!input.trim()">Send</button>
    </form>
  </div>
</template>

import * as signalR from '@microsoft/signalr';

export class MentorChat {
  onChunk = chunk => {};
  onBusy = busy => {};
  onError = message => {};
  onConfirmation = (actionId, message) => {};

  // baseUrl: the backend's origin, such as https://api.example.com; getToken: the signed-in user's access token
  constructor({ baseUrl = '', getToken } = {}) {
    this.baseUrl = baseUrl;
    this.getToken = getToken;
    this.connection = new signalR.HubConnectionBuilder()
      .withUrl(`${baseUrl}/mentor-hub`, { accessTokenFactory: getToken })
      .withAutomaticReconnect()
      .build();
    this.connection.on('StreamingChunk', chunk => this.onChunk(chunk));
    this.connection.on('BusyChanged', busy => this.onBusy(busy));
    this.connection.on('Error', message => this.onError(message));
    this.connection.on('ConfirmationRequired', (actionId, _toolName, message) => this.onConfirmation(actionId, message));

    // The next connection has no turn in progress: when this one drops, turn the input back on
    this.connection.onreconnecting(() => this.onBusy(false));
    this.connection.onclose(() => this.onBusy(false));
  }

  start() {
    return this.connection.start();
  }

  send(text) {
    // Always two arguments: null for a message without images
    return this.connection.invoke('SendMessage', text, null);
  }

  // Confirm and Stop go over HTTP: the hub runs one call at a time, and SendMessage is still running
  async confirm(actionId, approved) {
    const response = await fetch(`${this.baseUrl}/mentor/approve?actionId=${actionId}&approved=${approved}`, {
      method: 'POST',
      headers: await this.#headers(),
    });
    // 404: nothing waits for the answer any more (answered, stopped or disconnected), so there is nothing to report
    if (!response.ok && response.status !== 404) this.onError(`The confirmation was not accepted: HTTP ${response.status}`);
  }

  async stop() {
    await fetch(`${this.baseUrl}/mentor/cancel?connectionId=${this.connection.connectionId}`, {
      method: 'POST',
      headers: await this.#headers(),
    });
  }

  async #headers() {
    const token = await this.getToken?.();
    return token ? { Authorization: `Bearer ${token}` } : {};
  }
}

import { MentorChat } from './mentor-chat.js';

// The page: <form id="chat"><input></form>, <button id="stop" hidden>Stop</button> and <p id="answer"></p>
const form = document.querySelector('#chat');
const input = form.querySelector('input');
const stop = document.querySelector('#stop');
const answer = document.querySelector('#answer');

const chat = new MentorChat();
chat.onChunk = chunk => { answer.textContent += chunk; };
chat.onBusy = busy => { input.disabled = busy; stop.hidden = !busy; };
chat.onError = message => { answer.textContent = message; };
chat.onConfirmation = (actionId, message) => chat.confirm(actionId, window.confirm(message));
chat.start().catch(error => { answer.textContent = String(error); });

form.addEventListener('submit', event => {
  event.preventDefault();
  if (!input.value.trim()) return;
  answer.textContent = '';
  chat.send(input.value).catch(error => { answer.textContent = String(error); });
  input.value = '';
});
stop.addEventListener('click', () => chat.stop());

import { MentorChat } from './MentorChat';
import { getAccessToken } from './auth';   // your sign-in code

export function App() {
  return <MentorChat baseUrl="https://api.example.com" getToken={getAccessToken} />;
}

import { ApplicationConfig, inject } from '@angular/core';
import { MENTOR_CHAT_OPTIONS } from './mentor-chat.service';
import { AuthService } from './auth.service';   // your sign-in code

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: MENTOR_CHAT_OPTIONS,
      useFactory: () => {
        const auth = inject(AuthService);
        return { baseUrl: 'https://api.example.com', getToken: () => auth.getAccessToken() };
      },
    },
  ],
};

<script setup lang="ts">
import MentorChat from './MentorChat.vue';
import { getAccessToken } from './auth';   // your sign-in code
</script>

<template>
  <MentorChat base-url="https://api.example.com" :get-token="getAccessToken" />
</template>

import { getAccessToken } from './auth.js';   // your sign-in code

const chat = new MentorChat({ baseUrl: 'https://api.example.com', getToken: getAccessToken });