Add UI for AI Chat (#489)

* Add empty chat view

* Add UI for chat

* Store chat history in localStorage, add button

* Change placeholder color

* Implement UI for (dummy) AI response

* Get chat response from API

* Change icon to family tree

* Add  loading animation, render markdown links

* Change type to role, submit history

* Update plugin

* Error handling in chat

* Fix lint error

* Add clear button to chat

* Add string

* Only show chat if authorised to use

* lint issues

* Add UI to manage chat permissions

* Add button group component

* Add UI for semantic search

* UI for chat quota

* Add UI to manage semantic search index

lang/en.json

@@ -172,5 +172,10 @@
   "This action cannot be undone.": "This action cannot be undone.",
   "Yes": "Yes",
   "Toggle time filter for places": "Toggle time filter for places",
-  "The search index needs to be rebuilt.": "The search index needs to be rebuilt."
+  "The search index needs to be rebuilt.": "The search index needs to be rebuilt.",
+  "Ask something about your ancestors": "Ask something about your ancestors",
+  "Chat messages": "Chat messages",
+  "Manage semantic search index": "Manage semantic search index",
+  "Update semantic search index": "Update semantic search index",
+  "Updating the semantic search index requires substantial time and computational resources. Run this operation only when necessary.": "Updating the semantic search index requires substantial time and computational resources. Run this operation only when necessary."
 }

package.json

@@ -31,6 +31,7 @@
     "eslint-config-prettier": "^7.2.0",
     "eslint-config-standard": "^16.0.3",
     "eslint-plugin-import": "^2.24.2",
+    "eslint-plugin-lit-a11y": "^4.1.4",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^5.1.0",
     "fetch-mock": "^9.11.0",
@@ -127,4 +128,4 @@
     "pwa-helpers": "^0.9.1",
     "tippy.js": "^6.3.7"
   }
-}
+}

src/GrampsJs.js

@@ -524,6 +524,7 @@ export class GrampsJs extends LitElement {
           <grampsjs-main-menu
             .strings="${this._strings}"
             ?canViewPrivate="${this.canViewPrivate}"
+            ?canUseChat="${this.canUseChat}"
           ></grampsjs-main-menu>
         </div>
         <div slot="appContent">
@@ -547,6 +548,7 @@ export class GrampsJs extends LitElement {
               .canEdit="${this.canEdit}"
               .canViewPrivate="${this.canViewPrivate}"
               .canManageUsers="${this.canManageUsers}"
+              .canUseChat="${this.canUseChat}"
             >
             </grampsjs-pages>
           </main>
@@ -604,7 +606,8 @@ export class GrampsJs extends LitElement {
     this.addEventListener('drawer:toggle', this._toggleDrawer)
     window.addEventListener('keydown', event => this._handleKey(event))
     document.addEventListener('visibilitychange', this._handleVisibilityChange)
-    window.addEventListener('online', this._handleOnline)
+    window.addEventListener('online', () => this._handleOnline())
+    window.addEventListener('token:refresh', () => this._handleRefresh())
 
     const browserLang = getBrowserLanguage()
     if (browserLang && !this.settings.lang) {
@@ -834,13 +837,19 @@ export class GrampsJs extends LitElement {
   _handleVisibilityChange() {
     if (document.visibilityState === 'visible') {
       // refresh auth token when app becomes visible again
-      apiRefreshAuthToken()
+      this._handleRefresh()
     }
   }
 
   // eslint-disable-next-line class-methods-use-this
   _handleOnline() {
-    apiRefreshAuthToken()
+    this._handleRefresh()
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  async _handleRefresh() {
+    await apiRefreshAuthToken()
+    this.setPermissions()
   }
 
   update(changed) {
@@ -994,18 +1003,12 @@ export class GrampsJs extends LitElement {
   setPermissions() {
     const permissions = getPermissions()
     // If permissions is null, authorization is disabled and anything goes
-    if (permissions === null) {
-      this.canAdd = true
-      this.canEdit = true
-      this.canViewPrivate = true
-      // managing users not meaningful in this case
-      this.canManageUsers = false
-    } else {
-      this.canAdd = permissions.includes('AddObject')
-      this.canEdit = permissions.includes('EditObject')
-      this.canViewPrivate = permissions.includes('ViewPrivate')
-      this.canManageUsers = permissions.includes('EditOtherUser')
-    }
+    this.canAdd = permissions.includes('AddObject')
+    this.canEdit = permissions.includes('EditObject')
+    this.canViewPrivate = permissions.includes('ViewPrivate')
+    this.canManageUsers = permissions.includes('EditOtherUser')
+    this.canUseChat =
+      permissions.includes('UseChat') && this._dbInfo?.server?.chat
   }
 
   _(s) {

src/SharedStyles.js

@@ -306,6 +306,18 @@ export const sharedStyles = css`
     border-left-color: rgba(251, 192, 45, 0.7);
   }
 
+  .success {
+    color: #41ad49;
+  }
+
+  .error {
+    color: #bf360c;
+  }
+
+  .warn {
+    color: #f9a825;
+  }
+
   @keyframes shine {
     to {
       background-position-x: -200%;

src/api.js

@@ -115,6 +115,33 @@ export function setRecentObjects(data) {
   localStorage.setItem('recentObjects', stringData)
 }
 
+export function getChatHistory() {
+  try {
+    const string = localStorage.getItem('chatMessages')
+    const data = JSON.parse(string)
+    const tree = getTreeId()
+    if (tree) {
+      return data[tree]
+    }
+    return []
+  } catch (e) {
+    return []
+  }
+}
+
+export function setChatHistory(data) {
+  const tree = getTreeId()
+  if (!tree) {
+    return
+  }
+  const stringDataAll = localStorage.getItem('chatMessages')
+  const objectDataAll = JSON.parse(stringDataAll)
+  const objectDataNew = {[tree]: data}
+  const objectData = {...objectDataAll, ...objectDataNew}
+  const stringData = JSON.stringify(objectData)
+  localStorage.setItem('chatMessages', stringData)
+}
+
 export async function apiResetPassword(username) {
   try {
     const resp = await fetch(

src/components/GrampsjsButtonGroup.js

@@ -0,0 +1,41 @@
+import {LitElement, html, css} from 'lit'
+
+import '@material/mwc-icon-button'
+
+import {sharedStyles} from '../SharedStyles.js'
+import {GrampsjsTranslateMixin} from '../mixins/GrampsjsTranslateMixin.js'
+import './GrampsjsTooltip.js'
+
+export class GrampsjsButtonGroup extends GrampsjsTranslateMixin(LitElement) {
+  static get styles() {
+    return [
+      sharedStyles,
+      css`
+        #button-container {
+          --mdc-typography-button-font-size: 12px;
+          margin: 12px 0;
+        }
+
+        #button-container div {
+          border: 1px solid var(--mdc-theme-primary);
+          opacity: 0.9;
+          border-radius: 8px;
+          display: inline-block;
+          padding: 4px;
+        }
+      `,
+    ]
+  }
+
+  render() {
+    return html`
+      <div id="button-container">
+        <div>
+          <slot></slot>
+        </div>
+      </div>
+    `
+  }
+}
+
+window.customElements.define('grampsjs-button-group', GrampsjsButtonGroup)