biel-search 0.0.1

package/dist/collection/components/biel-bot/biel-bot.css

@@ -0,0 +1,189 @@
+.text-center {
+  flex-grow: 1;
+  text-align: center;
+}
+
+.biel-bot-wrapper {
+  position: absolute;
+  z-index: var(--biel-bot-wrapper-z-index);
+}
+
+.biel-overlay {
+  background-color: var(--biel-bot-screenshot-bg-color);
+  height: 100%;
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: var(--biel-bot-screnshot-z-index);
+}
+
+.biel-bot {
+  display: inline-block;
+  position: relative;
+}
+
+.biel-bot-content {
+  background-color: var(--biel-bot-content-bg-color);
+  border: 1px solid var(--biel-bot-header-text-color);
+  border-radius: var(--biel-bot-content-border-radius);
+  box-shadow: 0px 1px 2px 0px rgba(60, 64, 67, .30), 0px 2px 6px 2px rgba(60, 64, 67, .15);
+  box-sizing: border-box;
+  color: var(--biel-bot-content-text-color);
+  display: flex;
+  flex-direction: column;
+  font-family: var(--biel-bot-content-font-family);
+  left: 50%;
+  max-width: 90%;
+  max-height: 80vh;
+  overflow: hidden;
+  padding: 20px;
+  position: fixed;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 100%;
+  z-index: var(--biel-bot-content-z-index);
+}
+
+.biel-bot-header {
+  margin-bottom: 20px;
+}
+
+.biel-bot-footer {
+  font-size: var(--biel-footer-font-size);
+  text-align: center;
+}
+
+.biel-bot-footer a {
+  color: var(--biel-bot-footer-link);
+  font-weight: 500;
+  text-decoration: none;
+}
+
+.biel-logo {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  margin-top: 5px;
+}
+
+.biel-logo a {
+  margin-left: 3px;
+}
+
+.biel-bot-close {
+  background-color: var(--biel-bot-close-bg-color);
+  border: 0;
+  border-radius: 50%;
+  cursor: pointer;
+  height: 22px;
+  margin-left: auto;
+  padding: 0;
+  width: 22px;
+}
+
+.biel-bot-close svg {
+  stroke: var(--biel-bot-close-color);
+}
+
+.biel-bot-content.fullscreen {
+  width: 100vw;
+  max-width: 100vw;
+  height: 100vh;
+  max-height: 100vh;
+  border-radius: 0;
+  padding: 20px 5vw;
+  left: 50%;
+  top: 50%;
+  max-width: 100vw;
+  transform: translate(-50%, -50%);
+}
+
+@media screen and (min-width: 768px) {
+
+  .biel-bot-content {
+    max-width: 600px;
+    max-height: 82vh;
+  }
+
+  .biel-bot-content.biel-bot-content--bottom-right {
+    bottom: var(--biel-bot-content-position-bottom);
+    left: initial;
+    right: var(--biel-bot-content-position-right);
+    top: initial;
+    transform: initial;
+  }
+
+  .biel-bot-content.biel-bot-content--bottom-left {
+    bottom: var(--biel-bot-content-position-bottom);
+    left: var(--biel-bot-content-position-left);
+    top: initial;
+    transform: initial;
+  }
+
+  .biel-bot-content.biel-bot-content--top-right {
+    right: var(--biel-bot-content-position-right);
+    top: var(--biel-bot-content-position-top);
+    transform: initial;
+  }
+
+  .biel-bot-content.biel-bot-content--top-left {
+    left: var(--biel-bot-content-position-left);
+    top: var(--biel-bot-content-position-top);
+    transform: initial;
+  }
+
+  .biel-bot-content.biel-bot-content--center-left {
+    left: 5px;
+    right: auto;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .biel-bot-content.biel-bot-content--center-right {
+    left: auto;
+    right: 5px;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .biel-bot-content.biel-bot-content--sidebar-left.biel-bot-content--open,
+  .biel-bot-content.biel-bot-content--sidebar-right.biel-bot-content--open {
+    transform: translateX(0);
+  }
+
+  .biel-bot-content.biel-bot-content--sidebar-left {
+    max-width: 300px;
+    left: 0;
+    right: auto;
+    height: 100vh;
+    top: 0;
+    transform: translateX(-100%);
+    transition: transform 0.5s ease-in-out;
+    border-radius: 0;
+  }
+
+  .biel-bot-content.biel-bot-content--sidebar-right {
+    max-width: 300px;
+    left: auto;
+    right: 0;
+    height: 100vh;
+    top: 0;
+    transform: translateX(100%);
+    transition: transform 0.5s ease-in-out;
+    border-radius: 0;
+  }
+
+  .biel-bot-content.fullscreen {
+    width: 100vw;
+    max-width: 100vw;
+    height: 100vh;
+    max-height: 100vh;
+    border-radius: 0;
+    padding: 20px 25vw;
+    left: 50%;
+    top: 50%;
+    max-width: 100vw;
+    transform: translate(-50%, -50%);
+  }
+}

package/dist/collection/components/biel-bot/biel-bot.js

@@ -0,0 +1,338 @@
+import { h } from "@stencil/core";
+import { BielWebSocketService } from "../../services/biel-websocket-service";
+import { BielService } from "../../services/biel-service";
+export class BielBot {
+    handleClose() {
+        this.showModal = false;
+        document.body.style.overflow = '';
+    }
+    handleFullscreenClicked() {
+        this.isFullscreen = !this.isFullscreen;
+        document.body.style.overflow = this.isFullscreen ? 'hidden' : '';
+    }
+    constructor() {
+        this.modalPosition = 'center';
+        this.project = '';
+        this.showModal = false;
+        this.fetchData = true;
+        this.headerTitle = 'Company Name AI';
+        this.inputPlaceholderText = 'Type your message';
+        this.sendButtonText = 'Send';
+        this.hideExpandButton = false;
+        this.expandModal = false;
+        this.errorMessage404 = "Oops! We could not find the provided project ID.";
+        this.errorMessage403 = "Oops! The request URL does not match the one defined for this project.";
+        this.errorMessageDefault = "Oops! Please try again later.";
+        this.footerText = "AI generated answers. Always verify the sources before using them.";
+        this.isFullscreen = this.expandModal;
+        this.isLoading = false;
+        this.showPoweredBy = true;
+        this.welcomeMessage = undefined;
+        this.messages = [];
+        this.webSocketService = new BielWebSocketService(this.project, this.errorMessageDefault);
+        this.webSocketService.onMessage(this.handleIncomingMessage.bind(this));
+        this.webSocketService.onLoadingStart(() => this.isLoading = true);
+        this.webSocketService.onLoadingEnd(() => this.isLoading = false);
+    }
+    handleIncomingMessage(message) {
+        this.messages = [...this.messages, { sender: message.from, text: message.message }];
+    }
+    async componentWillLoad() {
+        if (this.fetchData) {
+            this.bielService = new BielService(this.project, this.errorMessage404, this.errorMessage403, this.errorMessageDefault);
+            const result = await this.bielService.getProjectDetails();
+            if (typeof result === 'string') {
+                this.welcomeMessage = result;
+            }
+            else {
+                this.showPoweredBy = result.whitelabel;
+                this.welcomeMessage = result.initialMessage;
+            }
+            if (this.welcomeMessage) {
+                this.messages = [{ text: this.welcomeMessage, sender: 'ai' }];
+            }
+        }
+    }
+    handleMessageSent(event) {
+        this.messages = [...this.messages, { text: event.detail, sender: 'user' }];
+        this.webSocketService.sendMessage(event.detail);
+    }
+    render() {
+        return (h("div", { key: '0779ac463e2d1daf5e7d1f6d92ed9592776972bf', class: 'biel-bot-wrapper' }, this.showModal && (h("div", { key: '39c72fbe3b17de2b2b881d8a39bd8bec270cac13', class: "feedback-overlay" })), this.showModal && (h("div", { key: '692eccc43cd4dbc39ba510f8422ab13c083aa782', class: `biel-bot-content biel-bot-content--${this.modalPosition} ${this.showModal ? 'biel-bot-content--open' : ''} ${this.isFullscreen ? 'fullscreen' : ''}`, ref: el => (this.modalContent = el) }, h("div", { key: '01240aab4b14cd6a24bc59c1d951ed679ce8a53c', class: "biel-bot-header" }, h("biel-header", { key: 'c4624af08036041b033cc70c02b508e76787dd0b', headerTitle: this.headerTitle, project: this.project, showPoweredBy: this.showPoweredBy, hideExpandButton: this.hideExpandButton, fullscreen: this.isFullscreen })), h("div", { key: '54d8b6290f60c5b9427b92f89770cda198b06be5', class: "biel-bot-body" }, h("biel-chat", { key: 'd811b46f4dfdd5b41087839f60915f452272ebbf', messages: this.messages, isFullscreen: this.isFullscreen, isLoading: this.isLoading }), h("biel-input", { key: 'fa83a2a460f30367062ecebe5c8f2d36964f8758', placeholderText: this.inputPlaceholderText, sendButtonText: this.sendButtonText, onMessageSent: (event) => this.handleMessageSent(event), isDisabled: this.isLoading })), h("div", { key: '25b1bfa2642d542c621821f5502db5467ab33d8c', class: "biel-bot-footer" }, this.footerText)))));
+    }
+    static get is() { return "biel-bot"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["biel-bot.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["biel-bot.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "modalPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "modal-position",
+                "reflect": false,
+                "defaultValue": "'center'"
+            },
+            "project": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "project",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "showModal": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "show-modal",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "fetchData": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "fetch-data",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "headerTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "header-title",
+                "reflect": false,
+                "defaultValue": "'Company Name AI'"
+            },
+            "inputPlaceholderText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "input-placeholder-text",
+                "reflect": false,
+                "defaultValue": "'Type your message'"
+            },
+            "sendButtonText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "send-button-text",
+                "reflect": false,
+                "defaultValue": "'Send'"
+            },
+            "hideExpandButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "hide-expand-button",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "expandModal": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "expand-modal",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "errorMessage404": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "error-message-4-0-4",
+                "reflect": false,
+                "defaultValue": "\"Oops! We could not find the provided project ID.\""
+            },
+            "errorMessage403": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "error-message-4-0-3",
+                "reflect": false,
+                "defaultValue": "\"Oops! The request URL does not match the one defined for this project.\""
+            },
+            "errorMessageDefault": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "error-message-default",
+                "reflect": false,
+                "defaultValue": "\"Oops! Please try again later.\""
+            },
+            "footerText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "footer-text",
+                "reflect": false,
+                "defaultValue": "\"AI generated answers. Always verify the sources before using them.\""
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isFullscreen": {},
+            "isLoading": {},
+            "showPoweredBy": {},
+            "welcomeMessage": {},
+            "messages": {}
+        };
+    }
+    static get listeners() {
+        return [{
+                "name": "closeClicked",
+                "method": "handleClose",
+                "target": "body",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "fullscreenClicked",
+                "method": "handleFullscreenClicked",
+                "target": "body",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=biel-bot.js.map

package/dist/collection/components/biel-bot/biel-bot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"biel-bot.js","sourceRoot":"","sources":["../../../src/components/biel-bot/biel-bot.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Listen, Prop, State } from '@stencil/core';\nimport { BielWebSocketService } from '../../services/biel-websocket-service';\nimport { BielService } from '../../services/biel-service';\n\n@Component({\n  tag: 'biel-bot',\n  styleUrl: 'biel-bot.css',\n  shadow: true\n})\nexport class BielBot {\n\n  // Define the component properties\n  @Prop() modalPosition: string = 'center';\n  @Prop() project: string = '';\n  @Prop({ mutable: true, reflect: true }) showModal: boolean = false;\n  @Prop() fetchData: boolean = true;\n  @Prop() headerTitle: string = 'Company Name AI';\n  @Prop() inputPlaceholderText: string = 'Type your message';\n  @Prop() sendButtonText: string = 'Send';\n  @Prop() hideExpandButton: boolean = false;\n  @Prop() expandModal: boolean = false;\n  @Prop() errorMessage404: string = \"Oops! We could not find the provided project ID.\";\n  @Prop() errorMessage403: string = \"Oops! The request URL does not match the one defined for this project.\";\n  @Prop() errorMessageDefault: string = \"Oops! Please try again later.\";\n  @Prop() footerText: string = \"AI generated answers. Always verify the sources before using them.\";\n\n  @State() isFullscreen: boolean = this.expandModal;\n  @State() isLoading: boolean = false;\n  @State() showPoweredBy: boolean = true;\n  @State() welcomeMessage: string;\n  @State() messages: { text: string, sender: 'user' | 'ai' }[] = [];\n\n  @Listen('closeClicked', { target: 'body' })\n  handleClose() {\n    this.showModal = false;\n    document.body.style.overflow = '';\n  }\n  @Listen('fullscreenClicked', { target: 'body' })\n  handleFullscreenClicked() {\n    this.isFullscreen = !this.isFullscreen;\n    document.body.style.overflow = this.isFullscreen ? 'hidden' : '';\n  }\n\n  // Define the accesible and modificable divs in the screenshot\n  modalContent: HTMLElement;\n  webSocketService: BielWebSocketService;\n  bielService: BielService;\n\n  constructor() {\n    this.webSocketService = new BielWebSocketService(this.project, this.errorMessageDefault);\n    this.webSocketService.onMessage(this.handleIncomingMessage.bind(this));\n    this.webSocketService.onLoadingStart(() => this.isLoading = true);\n    this.webSocketService.onLoadingEnd(() => this.isLoading = false);\n  }\n\n  handleIncomingMessage(message: any) {\n    this.messages = [...this.messages, { sender: message.from, text: message.message }];\n  }\n\n  async componentWillLoad() {\n    if (this.fetchData) {\n      this.bielService = new BielService(\n        this.project,\n        this.errorMessage404,\n        this.errorMessage403,\n        this.errorMessageDefault\n      );\n      const result = await this.bielService.getProjectDetails();\n\n      if (typeof result === 'string') {\n        this.welcomeMessage = result;\n      } else {\n        this.showPoweredBy = result.whitelabel;\n        this.welcomeMessage = result.initialMessage;\n      }\n      if (this.welcomeMessage) {\n        this.messages = [{ text: this.welcomeMessage, sender: 'ai' }];\n      }\n    }\n  }\n\n  handleMessageSent(event: CustomEvent<string>) {\n    this.messages = [...this.messages, { text: event.detail, sender: 'user' }];\n    this.webSocketService.sendMessage(event.detail);\n  }\n\n  render() {\n    return (\n      <div class='biel-bot-wrapper'>\n        {this.showModal && (<div class=\"feedback-overlay\"></div>)}\n        {this.showModal && (\n          <div class={`biel-bot-content biel-bot-content--${this.modalPosition} ${this.showModal ? 'biel-bot-content--open' : ''} ${this.isFullscreen ? 'fullscreen' : ''}`} ref={el => (this.modalContent = el)}>\n            <div class=\"biel-bot-header\">\n              <biel-header headerTitle={this.headerTitle} project={this.project} showPoweredBy={this.showPoweredBy} hideExpandButton={this.hideExpandButton} fullscreen={this.isFullscreen}></biel-header>\n            </div>\n            <div class=\"biel-bot-body\">\n              <biel-chat messages={this.messages} isFullscreen={this.isFullscreen} isLoading={this.isLoading}></biel-chat>\n              <biel-input\n                placeholderText={this.inputPlaceholderText}\n                sendButtonText={this.sendButtonText}\n                onMessageSent={(event) => this.handleMessageSent(event)}\n                isDisabled={this.isLoading}>\n              </biel-input>\n            </div>\n            <div class=\"biel-bot-footer\">\n              {this.footerText}\n            </div>\n          </div>\n        )}\n      </div>\n    );\n  }\n}"]}

package/dist/collection/components/biel-button/biel-button.css

@@ -0,0 +1,63 @@
+.biel-button-content {
+  cursor: pointer;
+  max-width: fit-content;
+  z-index: var(-biel-button-z-index);
+}
+
+.biel-button-content--light{
+  align-items: center;
+  background-color: var(--biel-button-light-bg-color);
+  border-radius: var(--biel-button-border-radius);
+  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
+  box-sizing: border-box;
+  color: var(--biel-button-light-text-color);
+  display: flex;
+  font-family: var(--feedback-font-family);
+  font-size: var(--biel-button-text-font-size);
+  font-weight: var(--biel-button-text-font-weight);
+  padding: 8px 15px;
+}
+
+.biel-button-content--dark{
+  align-items: center;
+  background-color: var(--biel-button-dark-bg-color);
+  border-radius: var(--biel-button-border-radius);
+  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
+  box-sizing: border-box;
+  color: var(--biel-button-dark-text-color);
+  display: flex;
+  font-family: var(--feedback-font-family);
+  font-weight: var(--biel-button-text-font-weight);
+  font-size: var(--biel-button-text-font-size);
+  padding: 8px 15px;
+}
+
+.biel-button-content--bottom-right{
+  bottom: 10px;
+  position: fixed;
+  right: 10px;
+}
+
+.biel-button-content--center-right{
+  position: fixed;
+  transform: rotate(-90deg) translateY(-50%);
+  top: 50%;
+}
+
+.biel-button-content--center-right.biel-button-content--dark,
+.biel-button-content--center-right.biel-button-content--light {
+  border-radius: 4px;
+  border-bottom-left-radius: 0px;
+  border-bottom-right-radius: 0px;
+}
+
+
+.biel-button-content-icon {
+  height: 16px;
+  margin-right: 5px;
+  width: 16px;
+}
+
+.biel-button-content--center-right .biel-button-content-icon {
+  rotate: 90deg;
+}