@@ -547,6 +548,7 @@ export class GrampsJs extends LitElement {
.canEdit="${this.canEdit}"
.canViewPrivate="${this.canViewPrivate}"
.canManageUsers="${this.canManageUsers}"
+ .canUseChat="${this.canUseChat}"
>
@@ -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) {
diff --git a/src/SharedStyles.js b/src/SharedStyles.js
index df49ab8e..84860023 100644
--- a/src/SharedStyles.js
+++ b/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%;
diff --git a/src/api.js b/src/api.js
index cea254bc..5126fb03 100644
--- a/src/api.js
+++ b/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(
diff --git a/src/components/GrampsjsButtonGroup.js b/src/components/GrampsjsButtonGroup.js
new file mode 100644
index 00000000..d2af5670
--- /dev/null
+++ b/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`
+
+ `
+ }
+}
+
+window.customElements.define('grampsjs-button-group', GrampsjsButtonGroup)
diff --git a/src/components/GrampsjsChat.js b/src/components/GrampsjsChat.js
new file mode 100644
index 00000000..51dd0694
--- /dev/null
+++ b/src/components/GrampsjsChat.js
@@ -0,0 +1,263 @@
+import {html, css, LitElement} from 'lit'
+import '@material/mwc-button'
+
+import {sharedStyles} from '../SharedStyles.js'
+import {GrampsjsTranslateMixin} from '../mixins/GrampsjsTranslateMixin.js'
+import './GrampsjsChatPrompt.js'
+import './GrampsjsChatMessage.js'
+import {setChatHistory, getChatHistory, apiPost} from '../api.js'
+import {renderMarkdownLinks} from '../util.js'
+
+function delay(ms) {
+ return new Promise(resolve => setTimeout(resolve, ms))
+}
+
+class GrampsjsChat extends GrampsjsTranslateMixin(LitElement) {
+ static get styles() {
+ return [
+ sharedStyles,
+ css`
+ :host {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ }
+
+ .outer {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ }
+
+ .container {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-end;
+ overflow: hidden;
+ clear: left;
+ }
+
+ .conversation {
+ flex: 1;
+ overflow-y: auto;
+ display: flex;
+ flex-direction: column-reverse;
+ padding: 0 10px 20px 10px;
+ }
+
+ .prompt {
+ padding: 10px;
+ flex-shrink: 0;
+ }
+
+ .loading {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 24px;
+ width: 48px;
+ font-size: 24px;
+ }
+
+ .dot {
+ width: 8px;
+ height: 8px;
+ margin: 0 4px;
+ background-color: #888;
+ border-radius: 50%;
+ animation: flash 1.4s infinite ease-in-out both;
+ }
+
+ .dot:nth-child(1) {
+ animation-delay: -0.32s;
+ }
+
+ .dot:nth-child(2) {
+ animation-delay: -0.16s;
+ }
+
+ @keyframes flash {
+ 0%,
+ 80%,
+ 100% {
+ opacity: 0;
+ }
+ 40% {
+ opacity: 1;
+ }
+ }
+
+ .clear-btn {
+ position: relative;
+ float: left;
+ top: 20px;
+ left: 0px;
+ margin: 1px solid red;
+ }
+ `,
+ ]
+ }
+
+ static get properties() {
+ return {
+ messages: {type: Array},
+ loading: {type: Boolean},
+ }
+ }
+
+ constructor() {
+ super()
+ this.messages = getChatHistory() || []
+ this.loading = false
+ }
+
+ render() {
+ return html`
+
+
+
+
+
+
+ ${
+ this.loading
+ ? html`
+ `
+ : ''
+ }
+ ${this.messages
+ .toReversed()
+ .map(
+ message => html`
+
${renderMarkdownLinks(
+ message.message
+ )}
+ `
+ )}
+
+
+
+
+
+
+