open-chat-studio-widget 0.4.2 → 0.4.3

package/dist/cjs/open-chat-studio-widget.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b700441a.js');
+const index = require('./index-bcb28089.js');
 const appGlobals = require('./app-globals-3a1e7e63.js');
 
 /*

package/dist/collection/components/ocs-chat/ocs-chat.css

@@ -503,7 +503,7 @@ video {
   border-radius: 0.5rem;
   text-align: left;
   transition-duration: 200ms;
-    padding: var(--starter-question-padding, 0.75rem);
+    padding: var(--starter-question-padding, 0.75em);
     background-color: var(--starter-question-bg-color);
     border: 1px solid var(--starter-question-border-color);
     color: var(--starter-question-text-color);
@@ -540,7 +540,7 @@ video {
   display: flex;
   align-items: center;
   gap: 8px;
-    padding: var(--button-padding, 0.75rem);
+    padding: var(--button-padding, 0.75em);
     color: var(--button-text-color, #111827);
 }
 .chat-btn-text:hover {
@@ -555,12 +555,12 @@ video {
   flex-shrink: 0;
   -o-object-fit: contain;
      object-fit: contain;
-    width: var(--button-icon-width, 1.5rem);
-    height: var(--button-icon-height, 1.5rem);
+    width: var(--button-icon-width, 1.5em);
+    height: var(--button-icon-height, 1.5em);
 }
 /* Icon-only button */
 .chat-btn-icon {
-    padding: var(--button-padding, 0.75rem);
+    padding: var(--button-padding, 0.75em);
     width: 56px;
     height: 56px;
   }
@@ -576,7 +576,7 @@ video {
 }
 /* Error message styling */
 .error-message {
-    padding: var(--error-message-padding, 0.5rem);
+    padding: var(--error-message-padding, 0.5em);
     color: var(--error-text-color);
   }
 /* Chat window positioning classes */
@@ -588,7 +588,6 @@ video {
   height: 100%;
   max-height: 100%;
   width: 100%;
-  max-width: 1024px;
   flex-direction: column;
   overflow: hidden;
   border-radius: 0px;
@@ -601,12 +600,15 @@ video {
   transition-duration: 200ms;
     background-color: var(--chat-window-bg-color);
     font-size: var(--chat-window-font-size);
+    max-width: var(--chat-window-fullscreen-width);
 }
 .chat-window-normal {
   position: fixed;
   display: flex;
-  height: 83.333333%;
-  width: 100%;
+  height: 100vh;
+  min-height: 300px;
+  width: 100vw;
+  min-width: 300px;
   max-width: 1024px;
   flex-direction: column;
   overflow: hidden;
@@ -615,7 +617,8 @@ video {
 @media (min-width: 640px) {
 
   .chat-window-normal {
-    width: 450px;
+    height: var(--chat-window-height);
+    width: var(--chat-window-width);
   }
 }
 .chat-window-normal {
@@ -644,7 +647,7 @@ video {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
-    padding: var(--header-padding, 0.5rem);
+    padding: var(--header-padding, 0.5em);
     background-color: var(--header-bg-color);
     border-bottom: 1px solid var(--header-border-color);
 }
@@ -690,7 +693,7 @@ video {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 200ms;
-    padding: var(--button-padding-sm, 0.375rem);
+    padding: var(--button-padding-sm, 0.375em);
     color: var(--header-button-text-color);
 }
 .header-button:hover {
@@ -750,7 +753,7 @@ video {
   background-color: var(--scrollbar-thumb-hover-color);
 }
 .messages-container {
-    padding: var(--container-padding, 1rem);
+    padding: var(--container-padding, 1em);
   }
 /* Message bubbles */
 .message-row {
@@ -763,18 +766,9 @@ video {
   justify-content: flex-start;
 }
 .message-bubble {
-  max-width: 20rem;
   border-radius: 0.5rem;
+    padding: var(--message-padding-y, 0.5em) var(--message-padding-x, 1em);
 }
-@media (min-width: 1024px) {
-
-  .message-bubble {
-    max-width: 28rem;
-  }
-}
-.message-bubble {
-    padding: var(--message-padding-y, 0.5rem) var(--message-padding-x, 1rem);
-  }
 .message-bubble-user {
     background-color: var(--message-user-bg-color);
     color: var(--message-user-text-color);
@@ -890,7 +884,7 @@ video {
   margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
 }
 .starter-questions {
-    padding: var(--container-padding, 1rem);
+    padding: var(--container-padding, 1em);
     font-size: var(--chat-window-font-size);
   }
 .starter-question-row {
@@ -899,7 +893,7 @@ video {
 }
 /* Input area */
 .input-area {
-    padding: var(--container-padding, 1rem);
+    padding: var(--container-padding, 1em);
     background-color: var(--input-bg-color);
     border-top: 1px solid var(--input-border-color);
     font-size: var(--chat-window-font-size);
@@ -920,7 +914,7 @@ video {
   outline-color: #93c5fd;
 }
 .message-textarea {
-    padding: var(--input-textarea-padding-y, 0.5rem) var(--input-textarea-padding-x, 0.75rem);
+    padding: var(--input-textarea-padding-y, 0.5em) var(--input-textarea-padding-x, 0.75em);
     color: var(--input-text-color);
     border: 1px solid var(--input-border-color);
   }
@@ -933,7 +927,7 @@ video {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 200ms;
-    padding: var(--send-button-padding-y, 0.5rem) var(--send-button-padding-x, 1rem);
+    padding: var(--send-button-padding-y, 0.5em) var(--send-button-padding-x, 1em);
     font-size: var(--chat-window-font-size);
 }
 .send-button-enabled {
@@ -964,9 +958,6 @@ video {
   width: 1.5rem;
   height: 1.5rem;
 }
-.h-5\/6 {
-  height: 83.333333%;
-}
 .transform {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
@@ -982,7 +973,7 @@ video {
   /**
     * Global Variables
     * @prop --chat-z-index: Z-index for chat widget (50)
-    * @prop --container-padding: General container padding (1rem)
+    * @prop --container-padding: General container padding (1em)
     *
     * Button Variables
     * @prop --button-background-color: Button background color (#ffffff)
@@ -991,18 +982,21 @@ video {
     * @prop --button-text-color-hover: Button text color on hover (#1d4ed8)
     * @prop --button-border-color: Button border color (#6b7280)
     * @prop --button-border-color-hover: Button border color on hover (#374151)
-    * @prop --button-padding: Button padding (0.75rem)
-    * @prop --button-padding-sm: Small button padding (0.375rem)
-    * @prop --button-font-size: Button text font size (0.875rem)
-    * @prop --button-icon-width: Button icon width (1.5rem)
-    * @prop --button-icon-height: Button icon height (1.5rem)
+    * @prop --button-padding: Button padding (0.75em)
+    * @prop --button-padding-sm: Small button padding (0.375em)
+    * @prop --button-font-size: Button text font size (0.875em)
+    * @prop --button-icon-width: Button icon width (1.5em)
+    * @prop --button-icon-height: Button icon height (1.5em)
     *
     * Chat Window Variables
+    * @prop --chat-window-height: Chat window height in pixels or percent (60%)
+    * @prop --chat-window-width: Chat window width in pixels or percent (25%)
+    * @prop --chat-window-fullscreen-width: Chat window fullscreen width in pixels or percent (80%)
     * @prop --chat-window-bg-color: Chat window background color (#ffffff)
     * @prop --chat-window-border-color: Chat window border color (#d1d5db)
     * @prop --chat-window-shadow-color: Chat window shadow color (rgba(0, 0, 0, 0.1))
-    * @prop --chat-window-font-size: Default font size for text in the chat window (0.875rem)
-    * @prop --chat-window-font-size-sm: Font size for small text in the chat window (0.75rem)
+    * @prop --chat-window-font-size: Default font size for text in the chat window (0.875em)
+    * @prop --chat-window-font-size-sm: Font size for small text in the chat window (0.75em)
     *
     * Header Variables
     * @prop --header-bg-color: Header background color (transparent)
@@ -1010,7 +1004,7 @@ video {
     * @prop --header-border-color: Header border color (#f3f4f6)
     * @prop --header-button-text-color: Header button text color (#6b7280)
     * @prop --header-button-bg-hover-color: Header button background on hover (#f3f4f6)
-    * @prop --header-padding: Header padding (0.5rem)
+    * @prop --header-padding: Header padding (0.5em)
     *
     * Starter Question Variables
     * @prop --starter-question-bg-color: Starter question background color (transparent)
@@ -1018,7 +1012,7 @@ video {
     * @prop --starter-question-text-color: Starter question text color (#3b82f6)
     * @prop --starter-question-border-color: Starter question border color (#3b82f6)
     * @prop --starter-question-border-hover-color: Starter question border on hover (#2563eb)
-    * @prop --starter-question-padding: Starter question padding (0.75rem)
+    * @prop --starter-question-padding: Starter question padding (0.75em)
     *
     * Message Bubble Variables
     * @prop --message-user-bg-color: User message background color (#3b82f6)
@@ -1029,8 +1023,8 @@ video {
     * @prop --message-system-text-color: System message text color (#4b5563)
     * @prop --message-timestamp-color: User message timestamp color (rgba(255, 255, 255, 0.7))
     * @prop --message-timestamp-assistant-color: Assistant message timestamp color (rgba(75, 85, 99, 0.7))
-    * @prop --message-padding-x: Message horizontal padding (1rem)
-    * @prop --message-padding-y: Message vertical padding (0.5rem)
+    * @prop --message-padding-x: Message horizontal padding (1em)
+    * @prop --message-padding-y: Message vertical padding (0.5em)
     *
     * Input Area Variables
     * @prop --input-bg-color: Input area background color (transparent)
@@ -1038,8 +1032,8 @@ video {
     * @prop --input-text-color: Input text color (#111827)
     * @prop --input-placeholder-color: Input placeholder text color (#6b7280)
     * @prop --input-outline-focus-color: Input field focus ring color (#3b82f6)
-    * @prop --input-textarea-padding-x: Input textarea horizontal padding (0.75rem)
-    * @prop --input-textarea-padding-y: Input textarea vertical padding (0.5rem)
+    * @prop --input-textarea-padding-x: Input textarea horizontal padding (0.75em)
+    * @prop --input-textarea-padding-y: Input textarea vertical padding (0.5em)
     *
     * Send Button Variables
     * @prop --send-button-bg-color: Send button background color (#3b82f6)
@@ -1047,14 +1041,14 @@ video {
     * @prop --send-button-text-color: Send button text color (#ffffff)
     * @prop --send-button-bg-disabled-color: Send button background when disabled (#d1d5db)
     * @prop --send-button-text-disabled-color: Send button text when disabled (#6b7280)
-    * @prop --send-button-padding-x: Send button horizontal padding (1rem)
-    * @prop --send-button-padding-y: Send button vertical padding (0.5rem)
+    * @prop --send-button-padding-x: Send button horizontal padding (1em)
+    * @prop --send-button-padding-y: Send button vertical padding (0.5em)
     *
     * Loading Variables
     * @prop --loading-text-color: Loading text color (#6b7280)
     * @prop --loading-spinner-track-color: Loading spinner track color (#e5e7eb)
     * @prop --loading-spinner-fill-color: Loading spinner fill color (#3b82f6)
-    * @prop --loading-spinner-size: Loading spinner size (1.25rem)
+    * @prop --loading-spinner-size: Loading spinner size (1.25em)
     *
     * Typing Indicator Variables
     * @prop --typing-progress-bg-color: Typing progress bar background color (#ade3ff)
@@ -1066,19 +1060,19 @@ video {
     *
     * Error Variables
     * @prop --error-text-color: Error text color (#ef4444)
-    * @prop --error-message-padding: Error message padding (0.5rem)
+    * @prop --error-message-padding: Error message padding (0.5em)
     *
     * Markdown Code Variables
-    * @prop --code-bg-user-color: Code background in user messages (rgba(59, 130, 246, 0.3))
-    * @prop --code-text-user-color: Code text color in user messages (#dbeafe)
-    * @prop --code-border-user-color: Code border in user messages (rgba(59, 130, 246, 0.6))
-    * @prop --code-bg-assistant-color: Code background in assistant messages (#ffffff)
-    * @prop --code-text-assistant-color: Code text color in assistant messages (#1f2937)
-    * @prop --code-border-assistant-color: Code border in assistant messages (#d1d5db)
+    * @prop --code-bg-user-color: Code background in user messages (--message-user-bg-color + 20% white)
+    * @prop --code-text-user-color: Code text color in user messages (--message-user-text-color)
+    * @prop --code-border-user-color: Code border in user messages (--message-user-bg-color + 20% black)
+    * @prop --code-bg-assistant-color: Code background in assistant messages (--message-assistant-bg-color + 50% white)
+    * @prop --code-text-assistant-color: Code text color in assistant messages (--message-assistant-text-color)
+    * @prop --code-border-assistant-color: Code border in assistant messages (--message-assistant-bg-color + 10% black)
     */
   /* Global variables */
   --chat-z-index: 50;
-  --container-padding: 1rem;
+  --container-padding: 1em;
 
   /* Button variables */
   --button-background-color: #ffffff;
@@ -1087,18 +1081,21 @@ video {
   --button-text-color-hover: #1d4ed8;
   --button-border-color: #6b7280;
   --button-border-color-hover: #374151;
-  --button-padding: 0.75rem;
-  --button-padding-sm: 0.375rem;
-  --button-font-size: 0.875rem; /* text-sm */
-  --button-icon-width: 1.5rem;
-  --button-icon-height: 1.5rem;
+  --button-padding: 0.75em;
+  --button-padding-sm: 0.375em;
+  --button-font-size: 0.875em; /* text-sm */
+  --button-icon-width: 1.5em;
+  --button-icon-height: 1.5em;
 
   /* Chat window variables */
+  --chat-window-height: 60%;
+  --chat-window-width: 25%;
+  --chat-window-fullscreen-width: 80%;
   --chat-window-bg-color: #ffffff;
   --chat-window-border-color: #d1d5db;
   --chat-window-shadow-color: rgba(0, 0, 0, 0.1);
-  --chat-window-font-size: 0.875rem; /* text-sm */
-  --chat-window-font-size-sm: 0.75rem; /* text-xs */
+  --chat-window-font-size: 0.875em; /* text-sm */
+  --chat-window-font-size-sm: 0.75em; /* text-xs */
 
   /* Header variables */
   --header-bg-color: transparent;
@@ -1106,7 +1103,7 @@ video {
   --header-border-color: #f3f4f6;
   --header-button-text-color: #6b7280;
   --header-button-bg-hover-color: #f3f4f6;
-  --header-padding: 0.5rem;
+  --header-padding: 0.5em;
 
   /* Starter question variables */
   --starter-question-bg-color: transparent;
@@ -1114,7 +1111,7 @@ video {
   --starter-question-text-color: #3b82f6;
   --starter-question-border-color: #3b82f6;
   --starter-question-border-hover-color: #2563eb;
-  --starter-question-padding: 0.75rem;
+  --starter-question-padding: 0.75em;
 
   /* Message bubble variables */
   --message-user-bg-color: #3b82f6;
@@ -1125,8 +1122,8 @@ video {
   --message-system-text-color: #4b5563;
   --message-timestamp-color: rgba(255, 255, 255, 0.7);
   --message-timestamp-assistant-color: rgba(75, 85, 99, 0.7);
-  --message-padding-x: 1rem;
-  --message-padding-y: 0.5rem;
+  --message-padding-x: 1em;
+  --message-padding-y: 0.5em;
 
   /* Input area variables */
   --input-bg-color: transparent;
@@ -1134,8 +1131,8 @@ video {
   --input-text-color: #111827;
   --input-placeholder-color: #6b7280;
   --input-outline-focus-color: #3b82f6;
-  --input-textarea-padding-x: 0.75rem;
-  --input-textarea-padding-y: 0.5rem;
+  --input-textarea-padding-x: 0.75em;
+  --input-textarea-padding-y: 0.5em;
 
   /* Send button variables */
   --send-button-bg-color: #3b82f6;
@@ -1143,14 +1140,14 @@ video {
   --send-button-text-color: #ffffff;
   --send-button-bg-disabled-color: #d1d5db;
   --send-button-text-disabled-color: #6b7280;
-  --send-button-padding-x: 1rem;
-  --send-button-padding-y: 0.5rem;
+  --send-button-padding-x: 1em;
+  --send-button-padding-y: 0.5em;
 
   /* Loading variables */
   --loading-text-color: #6b7280;
   --loading-spinner-track-color: #e5e7eb;
   --loading-spinner-fill-color: #3b82f6;
-  --loading-spinner-size: 1.25rem;
+  --loading-spinner-size: 1.25em;
 
   /* Typing indicator variables */
   --typing-progress-bg-color: #ade3ff;
@@ -1162,15 +1159,15 @@ video {
 
   /* Error variables */
   --error-text-color: #ef4444;
-  --error-message-padding: 0.5rem;
+  --error-message-padding: 0.5em;
 
   /* Markdown code variables */
-  --code-bg-user-color: rgba(59, 130, 246, 0.3);
-  --code-text-user-color: #dbeafe;
-  --code-border-user-color: rgba(59, 130, 246, 0.6);
-  --code-bg-assistant-color: #ffffff;
-  --code-text-assistant-color: #1f2937;
-  --code-border-assistant-color: #d1d5db;
+  --code-bg-user-color: color-mix(in srgb, var(--message-user-bg-color) 80%, white 20%);
+  --code-text-user-color: var(--message-user-text-color);
+  --code-border-user-color: color-mix(in srgb, var(--message-user-bg-color) 90%, black 10%);
+  --code-bg-assistant-color: color-mix(in srgb, var(--message-assistant-bg-color) 50%, white 50%);
+  --code-text-assistant-color: var(--message-assistant-text-color);
+  --code-border-assistant-color: color-mix(in srgb, var(--message-assistant-bg-color) 90%, black 10%);;
 
   display: block;
   position: fixed;
@@ -1212,8 +1209,8 @@ textarea::-webkit-scrollbar-thumb:hover {
   border-width: 2px;
   border-color: var(--loading-spinner-track-color);
   border-top-color: var(--loading-spinner-fill-color);
-  width: var(--loading-spinner-size, 1.25rem);
-  height: var(--loading-spinner-size, 1.25rem);
+  width: var(--loading-spinner-size, 1.25em);
+  height: var(--loading-spinner-size, 1.25em);
 }
 .overflow-y-auto::-webkit-scrollbar {
   width: 0.375rem;
@@ -1884,11 +1881,49 @@ textarea::-webkit-scrollbar-thumb:hover {
   --tw-prose-invert-th-borders: #4b5563;
   --tw-prose-invert-td-borders: #374151;
   max-width: none;
+  font-size: var(--chat-window-font-size);
+  --tw-prose-body: var(--message-assistant-text-color);
+  --tw-prose-headings: var(--message-assistant-text-color);
+  --tw-prose-lead: var(--message-assistant-text-color);
+  --tw-prose-links: var(--message-assistant-text-color);
+  --tw-prose-bold: var(--message-assistant-text-color);
+  --tw-prose-counters: var(--message-assistant-text-color);
+  --tw-prose-bullets: var(--message-assistant-text-color);
+  --tw-prose-hr: var(--message-assistant-text-color);
+  --tw-prose-quotes: var(--message-assistant-text-color);
+  --tw-prose-quote-borders: var(--message-assistant-text-color);
+  --tw-prose-captions: var(--message-assistant-text-color);
+  --tw-prose-kbd: var(--message-assistant-text-color);
+  --tw-prose-kbd-shadows: var(--message-assistant-text-color);
+  --tw-prose-code: var(--code-text-assistant-color);
+  --tw-prose-pre-code: var(--code-text-assistant-color);
+  --tw-prose-pre-bg: var(--code-bg-assistant-color);
+  --tw-prose-th-borders: var(--message-assistant-text-color);
+  --tw-prose-td-borders: var(--message-assistant-text-color);
+
+  --tw-prose-invert-body: var(--message-user-text-color);
+  --tw-prose-invert-headings: var(--message-user-text-color);
+  --tw-prose-invert-lead: var(--message-user-text-color);
+  --tw-prose-invert-links: var(--message-user-text-color);
+  --tw-prose-invert-bold: var(--message-user-text-color);
+  --tw-prose-invert-counters: var(--message-user-text-color);
+  --tw-prose-invert-bullets: var(--message-user-text-color);
+  --tw-prose-invert-hr: var(--message-user-text-color);
+  --tw-prose-invert-quotes: var(--message-user-text-color);
+  --tw-prose-invert-quote-borders: var(--message-user-text-color);
+  --tw-prose-invert-captions: var(--message-user-text-color);
+  --tw-prose-invert-kbd: var(--message-user-text-color);
+  --tw-prose-invert-kbd-shadows: var(--message-user-text-color);
+  --tw-prose-invert-code: var(--code-text-user-color);
+  --tw-prose-invert-pre-code: var(--code-text-user-color);
+  --tw-prose-invert-pre-bg: var(--code-bg-user-color);
+  --tw-prose-invert-th-borders: var(--message-user-text-color);
+  --tw-prose-invert-td-borders: var(--message-user-text-color);
 }
 /* override spacing */
 .chat-markdown > * {
-  margin-top: 0.1rem;
-  margin-bottom: 0.1rem;
+  margin-top: 0.1em;
+  margin-bottom: 0.1em;
 }
 .message-bubble-user .chat-markdown {
   --tw-prose-body: var(--tw-prose-invert-body);
@@ -1910,20 +1945,10 @@ textarea::-webkit-scrollbar-thumb:hover {
   --tw-prose-th-borders: var(--tw-prose-invert-th-borders);
   --tw-prose-td-borders: var(--tw-prose-invert-td-borders);
 }
-.message-bubble-user .chat-markdown code {
-  background-color: var(--code-bg-user-color);
-  color: var(--code-text-user-color);
-}
 .message-bubble-user .chat-markdown pre {
-  background-color: var(--code-bg-user-color);
   border: 1px solid var(--code-border-user-color);
 }
-.message-bubble-assistant .chat-markdown code {
-  background-color: var(--code-bg-assistant-color);
-  color: var(--code-text-assistant-color);
-}
 .message-bubble-assistant .chat-markdown pre {
-  background-color: var(--code-bg-assistant-color);
   border: 1px solid var(--code-border-assistant-color);
 }
 .loading:after {

package/dist/collection/components/ocs-chat/ocs-chat.js

@@ -1,6 +1,7 @@
 import { Host, h } from "@stencil/core";
 import { XMarkIcon, GripDotsVerticalIcon, PencilSquare, ArrowsPointingOutIcon, ArrowsPointingInIcon, } from "./heroicons";
 import { renderMarkdownSync as renderMarkdownComplete } from "../../utils/markdown";
+import { varToPixels } from "../../utils/utils";
 export class OcsChat {
     constructor() {
         /**
@@ -47,6 +48,9 @@ export class OcsChat {
         this.parsedWelcomeMessages = [];
         this.parsedStarterQuestions = [];
         this.isFullscreen = false;
+        this.chatWindowHeight = 600;
+        this.chatWindowWidth = 450;
+        this.chatWindowFullscreenWidth = 1024;
         this.handleMouseDown = (event) => {
             if (!this.isFullscreen && window.innerWidth < OcsChat.MOBILE_BREAKPOINT)
                 return;
@@ -121,6 +125,13 @@ export class OcsChat {
             // Resume polling for existing session
             this.startPolling();
         }
+        const computedStyle = getComputedStyle(this.host);
+        const windowHeightVar = computedStyle.getPropertyValue('--chat-window-height');
+        const windowWidthVar = computedStyle.getPropertyValue('--chat-window-width');
+        const fullscreenWidthVar = computedStyle.getPropertyValue('--chat-window-fullscreen-width');
+        this.chatWindowHeight = varToPixels(windowHeightVar, window.innerHeight, this.chatWindowHeight);
+        this.chatWindowWidth = varToPixels(windowWidthVar, window.innerWidth, this.chatWindowWidth);
+        this.chatWindowFullscreenWidth = varToPixels(fullscreenWidthVar, window.innerWidth, this.chatWindowFullscreenWidth);
         this.initializePosition();
         window.addEventListener('resize', this.handleWindowResize);
     }
@@ -416,7 +427,7 @@ export class OcsChat {
     }
     getFullscreenBounds() {
         const windowWidth = window.innerWidth;
-        const actualChatWidth = Math.min(windowWidth, OcsChat.CHAT_MAX_WIDTH);
+        const actualChatWidth = Math.min(windowWidth, this.chatWindowFullscreenWidth);
         const centeredX = (windowWidth - actualChatWidth) / 2;
         const maxOffset = (windowWidth - actualChatWidth) / 2;
         return { windowWidth, actualChatWidth, centeredX, maxOffset };
@@ -439,8 +450,7 @@ export class OcsChat {
     initializePosition() {
         const windowWidth = window.innerWidth;
         const windowHeight = window.innerHeight;
-        const chatWidth = windowWidth < OcsChat.MOBILE_BREAKPOINT ? windowWidth : OcsChat.CHAT_WIDTH_DESKTOP;
-        const chatHeight = windowHeight * OcsChat.CHAT_HEIGHT_EXPANDED_RATIO;
+        const chatWidth = windowWidth < OcsChat.MOBILE_BREAKPOINT ? windowWidth : this.chatWindowWidth;
         const isMobile = windowWidth < OcsChat.MOBILE_BREAKPOINT;
         if (isMobile) {
             this.windowPosition = { x: 0, y: 0 };
@@ -450,19 +460,19 @@ export class OcsChat {
             case 'left':
                 this.windowPosition = {
                     x: OcsChat.WINDOW_MARGIN,
-                    y: windowHeight - chatHeight - OcsChat.WINDOW_MARGIN
+                    y: windowHeight - this.chatWindowHeight - OcsChat.WINDOW_MARGIN
                 };
                 break;
             case 'right':
                 this.windowPosition = {
                     x: windowWidth - chatWidth - OcsChat.WINDOW_MARGIN,
-                    y: windowHeight - chatHeight - OcsChat.WINDOW_MARGIN
+                    y: windowHeight - this.chatWindowHeight - OcsChat.WINDOW_MARGIN
                 };
                 break;
             case 'center':
                 this.windowPosition = {
                     x: (windowWidth - chatWidth) / 2,
-                    y: (windowHeight - chatHeight) / 2
+                    y: (windowHeight - this.chatWindowHeight) / 2
                 };
                 break;
         }
@@ -513,8 +523,8 @@ export class OcsChat {
             // Constrain chatbox to window
             const windowWidth = window.innerWidth;
             const windowHeight = window.innerHeight;
-            const chatWidth = windowWidth < OcsChat.MOBILE_BREAKPOINT ? windowWidth : OcsChat.CHAT_WIDTH_DESKTOP;
-            const chatHeight = windowHeight * OcsChat.CHAT_HEIGHT_EXPANDED_RATIO;
+            const chatWidth = windowWidth < OcsChat.MOBILE_BREAKPOINT ? windowWidth : this.chatWindowWidth;
+            const chatHeight = this.chatWindowRef.offsetHeight;
             this.windowPosition = {
                 x: Math.max(0, Math.min(newX, windowWidth - chatWidth)),
                 y: Math.max(0, Math.min(newY, windowHeight - chatHeight))
@@ -998,15 +1008,13 @@ export class OcsChat {
             "isFullscreen": {}
         };
     }
+    static get elementRef() { return "host"; }
 }
 OcsChat.TASK_POLLING_MAX_ATTEMPTS = 30;
 OcsChat.TASK_POLLING_INTERVAL_MS = 1000;
 OcsChat.MESSAGE_POLLING_INTERVAL_MS = 30000;
 OcsChat.SCROLL_DELAY_MS = 100;
 OcsChat.FOCUS_DELAY_MS = 100;
-OcsChat.CHAT_WIDTH_DESKTOP = 450;
-OcsChat.CHAT_MAX_WIDTH = 1024;
-OcsChat.CHAT_HEIGHT_EXPANDED_RATIO = 0.83; // 83% of window height (h-5/6)
 OcsChat.MOBILE_BREAKPOINT = 640;
 OcsChat.WINDOW_MARGIN = 20;
 OcsChat.LOCALSTORAGE_TEST_KEY = '__ocs_test__';