@digipair/skill-web-chatbot 0.90.0 → 0.91.0-0

package/src/lib/chat.element.ts

@@ -0,0 +1,603 @@
+import mermaid from 'mermaid/dist/mermaid.esm.min.mjs';
+import { LitElement, TemplateResult, css, html, nothing } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import * as showdown from 'showdown';
+import { InputsElement } from './inputs.element';
+import { WRITTING_IMAGE } from './common.data';
+import './inputs.element';
+
+@customElement('digipair-chatbot-chat')
+export class ChatElement extends LitElement {
+  @property({ type: Boolean })
+  loading!: boolean;
+
+  @property({ type: Array })
+  messages!: any[];
+
+  @property({ type: Object })
+  currentBoost: any;
+
+  @property({ type: Object })
+  context: any;
+
+  @property({ type: Array })
+  get inputs(): { [key: string]: any }[] {
+    return this.inputsElement?.values || [];
+  }
+
+  @property()
+  loadingStep!: string;
+
+  @query('#messageInput')
+  private messageInput!: HTMLInputElement;
+
+  @query('digipair-chatbot-inputs')
+  private inputsElement!: InputsElement;
+
+  private previousMessages = '';
+  private converter!: showdown.Converter;
+
+  static override styles = [
+    css`
+      /* Pour Chrome et Edge */
+      .container::-webkit-scrollbar {
+        width: 8px; /* Largeur de la barre de défilement */
+        background-color: transparent; /* Couleur de fond du rail de la barre de défilement */
+      }
+
+      .container::-webkit-scrollbar-thumb {
+        background-color: #bfc1c3;
+        border-radius: 10px; /* Pour rendre la barre de défilement arrondie */
+        background-clip: padding-box;
+        border: 2px solid transparent; /* Espace entre la barre de défilement et son rail */
+      }
+
+      .container::-webkit-scrollbar-track {
+        background-color: transparent; /* Couleur de fond de la zone de défilement */
+      }
+      .container {
+        position: absolute;
+        top: 0;
+        bottom: 70px;
+        left: 0;
+        right: 0;
+        padding: 20px;
+        overflow-y: scroll;
+        margin-top: 1px;
+        margin-bottom: 2px;
+        margin-right: 3px;
+      }
+
+      .container > section {
+        overflow: auto;
+      }
+      .container > section::-webkit-scrollbar {
+        height: 8px; /* Largeur de la barre de défilement */
+        background-color: transparent; /* Couleur de fond du rail de la barre de défilement */
+      }
+      .container > section::-webkit-scrollbar-thumb {
+        background-color: #bfc1c3;
+        border-radius: 10px; /* Pour rendre la barre de défilement arrondie */
+        background-clip: padding-box;
+        border: 2px solid transparent; /* Espace entre la barre de défilement et son rail */
+      }
+      .container > section::-webkit-scrollbar-track {
+        background-color: transparent; /* Couleur de fond de la zone de défilement */
+      }
+
+      .assistant,
+      .user {
+        max-width: 70%; /* Largeur maximale des bulles de chat */
+        padding: 10px 15px;
+        margin-bottom: 10px;
+        border-radius: 20px;
+        line-height: 1.4;
+      }
+
+      .assistant {
+        background-color: var(
+          --digipair-color-primary,
+          #52dfdb
+        ); /* Couleur de fond des messages de l'assistant */
+        color: var(
+          --digipair-color-text-primary,
+          #242e3b
+        ); /* Couleur du texte des messages de l'assistant */
+        align-self: flex-start;
+        margin-right: auto;
+      }
+
+      .user {
+        background-color: var(--digipair-color-secondary, #242e3b);
+        color: var(
+          --digipair-color-text-secondary,
+          #ffffff
+        ); /* Couleur du texte des messages de l'utilisateur */
+        align-self: flex-end;
+        margin-left: auto;
+      }
+
+      .assistant a {
+        color: var(--digipair-color-text-primary, #242e3b);
+      }
+
+      .user a {
+        color: var(--digipair-color-text-secondary, #ffffff);
+      }
+
+      .input-container {
+        position: absolute;
+        bottom: 0px;
+        right: 0;
+        left: 0;
+        height: 50px;
+        margin-top: 0px;
+        padding-top: 10px;
+        padding-left: 10px;
+        padding-bottom: 10px;
+        border-radius: 20px 5px 0px 20px;
+        border: 1px solid rgba(112, 183, 253, 0.3);
+      }
+
+      .input-container input {
+        outline: none;
+        width: 250px;
+        border-top: none;
+        border-left: none;
+        border-right: none;
+        border-bottom: 1px solid #bababa;
+        background-color: transparent;
+        margin-right: 6px;
+        padding-bottom: 0px;
+      }
+
+      .button {
+        margin-left: 5px;
+      }
+      .button:not(.disabled) {
+        cursor: pointer;
+      }
+      .button:hover:not(.disabled) {
+        color: rgb(112, 183, 253);
+      }
+      .button.disabled {
+        color: rgb(220 220 220);
+      }
+
+      .input {
+        position: absolute;
+        top: 0;
+        bottom: 5px;
+        left: 8px;
+        right: 40px;
+        margin-top: 5px;
+        margin-left: 4px;
+        margin-bottom: 5px;
+      }
+
+      #messageInput {
+        width: 100%;
+        height: 45px;
+        border: none;
+        outline: none;
+        resize: none;
+        background-color: white;
+        color: black;
+      }
+      #messageInput::-webkit-scrollbar {
+        width: 8px; /* Largeur de la barre de défilement */
+        background-color: transparent; /* Couleur de fond du rail de la barre de défilement */
+      }
+      #messageInput::-webkit-scrollbar-thumb {
+        background-color: #bfc1c3;
+        border-radius: 10px; /* Pour rendre la barre de défilement arrondie */
+        background-clip: padding-box;
+        border: 2px solid transparent; /* Espace entre la barre de défilement et son rail */
+      }
+      #messageInput::-webkit-scrollbar-track {
+        background-color: transparent; /* Couleur de fond de la zone de défilement */
+      }
+
+      p {
+        margin: 0;
+      }
+
+      [name='microphone'] {
+        position: absolute;
+        right: 10px;
+        top: 12px;
+      }
+
+      [name='begin'] {
+        position: absolute;
+        right: 10px;
+        top: 40px;
+      }
+
+      .container.with-boost {
+        bottom: 105px;
+      }
+
+      .input-container.with-boost {
+        height: 85px;
+      }
+
+      .input .assistant {
+        height: 18px;
+        max-width: 100%;
+        width: 235px;
+        overflow: hidden;
+        opacity: 0.3;
+      }
+
+      .input .assistant p {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+      }
+
+      .button.action {
+        float: right;
+      }
+
+      .loading {
+        overflow: visible !important;
+      }
+
+      .loading .step {
+        color: #bfc1c3;
+        margin-left: 45px;
+        padding-top: 15px;
+        display: block;
+      }
+
+      .loading img {
+        float: left;
+      }
+
+      .sources {
+        margin-top: 10px;
+      }
+
+      .sources > .source {
+        background-color: rgba(255, 255, 255, 0.5);
+        font-size: 12px;
+        color: rgb(60, 60, 60);
+        padding: 0px 8px;
+        display: inline-block;
+        transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
+        transform: scale(0.95);
+        margin-bottom: 4px;
+        border-radius: 5px;
+        text-decoration: none;
+        cursor: default;
+      }
+
+      .sources > .source.has-link {
+        background-color: rgba(255, 255, 255, 0.9);
+        cursor: pointer;
+      }
+
+      .sources > .source.has-link:hover {
+        transform: scale(1);
+      }
+
+      .trust-bar {
+        position: relative;
+        width: 100%;
+        height: 3px;
+        background-color: rgba(82, 223, 219, 0.2);
+        border-radius: 5px;
+        overflow: hidden;
+        margin-bottom: 5px;
+      }
+
+      .trust-bar-fill {
+        height: 100%;
+        background-color: green;
+        transition: width 0.3s ease;
+        border-radius: 5px;
+      }
+
+      .boosts {
+        margin-top: 10px;
+        margin-bottom: 5px;
+      }
+
+      .boosts.loading {
+        display: none;
+      }
+
+      .boosts > .boost {
+        background-color: rgba(255, 255, 255, 0.7);
+        border-radius: 20px;
+        font-size: 10px;
+        color: rgb(60, 60, 60);
+        padding: 4px 14px;
+        cursor: pointer;
+        display: inline-block;
+        transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
+        transform: scale(0.95);
+        margin-bottom: 1px;
+      }
+
+      .boosts > .boost:hover {
+        transform: scale(1);
+      }
+    `,
+  ];
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+
+    mermaid.initialize({ startOnLoad: false });
+    showdown.extension('mermaid', function () {
+      return [
+        {
+          type: 'lang',
+          filter: function (text: string) {
+            return text.replace(/```mermaid([^`]+)```/g, (_match, diagramCode) => {
+              return '<div class="mermaid">' + diagramCode + '</div>';
+            });
+          },
+        },
+      ];
+    });
+    this.converter = new showdown.Converter({
+      simplifiedAutoLink: true,
+      strikethrough: true,
+      tables: true,
+      tasklists: true,
+      smoothLivePreview: true,
+    });
+    this.converter.addExtension('mermaid' as any, {} as any);
+  }
+
+  private async addMessage(content: string): Promise<void> {
+    if (this.currentBoost && !this.currentBoost.prompt) {
+      this.dispatchEvent(new CustomEvent('prompt', { detail: { prompt: '' } }));
+      return;
+    }
+
+    this.messageInput.value = '';
+    this.dispatchEvent(new CustomEvent('prompt', { detail: { prompt: content } }));
+  }
+
+  private scrollDown(): void {
+    const container = this.renderRoot.querySelector('.container') as Element;
+    container.scrollTop = container.scrollHeight;
+  }
+
+  private keypressManagement(event: any) {
+    if (event.key !== 'Enter' || event.shiftKey) {
+      this.requestUpdate();
+      return;
+    }
+
+    if (
+      (this.currentBoost && !this.canAnswerToMessageBoost(this.currentBoost)) ||
+      this.loading ||
+      ((!this.messageInput || this.messageInput.value === '') &&
+        (!this.currentBoost || this.currentBoost.required)) ||
+      !this.hasInputsValues()
+    ) {
+      this.requestUpdate();
+      return;
+    }
+
+    event.preventDefault();
+    this.addMessage(this.messageInput.value.trim());
+  }
+
+  private hasInputsValues(): boolean {
+    return this.inputsElement.values.reduce(
+      (acc, { value, required }) => (required && value === '' ? false : acc),
+      true,
+    );
+  }
+
+  private answer(message: any): void {
+    const boost = message.boost;
+
+    this.dispatchEvent(
+      new CustomEvent('boost', {
+        detail: {
+          parent_history: message.uuid,
+          parent_conversation: message.parent_conversation || message.uuid,
+          ...boost,
+        },
+      }),
+    );
+  }
+
+  private canAnswerToMessageBoost(boost: any): boolean {
+    if (!boost) {
+      return false;
+    }
+
+    if (boost.checkUrl && !boost.checkUrl.test(window.location.href)) {
+      return false;
+    }
+
+    if (boost.selector && !document.querySelector(boost.selector)) {
+      return false;
+    }
+
+    return true;
+  }
+
+  private executeBoost(boost: any): void {
+    this.dispatchEvent(
+      new CustomEvent('executeboost', {
+        detail: boost,
+      }),
+    );
+  }
+
+  private getAvailableBoosts(boosts: any[]): any[] {
+    return boosts
+      .filter(
+        (boost: any) =>
+          boost &&
+          (boost.standalone || boost.selector) &&
+          (boost.standalone || document.querySelectorAll(boost.selector).length === 1),
+      )
+      .map(boost => ({
+        ...boost,
+        context: {
+          element: boost.standalone ? null : boost.selector,
+        },
+        checkUrl: new RegExp(boost.url),
+      }))
+      .filter(boost => boost.checkUrl.test(window.location.href));
+  }
+
+  pushMessage(message: any): void {
+    this.messages.push(message);
+    this.requestUpdate();
+  }
+
+  override render(): TemplateResult {
+    if (this.previousMessages !== JSON.stringify(this.messages)) {
+      this.previousMessages = JSON.stringify(this.messages);
+      setTimeout(() => this.scrollDown(), 1);
+    }
+
+    setTimeout(() => {
+      this.renderRoot.querySelectorAll('.mermaid:not([data-processed=true]').forEach(async el => {
+        const { svg } = await mermaid.render('graphDiv', el.textContent);
+        el.innerHTML = svg;
+        el.setAttribute('data-processed', 'true');
+      });
+    }, 1);
+
+    return html`
+      <section class="container ${this.currentBoost ? 'with-boost' : ''}">
+        ${this.messages.map(
+          message =>
+            html`<section class="${message.role}">
+              ${this.canAnswerToMessageBoost(message.boost)
+                ? html`<ui5-icon
+                    name="response"
+                    class="button action"
+                    @click=${() => this.answer(message)}
+                  ></ui5-icon>`
+                : nothing}
+              ${unsafeHTML(
+                this.converter.makeHtml(
+                  message.role === 'user'
+                    ? message.content.replace(/\n/g, '  \n')
+                    : message.content.replace(
+                        /```markdown([\s\S]*?)```/g,
+                        (_: unknown, group: string) => group,
+                      ),
+                ),
+              )}
+            </section>`,
+        )}
+        <digipair-chatbot-inputs
+          @change=${() => this.requestUpdate()}
+          .inputs=${this.currentBoost?.inputs || []}
+          .context=${{ ...this.context, ...(this.currentBoost?.context || {}) }}
+        ></digipair-chatbot-inputs>
+
+        ${!this.loading
+          ? nothing
+          : html`<section class="loading">
+              <img src=${WRITTING_IMAGE} /><span class="step">${this.loadingStep}</span>
+            </section>`}
+      </section>
+
+      <section class="input-container ${this.currentBoost ? 'with-boost' : ''}">
+        <section class="input">
+          ${this.currentBoost?.parent_history
+            ? html`
+                <section class="assistant">
+                  ${this.messages
+                    .filter(message => message.uuid === this.currentBoost?.parent_history)
+                    .map(
+                      message => html`
+                        <ui5-icon
+                          name="decline"
+                          class="button action"
+                          @click=${() =>
+                            this.dispatchEvent(new CustomEvent('boost', { detail: null }))}
+                        ></ui5-icon>
+                        ${unsafeHTML(
+                          this.converter.makeHtml(
+                            message.content.replace(
+                              /```markdown([\s\S]*?)```/g,
+                              (_: unknown, group: string) => group,
+                            ),
+                          ),
+                        )}
+
+                        <section class="sources">
+                          ${message.sources?.map(
+                            (source: any) => html`
+                              <a
+                                class="source ${source.document_url ? 'has-link' : ''}"
+                                href=${source.document_url ?? 'javascript:'}
+                                target="_blank"
+                              >
+                                ${source.document_name}
+                                <div class="trust-bar">
+                                  <div
+                                    class="trust-bar-fill"
+                                    style="width: ${source.rank * 100}%;"
+                                  ></div>
+                                </div>
+                              </a>
+                            `,
+                          )}
+                        </section>
+
+                        <section class="actions ${this.loading ? 'loading' : ''}">
+                          ${this.getAvailableBoosts(message.boosts || []).map(
+                            boost => html`
+                              <span class="action" @click=${() => this.executeBoost(boost)}
+                                >${boost.summary}</span
+                              >
+                            `,
+                          )}
+                        </section>
+                      `,
+                    )}
+                </section>
+              `
+            : nothing}
+          <textarea
+            id="messageInput"
+            value=""
+            placeholder=${this.currentBoost && !this.currentBoost.prompt
+              ? ''
+              : 'Saisir votre message'}
+            @keydown=${() => this.requestUpdate()}
+            @keyup=${(event: Event) => this.keypressManagement(event)}
+            ?disabled=${this.loading || (this.currentBoost && !this.currentBoost.prompt)}
+          ></textarea>
+        </section>
+
+        <ui5-icon
+          name="begin"
+          class="button ${(this.currentBoost && !this.canAnswerToMessageBoost(this.currentBoost)) ||
+          this.loading ||
+          ((!this.messageInput || this.messageInput.value === '') &&
+            (!this.currentBoost || this.currentBoost.required)) ||
+          !this.hasInputsValues()
+            ? 'disabled'
+            : ''}"
+          @click=${() =>
+            (this.currentBoost && !this.canAnswerToMessageBoost(this.currentBoost)) ||
+            this.loading ||
+            ((!this.messageInput || this.messageInput.value === '') &&
+              (!this.currentBoost || this.currentBoost.required)) ||
+            !this.hasInputsValues()
+              ? void 0
+              : this.addMessage(this.messageInput.value.trim())}
+        ></ui5-icon>
+      </section>
+    `;
+  }
+}

package/src/lib/common.data.ts

@@ -0,0 +1 @@
+export const WRITTING_IMAGE = 'data:image/gif;base64,R0lGODlhKAAoAPD/AHp6ent7eyH/C05FVFNDQVBFMi4wAwEAAAAh+QQFAgACACwAAAAAKAAoAAACSJSPqcvtD6OctNqLs968+w+G4kiW5omm6sqOAPMqAQYEdlLfiB3EFN/bAQ853W94APqAswoyyUs8Kz7potrKarfcrvcLDoszBQAh+QQJAgAAACwAAAAAHQAbAAACGoSPqcvtD6OctNqLs968+w+G4kiW5omm6noUACH5BAkCAAIALAkAFQAWAAYAAAIblGCZqMYQYoNSxXuZwSFxbmXLV3lXgzmNtyoFACH5BAUCAAIALAkAFQAWAAYAAAIdlGCZqAcIgmxxJilrVtieDnIY84Ge0VEe2QRNUwAAIfkECQIAAgAsGgAVAAUABQAAAgiUEgLG3RvAKgAh+QQJAgACACwaABQABQAFAAACCVQQgsHNy8wRBQAh+QQJAgACACwaABQABQAFAAACCFQegHt2IEwsACH5BAkCAAIALBoAEwAFAAUAAAIIVAJ2uAebnCgAIfkECQIAAgAsGgASAAUABQAAAghUbhegx5qCKAAh+QQJAgACACwaABEABQAFAAACCBRuoafdIJooACH5BAkCAAIALBoAEAAFAAUAAAIHlBAXy93SCgAh+QQJAgACACwUAA8ACwAMAAACE5RvAYjhwQR4kNFq3Yq8+w+GYgEAIfkECQIAAgAsEgAOAA0ADAAAAhqUj4Fr4cCac1GAqeqE1fYIcNrUYeJijsG5FAAh+QQJAgACACwSAA4ADQAMAAACF5R/oYG42tKLElIDrt7G3vmBkTgq2VUAACH5BAkCAAIALBIADQANAA0AAAIalH+hgKjfDnghGlrtZbr7L0xKh2mlRXmTVwAAIfkECQIAAgAsEgAMAA0ADQAAAhqUf6HI6pxcgAY4QE0AOPsPVpMnkVcmjVCZFQAh+QQJAgACACwSAAsADQAOAAACHJR/oMjhztIL0UxQDQg4+w+G1uNd2URVT3emWQEAIfkECQIAAgAsEgALAA0ADQAAAhqUf6GAqN/SC1EGVg3OvHvxbNHETVQFQOWZFQAh+QQJAgACACwSAAoADQANAAACG5R/oMgQH9iBTxoHrXlA+w9Oi0Z5VGeVGoZaBQAh+QQJAgACACwSAAoADQAMAAACGpR/oYEIy5p5SyYF7NW8i5BxVGRBoQSRzcgVACH5BAkCAAIALBIACQANAAwAAAIZlI8RyKLazINxriiAArh77U3dxFVP2ZxdAQAh+QQJAgACACwLAAkAFAASAAACI5SPaQDqF2J8DshA1cU52dmFSNCIUFSamyms5sex8kzX9n0XACH5BAkCAAIALAkACQAWABEAAAInlI+JEOoZYnxUTuqYxM9iAHDdJkJSWB5WkxpeC8emrLJyhMaknrcFACH5BAkCAAIALAkACQAWABEAAAIrlI+Jod0BmXMgyqnsxSmCWQVfMk4al1koCZXrAbjvTGdVLZy0JaM83sIVAAAh+QQJAgACACwJAAoAFgAQAAACKZSPecHqyeKbIIZpkQU48gNUk7CNTtWYTqq27gtrUowG31vC9RXb91sAACH5BAkCAAIALAkACgAWAA8AAAIplI95AaGfgmRQTICmrDp3qGFHI4JThTYOyrbuCzNlfMFGaAsqlZO5UAAAIfkECQIAAgAsCQALABYADgAAAieUjxBoGsBSmGjaeCxtGpueWZDnLMzjperKti4LvoJmvtpoX3K2GwUAIfkECQIAAgAsCQALABYADQAAAieUfxABKNscWvRQJi2NQtX8QIiHgV0giebKtm6rvsaFymH8XpyMvwUAIfkECQIAAgAsCQAKABYADQAAAimUjwCB7Rcie9TIAFKs4uqYUcrybZyzgOeTrmvrIlcYd14tpBhuLHRdAAAh+QQJAgACACwJAAoAFgAMAAACJpR/oYDtqQJ7VETVwKRgtVtZm3EF4VOeT4dJpppFI5zCkGdDM1wAACH5BAkCAAIALAkACQAWAAwAAAImlI8RyJ0KnDyqTllDvK1uCixcE1rjY2mnUELeCQnZt2biKse4UQAAIfkEBQIAAgAsCQAJABYACwAAAiSUjxDInQGdPBCCKWvErV78cZShbKKnLVyZBuHEupVIzsJLGwUAIfkECQIAAAAsAAAAAB8AFAAAAheEj6nL7Q+jnLTai7PevPsPhuJIlmZXAAAh+QQJAgACACwJAAoAFgAKAAACI5R/oYHtudibIkrqgAI0usB1S4gJwFmNpRlpysouBlm2cCMXACH5BAkCAAIALAkACgAWAAsAAAIklH8Qi+232JsmSqcCaJbawG1eRz3ZVSoimkZiyZEwYr0zBGwFACH5BAkCAAIALAkACgAWAAwAAAInlI8QyI0BlzMKsBisU/HhiUlGpDlY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';

package/src/lib/config.ts

@@ -0,0 +1,30 @@
+import { config as configEngine } from '@digipair/engine';
+import * as actionsChatbot from './pins/chatbot.actions';
+
+configEngine.set('LIBRARIES', {
+  '@digipair/actions-chatbot': actionsChatbot,
+});
+
+type CONFIG_KEY = 'API_URL' | 'COMMON_EXPERIENCE' | 'BASE_URL' | 'LIBRARIES' | 'VERSIONS';
+export const _config = {
+  API_URL: window.location.origin,
+  COMMON_EXPERIENCE: 'common',
+};
+export const config = {
+  set: (key: CONFIG_KEY, value: any) => {
+    if (key === 'LIBRARIES') {
+      configEngine.set('LIBRARIES', {
+        '@digipair/actions-chatbot': actionsChatbot,
+        ...value,
+      });
+      return;
+    }
+
+    if (['BASE_URL', 'VERSIONS'].indexOf(key) >= 0) {
+      configEngine.set('BASE_URL', value);
+      return;
+    }
+
+    _config[key as 'API_URL' | 'COMMON_EXPERIENCE'] = value;
+  },
+};