add agent components

Author: chriskapp

package-lock.json

@@ -34,12 +34,14 @@
     "@vscode/codicons": "^0.0.36",
     "bootstrap": "^5.3.0",
     "bootstrap-icons": "^1.10.5",
-    "fusio-sdk": "^6.1.0",
-    "marked": "^17.0.0",
+    "emoji-toolkit": "^10.0.0",
+    "fusio-sdk": "^7.0.8",
+    "katex": "^0.16.47",
+    "marked": "^18.0.0",
     "ngx-captcha": "^14.0.0",
     "ngx-clipboard": "^16.0.0",
     "ngx-gravatar": "^13.0.0",
-    "ngx-markdown": "^21.1.0",
+    "ngx-markdown": "^21.3.0",
     "ngx-typeschema-editor": "^5.0.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0"

package.json

@@ -0,0 +1,126 @@
+import {
+  AgentInput,
+  AgentItem,
+  AgentItemBinary,
+  AgentItemChoice,
+  AgentItemObject,
+  AgentItemText,
+  AgentItemToolCall,
+  AgentOutput,
+  CommonMessage
+} from "fusio-sdk";
+import {inject} from "@angular/core";
+import {FusioService} from "../service/fusio.service";
+
+export interface Agent<TModel, TOptions = undefined> {
+
+  /**
+   * Sends a prompt to a specific agent and returns the content
+   */
+  prompt(agentId: number, prompt: string, chatId?: string): Promise<AgentItem|undefined>;
+
+  /**
+   * Transforms the agent content into a model
+   */
+  transform(content: BackendAgentContent): TModel|undefined;
+
+  /**
+   * Executes the provided model, mostly this means that we create or update the model
+   */
+  execute(model: TModel, indicator: ExecutionIndicator, options?: TOptions): Promise<CommonMessage|undefined>;
+
+}
+
+export abstract class AgentAbstract<TModel, TOptions = undefined> implements Agent<TModel, TOptions> {
+
+  protected api = inject(FusioService);
+
+  async prompt(agentId: number, prompt: string, chatId?: string): Promise<BackendAgentContent|undefined> {
+    const input: AgentInput = {
+      previousId: chatId,
+      item: {
+        type: 'text',
+        content: prompt,
+      }
+    };
+
+    const output = await this.submit(agentId, input);
+    if (!output.item) {
+      return;
+    }
+
+    return output.item;
+  }
+
+  abstract submit(agentId: number, input: AgentInput): Promise<AgentOutput>;
+
+  abstract transform(content: BackendAgentContent): TModel|undefined;
+
+  abstract execute(model: TModel, indicator: ExecutionIndicator, options?: TOptions): Promise<CommonMessage|undefined>;
+
+  protected getText(content: BackendAgentContent): string|undefined {
+    if (content.type === 'text' && content.content) {
+      return content.content;
+    }
+
+    return;
+  }
+
+  protected getJson(content: BackendAgentContent): object|undefined {
+    if (content.type === 'object' && content.payload) {
+      return content.payload;
+    }
+
+    return;
+  }
+
+}
+
+export class ExecutionIndicator {
+
+  constructor(private callback: Function) {
+  }
+
+  request(message: string) {
+    const result: Message = {
+      level: 'info',
+      message: '> ' + message,
+    };
+
+    this.callback.apply(null, [result]);
+  }
+
+  response(message?: CommonMessage) {
+    if (!message || !message.message) {
+      return;
+    }
+
+    let result: Message|undefined = undefined;
+    if (message.success === true) {
+      result = {
+        level: 'success',
+        message: '< ' + message.message,
+      };
+    } else if (message.success === false) {
+      result = {
+        level: 'danger',
+        message: '< ' + message.message,
+      };
+    }
+
+    if (result !== undefined) {
+      this.callback.apply(null, [result]);
+    }
+  }
+
+}
+
+export interface Message
+{
+  level: Level,
+  message: string,
+}
+
+export type Level = 'info'|'danger'|'success';
+
+export type BackendAgentContent = AgentItemBinary | AgentItemChoice | AgentItemObject | AgentItemText | AgentItemToolCall;

projects/fusio-sdk/src/lib/abstract/agent.ts

@@ -0,0 +1,156 @@
+import {Component, computed, inject, input, resource, signal} from '@angular/core';
+import {AgentItem, BackendAgent, BackendAgentMessage, CommonMessage} from "fusio-sdk";
+import {Agent, BackendAgentContent, ExecutionIndicator, Message} from "../../abstract/agent";
+import {FusioService} from "../../service/fusio.service";
+import {ErrorService} from "../../service/error.service";
+
+@Component({
+  selector: 'fusio-agent-chat-abstract',
+  template: ''
+})
+export abstract class ChatAbstract<TModel, TOptions = undefined> {
+
+  agent = input.required<BackendAgent>();
+  chatId = input.required<string>();
+
+  model = signal<TModel|undefined>(undefined);
+
+  output = signal<AgentItem|undefined>(undefined);
+  loading = signal<boolean>(false);
+  executeLoading = signal<boolean>(false);
+  executeMessages = signal<Array<Message>>([]);
+  response = signal<CommonMessage|undefined>(undefined);
+
+  messagesResource = resource<Array<BackendAgentMessage>, { agent: BackendAgent, chatId: string, output: AgentItem|undefined }>({
+    params: () => ({
+      agent: this.agent(),
+      chatId: this.chatId(),
+      output: this.output(),
+    }),
+    loader: async (params) => {
+      const collection = await this.api.getClient().backend().agent().message().getAll('' + params.params.agent.id, params.params.chatId);
+      const entries = collection.entry || [];
+
+      let lastMessage: BackendAgentMessage|undefined;
+      const messages: Array<BackendAgentMessage> = [];
+      entries.forEach((message) => {
+        messages.push(message);
+
+        if (message.role === 'assistant') {
+          lastMessage = message;
+        }
+      });
+
+      if (lastMessage && lastMessage.item) {
+        this.load(lastMessage.item);
+      }
+
+      return messages;
+    }
+  });
+
+  messages = computed<Array<BackendAgentMessage>|undefined>(() => {
+    if (this.messagesResource.hasValue()) {
+      return this.messagesResource.value();
+    }
+
+    return undefined;
+  });
+
+  protected api = inject(FusioService);
+  protected error = inject(ErrorService);
+
+  abstract getAgent(): Agent<TModel, TOptions>;
+
+  async doSend(message: string) {
+    if (!message) {
+      return;
+    }
+
+    const agentId = this.agent().id;
+    if (!agentId) {
+      return;
+    }
+
+    this.loading.set(true);
+
+    try {
+      const content = await this.getAgent().prompt(agentId, message, this.chatId());
+
+      this.output.set(content);
+
+      this.onSend();
+
+      this.scrollToBottom();
+    } catch (error) {
+      this.response.set(this.error.convert(error));
+    }
+
+    this.loading.set(false);
+  }
+
+  load(content?: BackendAgentContent): void {
+    if (!content) {
+      return;
+    }
+
+    this.executeMessages.set([]);
+    this.model.set(this.getAgent().transform(content));
+
+    this.onLoad();
+  }
+
+  async execute(): Promise<void> {
+    const model = this.model();
+    if (!model) {
+      return;
+    }
+
+    this.executeLoading.set(true);
+
+    try {
+      const executeMessages = this.executeMessages;
+      const indicator = new ExecutionIndicator((message: Message) => {
+        executeMessages.update((messages) => {
+          return messages.concat([message]);
+        });
+      });
+
+      const options = this.getOptions();
+
+      const response = await this.getAgent().execute(model, indicator, options);
+      this.response.set(response);
+
+      if (response) {
+        this.onExecute(response);
+      }
+    } catch (error) {
+      this.response.set(this.error.convert(error));
+    }
+
+    this.executeLoading.set(false);
+  }
+
+  protected onLoad(): void {
+  }
+
+  protected onSend(): void {
+  }
+
+  protected onExecute(message: CommonMessage): void {
+  }
+
+  protected getOptions(): TOptions|undefined {
+    return;
+  }
+
+  scrollToBottom(): void {
+    window.setTimeout(() => {
+      let messagesBottom = document.getElementById('messages-bottom');
+      if (messagesBottom !== null) {
+        messagesBottom.scrollIntoView();
+      }
+    }, 500);
+  }
+
+}

projects/fusio-sdk/src/lib/component/agent/chat-abstract.ts

@@ -0,0 +1,16 @@
+
+<div class="sticky-bottom p-2 mt-3 bg-light">
+  @if (loading()) {
+    <div class="spinner-grow mb-3" role="status">
+      <span class="visually-hidden">Loading...</span>
+    </div>
+  }
+  <form>
+    <div class="mb-3">
+      <textarea id="input" name="input" [ngModel]="input()" (ngModelChange)="input.set($event)" placeholder="Send a message ..." class="form-control" rows="6"></textarea>
+    </div>
+    <div class="btn-group">
+      <button class="btn btn-primary" (click)="send.emit(input());input.set('');">Send</button>
+    </div>
+  </form>
+</div>

projects/fusio-sdk/src/lib/component/agent/input/input.css

@@ -0,0 +1,25 @@
+import {Component, input, OnInit, output, signal} from '@angular/core';
+import {FormsModule, ReactiveFormsModule} from "@angular/forms";
+
+@Component({
+  selector: 'fusio-agent-message-input',
+  imports: [
+    FormsModule,
+    ReactiveFormsModule
+  ],
+  templateUrl: './input.html',
+  styleUrl: './input.css',
+})
+export class Input implements OnInit {
+
+  loading = input.required<boolean>();
+  text = input<string>('');
+
+  input = signal<string>('');
+  send = output<string>();
+
+  ngOnInit(): void {
+    this.input.set(this.text());
+  }
+
+}

projects/fusio-sdk/src/lib/component/agent/input/input.html

@@ -0,0 +1,25 @@
+
+@if (message(); as message) {
+  <div class="mb-2 overflow-hidden" [ngClass]="{'bg-light p-3 rounded-4': message.role === 'user'}">
+    @if (message.item) {
+      @if (message.item.type === 'text' && 'content' in message.item && message.item.content) {
+        @if (message.role === 'user') {
+          {{ message.item.content }}
+        }
+        @else {
+          <markdown emoji katex [katexOptions]="katexOptions" [data]="message.item.content"></markdown>
+        }
+      }
+      @else if (message.item.type === 'object' && 'payload' in message.item && message.item.payload) {
+        <markdown>```json
+{{ message.item.payload|json }}
+```</markdown>
+      }
+      @else {
+        <markdown>```json
+{{ message.item|json }}
+```</markdown>
+      }
+    }
+  </div>
+}

projects/fusio-sdk/src/lib/component/agent/input/input.ts

@@ -0,0 +1,24 @@
+import {Component, input} from '@angular/core';
+import {JsonPipe, NgClass} from "@angular/common";
+import {BackendAgentMessage} from "fusio-sdk";
+import {KatexSpecificOptions, MarkdownComponent} from "ngx-markdown";
+
+@Component({
+  selector: 'fusio-agent-message-row',
+  imports: [
+    JsonPipe,
+    NgClass,
+    MarkdownComponent
+  ],
+  templateUrl: './row.html',
+  styleUrl: './row.css',
+})
+export class Row {
+
+  message = input.required<BackendAgentMessage>();
+
+  katexOptions: KatexSpecificOptions = {
+    throwOnError: false,
+  };
+
+}