Document Q&A (#140) (#141)

* Add pdfjs for reading PDF files.

* Upgrade various dependeny minor versions.

* Add chat button to source action bar.

* Add chat model selector in chat toolbar.

* chore: bump dependencies

* feat(Chat): provide a list of local file types that can be read for chat purposes (PDF and plain text file types).

* feat(Chat): Implement online PDF and local file processing for use in Chat. Dramatically improved the ability to summarize, especially larger documents.

* chore: Remove unused functions but keep stubs for later use.

* fix: a bug where theme settings were not saved to file correctly.

Author: RobRoyce

package.json

@@ -1,6 +1,6 @@
 {
   "name": "knowledge-canvas",
-  "version": "0.8.4",
+  "version": "0.8.5",
   "description": "Knowledge is a tool for saving, searching, accessing, and exploring all of your favorite websites, documents and files.",
   "author": "Rob Royce <[email protected]> (https://robroyce.dev)",
   "license": "Apache-2.0",
@@ -43,47 +43,51 @@
   },
   "packageManager": "[email protected]",
   "dependencies": {
-    "@adobe/css-tools": "^4.3.1",
-    "async": "^3.2.4",
-    "axios": "^1.3.4",
-    "ejs": "^3.1.8",
+    "@adobe/css-tools": "^4.3.2",
+    "async": "^3.2.5",
+    "axios": "^1.5.1",
+    "canvas": "^2.11.2",
+    "ejs": "^3.1.9",
     "express": "^4.18.2",
-    "follow-redirects": "^1.15.2",
+    "follow-redirects": "^1.15.3",
     "got": "^13.0.0",
-    "highlight.js": "^11.8.0",
+    "highlight.js": "^11.9.0",
     "html-to-text": "^9.0.5",
-    "minimist": "^1.2.7",
+    "minimist": "^1.2.8",
     "multer": "^1.4.5-lts.1",
-    "node-fetch": "^3.3.1",
+    "node-fetch": "^3.3.2",
     "node-forge": "^1.3.1",
-    "plist": "^3.0.6",
+    "pdfjs-dist": "^3.11.174",
+    "plist": "^3.1.0",
     "postcss": "^8.4.31",
-    "terser": "^5.15.1",
-    "url": "^0.11.0"
+    "terser": "^5.22.0",
+    "url": "^0.11.3"
   },
   "devDependencies": {
     "@angular-devkit/architect": "^0.1402.13",
     "@angular/cli": "^14.2.13",
-    "@types/async": "^3.2.15",
-    "@types/ejs": "^3.1.1",
+    "@types/async": "^3.2.24",
+    "@types/ejs": "^3.1.4",
     "@types/eslint": "^8",
-    "@types/express": "^4",
-    "@types/follow-redirects": "^1.14.1",
-    "@types/html-to-text": "^9",
-    "@types/minimist": "^1.2.2",
-    "@types/multer": "^1",
+    "@types/express": "^4.17.20",
+    "@types/follow-redirects": "^1.14.3",
+    "@types/html-to-text": "^9.0.3",
+    "@types/minimist": "^1.2.4",
+    "@types/multer": "^1.4.9",
     "@types/node": "^17.0.45",
-    "@types/node-forge": "^1.3.0",
-    "@types/plist": "^3.0.2",
-    "@types/prettier": "^2",
-    "@types/uuid": "^9.0.1",
+    "@types/node-forge": "^1.3.8",
+    "@types/plist": "^3.0.4",
+    "@types/prettier": "^2.7.3",
+    "@types/uuid": "^9.0.6",
     "electron-builder": "^24.6.4",
     "electron-notarize": "^1.2.2",
     "eslint": "^8.38.0",
     "eslint-plugin-html": "^7.1.0",
     "loader-utils": "^3.2.1",
-    "prettier": "^2.8.7",
-    "standard-version": "^9.5.0"
+    "node-loader": "^2.0.0",
+    "prettier": "^2.8.8",
+    "standard-version": "^9.5.0",
+    "worker-loader": "^3.0.8"
   },
   "build": {
     "appId": "com.knowledge.canvas.app",

src/kc_angular/package.json

@@ -38,19 +38,19 @@
     "@fullcalendar/timegrid": "^5.11.5",
     "chart.js": "^3.9.1",
     "chokidar": "^3.5.3",
-    "cytoscape": "^3.23.0",
+    "cytoscape": "^3.26.0",
     "cytoscape-cola": "^2.5.1",
     "cytoscape-dagre": "^2.5.0",
-    "cytoscape-fcose": "^2.1.0",
+    "cytoscape-fcose": "^2.2.0",
     "cytoscape-klay": "^3.1.4",
     "eslint": "^8.38.0",
     "fuse.js": "^6.6.2",
     "marked": "^4.3.0",
-    "primeflex": "^3.2.1",
+    "primeflex": "^3.3.1",
     "primeicons": "^6.0.1",
-    "primeng": "^14.1.2",
+    "primeng": "^14.2.3",
     "rxjs": "~7.5.7",
-    "tslib": "^2.4.1",
+    "tslib": "^2.6.2",
     "typescript": "<4.9.0",
     "zone.js": "^0.11.8"
   },
@@ -63,11 +63,11 @@
     "@angular-eslint/template-parser": "14.4.0",
     "@angular/cli": "^14.2.13",
     "@angular/compiler-cli": "^14.3.0",
-    "@types/cytoscape": "^3.19.12",
-    "@types/cytoscape-dagre": "^2.3.1",
-    "@types/cytoscape-fcose": "^2.2.2",
-    "@types/cytoscape-klay": "^3.1.2",
-    "@types/marked": "^4.0.8",
+    "@types/cytoscape": "^3.19.13",
+    "@types/cytoscape-dagre": "^2.3.2",
+    "@types/cytoscape-fcose": "^2.2.3",
+    "@types/cytoscape-klay": "^3.1.3",
+    "@types/marked": "^4.3.2",
     "@typescript-eslint/eslint-plugin": "5.37.0",
     "@typescript-eslint/parser": "5.37.0",
     "eslint": "^8.38.0",

src/kc_angular/src/app/app.component.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2022-2023 Rob Royce
+ * Copyright (c) 2022-2024 Rob Royce
  *
  *  Licensed under the Apache License, Version 2.0 (the "License");
  *  you may not use this file except in compliance with the License.
@@ -210,9 +210,15 @@ export class AppComponent implements OnInit {
           if (ks?.force && this.sourceInfoDialog) {
             this.sourceInfoDialog.close();
           }
+
+          let view = 'details';
+          if (ks?.view) {
+            view = ks.view;
+          }
+
           if (ks && !this.sourceInfoDialog) {
             this.sourceInfoDialog = this.dialog.open(KsDetailsComponent, {
-              data: { ks: ks },
+              data: { ks: ks, view: view },
               width: '100vw !important',
               height: '100vh !important',
               styleClass: 'min-h-screen',

src/kc_angular/src/app/components/calendar.component.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2022-2023 Rob Royce
+ * Copyright (c) 2022-2024 Rob Royce
  *
  *  Licensed under the Apache License, Version 2.0 (the "License");
  *  you may not use this file except in compliance with the License.
@@ -51,9 +51,11 @@ import { take, tap } from 'rxjs/operators';
           (onRemove)="onRemove($event)"
           (onEdit)="onEdit($event)"
           (onOpen)="onOpen($event)"
+          (onChat)="onChat($event)"
           (onPreview)="onPreview($event)"
           (onTopicClick)="onTopicClick($event)"
           [ks]="selectedKs"
+          [showChat]="true"
         >
         </app-ks-card>
         <app-project-card
@@ -155,6 +157,10 @@ export class CalendarComponent implements OnDestroy {
     this.command.open(ks);
   }
 
+  onChat(ks: KnowledgeSource) {
+    this.command.chat(ks);
+  }
+
   onPreview(ks: KnowledgeSource) {
     this.command.preview(ks);
   }

src/kc_angular/src/app/components/chat-components/chat.toolbar.component.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2023 Rob Royce
+ * Copyright (c) 2023-2024 Rob Royce
  *
  *  Licensed under the Apache License, Version 2.0 (the "License");
  *  you may not use this file except in compliance with the License.
@@ -16,8 +16,11 @@
 
 import { Component, EventEmitter, Output } from '@angular/core';
 import { BehaviorSubject, skip } from 'rxjs';
-import { debounceTime, tap } from 'rxjs/operators';
+import { debounceTime, distinctUntilChanged, tap } from 'rxjs/operators';
 import { SettingsService } from '@services/ipc-services/settings.service';
+import { ChatModel, SupportedChatModels } from '@shared/models/chat.model';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { ChatSettingsModel } from '@shared/models/settings.model';
 
 @Component({
   selector: 'chat-toolbar',
@@ -26,7 +29,17 @@ import { SettingsService } from '@services/ipc-services/settings.service';
       class="flex flex-row justify-content-between top-0 pb-2"
       id="chat-toolbar"
     >
-      <div></div>
+      <div class="chat-toolbar-model-selector">
+        <form [formGroup]="form">
+          <p-dropdown
+            class="settings-input w-12rem"
+            formControlName="modelName"
+            [options]="SupportedChatModels"
+            optionLabel="label"
+            optionValue="name"
+          ></p-dropdown>
+        </form>
+      </div>
 
       <div class="chat-toolbar-filter">
         <div class="p-inputgroup p-fluid mr-3 ml-3 w-24rem">
@@ -92,7 +105,26 @@ export class ChatToolbarComponent {
   private _filter$ = new BehaviorSubject<string>('');
   filter$ = this._filter$.asObservable();
 
-  constructor(private settings: SettingsService) {
+  form: FormGroup;
+
+  settingsModel: ChatSettingsModel = new ChatSettingsModel();
+
+  constructor(private settings: SettingsService, private fb: FormBuilder) {
+    const chatSettings = this.settings.get().app.chat;
+    if (!chatSettings) {
+      this.set();
+    } else {
+      this.settingsModel = {
+        ...this.chatSettings,
+        ...chatSettings,
+      };
+    }
+
+    // Create form group for chat model selector
+    this.form = this.fb.group({
+      modelName: [this.settingsModel.model.name],
+    });
+
     this.filter$
       .pipe(
         skip(1),
@@ -102,18 +134,71 @@ export class ChatToolbarComponent {
         })
       )
       .subscribe();
+
+    // Listen for changes in the chat model setting, update if there are any
+    this.form.valueChanges
+      .pipe(
+        debounceTime(500),
+        distinctUntilChanged(),
+        tap((formValue) => {
+          let model: ChatModel;
+
+          // If the model has changed, update the local copy with static values from the SupportedChatModels array.
+          if (formValue.modelName !== this.settingsModel.model.name) {
+            model =
+              SupportedChatModels.find((m) => m.name === formValue.modelName) ??
+              this.settingsModel.model;
+          } else {
+            return;
+          }
+
+          this.settingsModel = {
+            display: this.settingsModel.display,
+            suggestions: this.settingsModel.suggestions,
+            model: model,
+          };
+          this.set();
+        })
+      )
+      .subscribe();
+
+    this.settings.all
+      .pipe(
+        tap((settings) => {
+          if (settings.app.chat) {
+            this.settingsModel = {
+              ...this.settingsModel,
+              ...settings.app.chat,
+            };
+            this.form.patchValue({
+              modelName: this.settingsModel.model.name,
+            });
+          }
+        })
+      )
+      .subscribe();
   }
 
   /* Filter the chat based on the value of the filter input */
   filter(value: string) {
     this._filter$.next(value);
   }
 
+  private set() {
+    this.settings.set({
+      app: {
+        chat: this.settingsModel,
+      },
+    });
+  }
+
   chatSettings() {
     this.settings.show('chat');
   }
 
   clearChat() {
     this.onClear.emit();
   }
+
+  protected readonly SupportedChatModels = SupportedChatModels;
 }

src/kc_angular/src/app/components/settings/display-settings.component.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2022-2023 Rob Royce
+ * Copyright (c) 2022-2024 Rob Royce
  *
  *  Licensed under the Apache License, Version 2.0 (the "License");
  *  you may not use this file except in compliance with the License.
@@ -255,6 +255,10 @@ export class DisplaySettingsComponent {
             this.send(this.channels.zoomOut, this.displaySettings.zoom);
           }
 
+          const themeSettings = this.themeService.findTheme(
+            formValue.theme.code
+          );
+
           this.displaySettings = {
             autoplay: formValue.autoplay,
             logging: {
@@ -263,7 +267,7 @@ export class DisplaySettingsComponent {
               warn: warn ?? this.displaySettings.logging.warn,
             },
             syncTheme: formValue.syncTheme,
-            theme: formValue.theme,
+            theme: themeSettings,
             zoom: formValue.zoom,
             animations: formValue.animations,
           };