open-chat-studio-widget 0.4.0 → 0.4.1

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

@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["open-chat-studio-widget.cjs",[[1,"open-chat-studio-widget",{"chatbotId":[1,"chatbot-id"],"apiBaseUrl":[1,"api-base-url"],"buttonText":[1,"button-text"],"iconUrl":[1,"icon-url"],"buttonShape":[1,"button-shape"],"visible":[1028],"position":[1025],"expanded":[1028],"welcomeMessages":[1,"welcome-messages"],"starterQuestions":[1,"starter-questions"],"persistentSession":[4,"persistent-session"],"persistentSessionExpire":[2,"persistent-session-expire"],"loaded":[32],"error":[32],"messages":[32],"sessionId":[32],"isLoading":[32],"isTyping":[32],"messageInput":[32],"pollingInterval":[32],"lastPollTime":[32],"isTaskPolling":[32],"isDragging":[32],"dragOffset":[32],"windowPosition":[32],"showStarterQuestions":[32],"parsedWelcomeMessages":[32],"parsedStarterQuestions":[32]}]]]], options);
+  return index.bootstrapLazy([["open-chat-studio-widget.cjs",[[1,"open-chat-studio-widget",{"chatbotId":[1,"chatbot-id"],"apiBaseUrl":[1,"api-base-url"],"buttonText":[1,"button-text"],"iconUrl":[1,"icon-url"],"buttonShape":[1,"button-shape"],"visible":[1028],"position":[1025],"welcomeMessages":[1,"welcome-messages"],"starterQuestions":[1,"starter-questions"],"persistentSession":[4,"persistent-session"],"persistentSessionExpire":[2,"persistent-session-expire"],"allowFullScreen":[4,"allow-full-screen"],"loaded":[32],"error":[32],"messages":[32],"sessionId":[32],"isLoading":[32],"isTyping":[32],"messageInput":[32],"pollingInterval":[32],"lastPollTime":[32],"isTaskPolling":[32],"isDragging":[32],"dragOffset":[32],"windowPosition":[32],"fullscreenPosition":[32],"showStarterQuestions":[32],"parsedWelcomeMessages":[32],"parsedStarterQuestions":[32],"isFullscreen":[32]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

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

@@ -2,16 +2,16 @@ import { h } from "@stencil/core";
 export const XMarkIcon = () => {
     return h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", class: "size-6" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M6 18 18 6M6 6l12 12" }));
 };
-export const ChevronUpIcon = () => {
-    return h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", class: "size-6" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "m4.5 15.75 7.5-7.5 7.5 7.5" }));
-};
-export const ChevronDownIcon = () => {
-    return h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", class: "size-6" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "m19.5 8.25-7.5 7.5-7.5-7.5" }));
-};
 export const GripDotsVerticalIcon = () => {
     return (h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 24 24", class: "size-6" }, h("circle", { cx: "8", cy: "6", r: "1.5" }), h("circle", { cx: "8", cy: "12", r: "1.5" }), h("circle", { cx: "8", cy: "18", r: "1.5" }), h("circle", { cx: "16", cy: "6", r: "1.5" }), h("circle", { cx: "16", cy: "12", r: "1.5" }), h("circle", { cx: "16", cy: "18", r: "1.5" })));
 };
 export const PencilSquare = () => {
     return (h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", class: "size-6" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" })));
 };
+export const ArrowsPointingOutIcon = () => {
+    return (h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", class: "size-6" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" })));
+};
+export const ArrowsPointingInIcon = () => {
+    return (h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", class: "size-6" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M9 9V4.5M9 9H4.5M9 9 3.75 3.75M15 9h4.5M15 9V4.5M15 9l5.25-5.25M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 15h4.5M15 15v4.5m0-4.5 5.25 5.25" })));
+};
 //# sourceMappingURL=heroicons.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"heroicons.js","sourceRoot":"","sources":["../../../src/components/ocs-chat/heroicons.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,CAAC,EAAC,MAAM,eAAe,CAAC;AAEhC,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE;IAC5B,OAAO,WAAK,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,kBAAc,KAAK,EACrF,MAAM,EAAC,cAAc,EAAC,KAAK,EAAC,QAAQ;QAC9C,8BAAqB,OAAO,qBAAiB,OAAO,EAAC,CAAC,EAAC,sBAAsB,GAAE,CAC3E,CAAC;AACT,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,EAAE;IAChC,OAAO,WAAK,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,kBAAc,KAAK,EACrF,MAAM,EAAC,cAAc,EAAC,KAAK,EAAC,QAAQ;QAC9C,8BAAqB,OAAO,qBAAiB,OAAO,EAAC,CAAC,EAAC,4BAA4B,GAAE,CACjF,CAAC;AACT,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,EAAE;IAClC,OAAO,WAAK,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,kBAAc,KAAK,EACrF,MAAM,EAAC,cAAc,EAAC,KAAK,EAAC,QAAQ;QAC9C,8BAAqB,OAAO,qBAAiB,OAAO,EAAC,CAAC,EAAC,4BAA4B,GAAE,CACjF,CAAC;AACT,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,EAAE;IACvC,OAAO,CACL,WACE,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAC,cAAc,EACnB,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,QAAQ;QAGd,cAAQ,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,CAAC,EAAC,KAAK,GAAG;QAChC,cAAQ,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,KAAK,GAAG;QACjC,cAAQ,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,KAAK,GAAG;QAGjC,cAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,CAAC,EAAC,KAAK,GAAG;QACjC,cAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,KAAK,GAAG;QAClC,cAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,KAAK,GAAG,CAC9B,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,EAAE;IAC/B,OAAO,CACL,WAAK,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,kBAAc,KAAK,EAAC,MAAM,EAAC,cAAc,EAC3G,KAAK,EAAC,QAAQ;QACjB,8BAAqB,OAAO,qBAAiB,OAAO,EAC9C,CAAC,EAAC,kQAAkQ,GAAE,CACxQ,CACP,CAAA;AACH,CAAC,CAAA","sourcesContent":["import {h} from \"@stencil/core\";\n\nexport const XMarkIcon = () => {\n  return <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\"\n              stroke=\"currentColor\" class=\"size-6\">\n    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\"/>\n  </svg>;\n}\n\nexport const ChevronUpIcon = () => {\n  return <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\"\n              stroke=\"currentColor\" class=\"size-6\">\n    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m4.5 15.75 7.5-7.5 7.5 7.5\"/>\n  </svg>;\n}\n\nexport const ChevronDownIcon = () => {\n  return <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\"\n              stroke=\"currentColor\" class=\"size-6\">\n    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m19.5 8.25-7.5 7.5-7.5-7.5\"/>\n  </svg>;\n}\n\nexport const GripDotsVerticalIcon = () => {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      fill=\"currentColor\"\n      viewBox=\"0 0 24 24\"\n      class=\"size-6\"\n    >\n      {/* Left column of dots */}\n      <circle cx=\"8\" cy=\"6\" r=\"1.5\" />\n      <circle cx=\"8\" cy=\"12\" r=\"1.5\" />\n      <circle cx=\"8\" cy=\"18\" r=\"1.5\" />\n\n      {/* Right column of dots */}\n      <circle cx=\"16\" cy=\"6\" r=\"1.5\" />\n      <circle cx=\"16\" cy=\"12\" r=\"1.5\" />\n      <circle cx=\"16\" cy=\"18\" r=\"1.5\" />\n    </svg>\n  );\n};\n\nexport const PencilSquare = () => {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\"\n         class=\"size-6\">\n      <path stroke-linecap=\"round\" stroke-linejoin=\"round\"\n            d=\"m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10\"/>\n    </svg>\n  )\n}\n"]}
+{"version":3,"file":"heroicons.js","sourceRoot":"","sources":["../../../src/components/ocs-chat/heroicons.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,CAAC,EAAC,MAAM,eAAe,CAAC;AAEhC,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE;IAC5B,OAAO,WAAK,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,kBAAc,KAAK,EACrF,MAAM,EAAC,cAAc,EAAC,KAAK,EAAC,QAAQ;QAC9C,8BAAqB,OAAO,qBAAiB,OAAO,EAAC,CAAC,EAAC,sBAAsB,GAAE,CAC3E,CAAC;AACT,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,EAAE;IACvC,OAAO,CACL,WACE,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAC,cAAc,EACnB,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,QAAQ;QAGd,cAAQ,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,CAAC,EAAC,KAAK,GAAG;QAChC,cAAQ,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,KAAK,GAAG;QACjC,cAAQ,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,KAAK,GAAG;QAGjC,cAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,CAAC,EAAC,KAAK,GAAG;QACjC,cAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,KAAK,GAAG;QAClC,cAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,KAAK,GAAG,CAC9B,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,EAAE;IAC/B,OAAO,CACL,WAAK,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,kBAAc,KAAK,EAAC,MAAM,EAAC,cAAc,EAC3G,KAAK,EAAC,QAAQ;QACjB,8BAAqB,OAAO,qBAAiB,OAAO,EAC9C,CAAC,EAAC,kQAAkQ,GAAE,CACxQ,CACP,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,EAAE;IACxC,OAAO,CACL,WAAK,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,kBAAc,KAAK,EAAC,MAAM,EAAC,cAAc,EAC3G,KAAK,EAAC,QAAQ;QACjB,8BAAqB,OAAO,qBAAiB,OAAO,EAC9C,CAAC,EAAC,uJAAuJ,GAAE,CAC7J,CACP,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,EAAE;IACvC,OAAO,CACL,WAAK,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,kBAAc,KAAK,EAAC,MAAM,EAAC,cAAc,EAC3G,KAAK,EAAC,QAAQ;QACjB,8BAAqB,OAAO,qBAAiB,OAAO,EAC9C,CAAC,EAAC,uIAAuI,GAAE,CAC7I,CACP,CAAA;AACH,CAAC,CAAA","sourcesContent":["import {h} from \"@stencil/core\";\n\nexport const XMarkIcon = () => {\n  return <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\"\n              stroke=\"currentColor\" class=\"size-6\">\n    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\"/>\n  </svg>;\n}\n\nexport const GripDotsVerticalIcon = () => {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      fill=\"currentColor\"\n      viewBox=\"0 0 24 24\"\n      class=\"size-6\"\n    >\n      {/* Left column of dots */}\n      <circle cx=\"8\" cy=\"6\" r=\"1.5\" />\n      <circle cx=\"8\" cy=\"12\" r=\"1.5\" />\n      <circle cx=\"8\" cy=\"18\" r=\"1.5\" />\n\n      {/* Right column of dots */}\n      <circle cx=\"16\" cy=\"6\" r=\"1.5\" />\n      <circle cx=\"16\" cy=\"12\" r=\"1.5\" />\n      <circle cx=\"16\" cy=\"18\" r=\"1.5\" />\n    </svg>\n  );\n};\n\nexport const PencilSquare = () => {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\"\n         class=\"size-6\">\n      <path stroke-linecap=\"round\" stroke-linejoin=\"round\"\n            d=\"m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10\"/>\n    </svg>\n  )\n}\n\nexport const ArrowsPointingOutIcon = () => {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\"\n         class=\"size-6\">\n      <path stroke-linecap=\"round\" stroke-linejoin=\"round\"\n            d=\"M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15\"/>\n    </svg>\n  )\n}\n\nexport const ArrowsPointingInIcon = () => {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\"\n         class=\"size-6\">\n      <path stroke-linecap=\"round\" stroke-linejoin=\"round\"\n            d=\"M9 9V4.5M9 9H4.5M9 9 3.75 3.75M15 9h4.5M15 9V4.5M15 9l5.25-5.25M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 15h4.5M15 15v4.5m0-4.5 5.25 5.25\"/>\n    </svg>\n  )\n}\n"]}

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

@@ -519,9 +519,8 @@ video {
 }
 .chat-btn-text,
   .chat-btn-icon {
-  position: fixed;
   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));
-  border-radius: 9999px;
+  border-radius: 0.5rem;
   border-width: 0px;
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
@@ -557,12 +556,11 @@ video {
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
     color: var(--button-text-color, #111827);
-    min-height: 56px;
 }
 .chat-btn-text:hover {
     color: var(--button-text-color-hover, #1d4ed8);
@@ -592,10 +590,6 @@ video {
   -o-object-fit: contain;
      object-fit: contain;
 }
-.chat-btn-text,
-  .chat-btn-icon {
-  border-radius: 0.5rem; /* Default square shape */
-}
 .chat-btn-text.round,
   .chat-btn-icon.round {
   border-radius: 9999px;
@@ -612,6 +606,15 @@ video {
 .fixed {
   position: fixed;
 }
+.relative {
+  position: relative;
+}
+.inset-0 {
+  inset: 0px;
+}
+.z-\[9999\] {
+  z-index: 9999;
+}
 .ml-2 {
   margin-left: 0.5rem;
 }
@@ -624,9 +627,6 @@ video {
 .block {
   display: block;
 }
-.inline-block {
-  display: inline-block;
-}
 .flex {
   display: flex;
 }
@@ -640,41 +640,83 @@ video {
   width: 1.5rem;
   height: 1.5rem;
 }
-.h-2 {
-  height: 0.5rem;
-}
-.h-3\/5 {
-  height: 60%;
+.h-1\.5 {
+  height: 0.375rem;
 }
 .h-5\/6 {
   height: 83.333333%;
 }
-.w-2 {
-  width: 0.5rem;
+.h-full {
+  height: 100%;
+}
+.max-h-full {
+  max-height: 100%;
 }
 .w-full {
   width: 100%;
 }
+.max-w-screen-lg {
+  max-width: 1024px;
+}
 .max-w-xs {
   max-width: 20rem;
 }
 .flex-grow {
   flex-grow: 1;
 }
-@keyframes bounce {
+.origin-left-right {
+  transform-origin: 0% 50%;
+}
+.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));
+}
+@keyframes dots {
+
+  0%, 20% {
+    color: rgba(0,0,0,0);
+    text-shadow: .25em 0 0 rgba(0,0,0,0), .5em 0 0 rgba(0,0,0,0);
+  }
+
+  40% {
+    color: black;
+    text-shadow: .25em 0 0 rgba(0,0,0,0), .5em 0 0 rgba(0,0,0,0);
+  }
+
+  60% {
+    text-shadow: .25em 0 0 black, .5em 0 0 rgba(0,0,0,0);
+  }
+
+  80%, 100% {
+    text-shadow: .25em 0 0 black, .5em 0 0 black;
+  }
+}
+.animate-dots {
+  animation: dots 1s steps(5, end) infinite;
+}
+@keyframes progress {
+
+  0% {
+    transform:  translateX(0) scaleX(0);
+  }
 
-  0%, 100% {
-    transform: translateY(-25%);
-    animation-timing-function: cubic-bezier(0.8,0,1,1);
+  10% {
+    transform: translateX(0) scaleX(0.3);
   }
 
   50% {
-    transform: none;
-    animation-timing-function: cubic-bezier(0,0,0.2,1);
+    transform: translateX(100%) scaleX(0.3);
+  }
+
+  90% {
+    transform: translateX(0) scaleX(0.3);
+  }
+
+  100% {
+    transform: translateX(0) scaleX(0);
   }
 }
-.animate-bounce {
-  animation: bounce 1s infinite;
+.animate-progress {
+  animation: progress 3s infinite linear;
 }
 .cursor-grab {
   cursor: grab;
@@ -728,29 +770,27 @@ video {
   margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
 }
-.space-y-4 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
-}
 .overflow-hidden {
   overflow: hidden;
 }
 .overflow-y-auto {
   overflow-y: auto;
 }
-.rounded-full {
-  border-radius: 9999px;
-}
 .rounded-lg {
   border-radius: 0.5rem;
 }
 .rounded-md {
   border-radius: 0.375rem;
 }
+.rounded-none {
+  border-radius: 0px;
+}
 .border {
   border-width: 1px;
 }
+.border-0 {
+  border-width: 0px;
+}
 .border-b {
   border-bottom-width: 1px;
 }
@@ -769,6 +809,10 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
 }
+.bg-blue-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(191 219 254 / var(--tw-bg-opacity, 1));
+}
 .bg-blue-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
@@ -785,10 +829,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
 }
-.bg-gray-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
-}
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
@@ -903,6 +943,9 @@ video {
   --button-border-color-hover: #374151;
   --chat-z-index: 50;
   display: block;
+  position: fixed;
+  right: 20px;
+  bottom: 20px;
 }
 #ocs-chat-window {
   z-index: var(--chat-z-index);
@@ -1670,33 +1713,8 @@ textarea::-webkit-scrollbar-thumb:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
 }
-@media (max-width: 640px) {
-  .max-w-xs {
-    max-width: 85%;
-  }
-
-  .chat-btn-icon {
-    width: 56px;
-    height: 56px;
-  }
-
-  .chat-btn-text {
-    padding-left: 0.75rem;
-    padding-right: 0.75rem;
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-    min-height: 52px;
-  }
-
-  .chat-btn-text img {
-    height: 1.25rem;
-    width: 1.25rem;
-  }
-
-  .chat-btn-text span {
-    font-size: 0.75rem;
-    line-height: 1rem;
-  }
+.loading:after {
+  content: ' .';
 }
 .hover\:bg-blue-600:hover {
   --tw-bg-opacity: 1;
@@ -1731,10 +1749,18 @@ textarea::-webkit-scrollbar-thumb:hover {
 }
 @media (min-width: 640px) {
 
+  .sm\:block {
+    display: block;
+  }
+
   .sm\:flex {
     display: flex;
   }
 
+  .sm\:hidden {
+    display: none;
+  }
+
   .sm\:w-\[450px\] {
     width: 450px;
   }

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

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-import { XMarkIcon, ChevronDownIcon, ChevronUpIcon, GripDotsVerticalIcon, PencilSquare, } from "./heroicons";
+import { XMarkIcon, GripDotsVerticalIcon, PencilSquare, ArrowsPointingOutIcon, ArrowsPointingInIcon, } from "./heroicons";
 import { renderMarkdownSync as renderMarkdownComplete } from "../../utils/markdown";
 export class OcsChat {
     constructor() {
@@ -19,10 +19,6 @@ export class OcsChat {
          * The initial position of the chat widget on the screen.
          */
         this.position = 'right';
-        /**
-         * Whether the chat widget is initially expanded.
-         */
-        this.expanded = false;
         /**
          * Whether to persist session data to local storage to allow resuming previous conversations after page reload.
          */
@@ -32,6 +28,10 @@ export class OcsChat {
          * `0` to never expire.
          */
         this.persistentSessionExpire = 60 * 24;
+        /**
+         * Allow the user to make the chat window full screen.
+         */
+        this.allowFullScreen = true;
         this.loaded = false;
         this.error = "";
         this.messages = [];
@@ -42,11 +42,13 @@ export class OcsChat {
         this.isDragging = false;
         this.dragOffset = { x: 0, y: 0 };
         this.windowPosition = { x: 0, y: 0 };
+        this.fullscreenPosition = { x: 0 };
         this.showStarterQuestions = true;
         this.parsedWelcomeMessages = [];
         this.parsedStarterQuestions = [];
+        this.isFullscreen = false;
         this.handleMouseDown = (event) => {
-            if (window.innerWidth < OcsChat.MOBILE_BREAKPOINT)
+            if (!this.isFullscreen && window.innerWidth < OcsChat.MOBILE_BREAKPOINT)
                 return;
             if (event.target.closest('button'))
                 return;
@@ -398,13 +400,29 @@ export class OcsChat {
             return;
         this.position = position;
     }
-    toggleSize() {
-        this.expanded = !this.expanded;
-    }
     getPositionClasses() {
-        return `fixed w-full sm:w-[450px] ${this.expanded ? 'h-5/6' : 'h-3/5'} bg-white border border-gray-200 ${this.isDragging ? 'shadow-2xl cursor-grabbing' : 'shadow-lg transition-shadow duration-200'} rounded-lg overflow-hidden flex flex-col`;
+        if (this.isFullscreen) {
+            return `fixed inset-0 w-full h-full max-w-screen-lg max-h-full bg-white border-0 shadow-lg transition-shadow duration-200 rounded-none overflow-hidden flex flex-col z-[9999]`;
+        }
+        return `fixed w-full sm:w-[450px] max-w-screen-lg h-5/6 bg-white border border-gray-200 ${this.isDragging ? 'shadow-2xl cursor-grabbing' : 'shadow-lg transition-shadow duration-200'} rounded-lg overflow-hidden flex flex-col`;
+    }
+    getFullscreenBounds() {
+        const windowWidth = window.innerWidth;
+        const actualChatWidth = Math.min(windowWidth, OcsChat.CHAT_MAX_WIDTH);
+        const centeredX = (windowWidth - actualChatWidth) / 2;
+        const maxOffset = (windowWidth - actualChatWidth) / 2;
+        return { windowWidth, actualChatWidth, centeredX, maxOffset };
     }
     getPositionStyles() {
+        if (this.isFullscreen) {
+            const { centeredX } = this.getFullscreenBounds();
+            const finalX = centeredX + this.fullscreenPosition.x;
+            return {
+                left: `${finalX}px`,
+                top: '0px',
+                transform: 'none',
+            };
+        }
         return {
             left: `${this.windowPosition.x}px`,
             top: `${this.windowPosition.y}px`,
@@ -414,9 +432,7 @@ export class OcsChat {
         const windowWidth = window.innerWidth;
         const windowHeight = window.innerHeight;
         const chatWidth = windowWidth < OcsChat.MOBILE_BREAKPOINT ? windowWidth : OcsChat.CHAT_WIDTH_DESKTOP;
-        const chatHeight = this.expanded
-            ? (windowHeight * OcsChat.CHAT_HEIGHT_EXPANDED_RATIO)
-            : (windowHeight * OcsChat.CHAT_HEIGHT_COLLAPSED_RATIO);
+        const chatHeight = windowHeight * OcsChat.CHAT_HEIGHT_EXPANDED_RATIO;
         const isMobile = windowWidth < OcsChat.MOBILE_BREAKPOINT;
         if (isMobile) {
             this.windowPosition = { x: 0, y: 0 };
@@ -457,28 +473,45 @@ export class OcsChat {
         if (!this.chatWindowRef)
             return;
         this.isDragging = true;
-        const rect = this.chatWindowRef.getBoundingClientRect();
-        this.dragOffset = {
-            x: pointer.clientX - rect.left,
-            y: pointer.clientY - rect.top
-        };
+        if (this.isFullscreen) {
+            // For fullscreen, track relative to current position
+            this.dragOffset = {
+                x: pointer.clientX,
+                y: pointer.clientY
+            };
+        }
+        else {
+            const rect = this.chatWindowRef.getBoundingClientRect();
+            this.dragOffset = {
+                x: pointer.clientX - rect.left,
+                y: pointer.clientY - rect.top
+            };
+        }
     }
     updateDragPosition(pointer) {
         if (!this.isDragging)
             return;
-        const newX = pointer.clientX - this.dragOffset.x;
-        const newY = pointer.clientY - this.dragOffset.y;
-        // 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 = this.expanded
-            ? (windowHeight * OcsChat.CHAT_HEIGHT_EXPANDED_RATIO)
-            : (windowHeight * OcsChat.CHAT_HEIGHT_COLLAPSED_RATIO);
-        this.windowPosition = {
-            x: Math.max(0, Math.min(newX, windowWidth - chatWidth)),
-            y: Math.max(0, Math.min(newY, windowHeight - chatHeight))
-        };
+        if (this.isFullscreen) {
+            // In fullscreen, only allow horizontal dragging
+            const { maxOffset } = this.getFullscreenBounds();
+            const deltaX = pointer.clientX - this.dragOffset.x;
+            this.fullscreenPosition = {
+                x: Math.max(-maxOffset, Math.min(maxOffset, deltaX))
+            };
+        }
+        else {
+            const newX = pointer.clientX - this.dragOffset.x;
+            const newY = pointer.clientY - this.dragOffset.y;
+            // 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;
+            this.windowPosition = {
+                x: Math.max(0, Math.min(newX, windowWidth - chatWidth)),
+                y: Math.max(0, Math.min(newY, windowHeight - chatHeight))
+            };
+        }
     }
     endDrag() {
         this.isDragging = false;
@@ -607,11 +640,16 @@ export class OcsChat {
         this.cleanup();
         await this.startSession();
     }
+    toggleFullscreen() {
+        this.isFullscreen = !this.isFullscreen;
+        // Reset fullscreen position when toggling
+        this.fullscreenPosition = { x: 0 };
+    }
     render() {
         if (this.error) {
             return (h(Host, null, h("p", { class: "text-red-500 p-2" }, this.error)));
         }
-        return (h(Host, null, this.renderButton(), this.visible && (h("div", { ref: (el) => this.chatWindowRef = el, id: "ocs-chat-window", class: this.getPositionClasses(), style: this.getPositionStyles() }, h("div", { class: `flex justify-between items-center px-2 py-2 border-b border-gray-100 sm:${this.isDragging ? 'cursor-grabbing' : 'cursor-grab'} active:bg-gray-50 sm:hover:bg-gray-25 transition-colors duration-150`, onMouseDown: this.handleMouseDown, onTouchStart: this.handleTouchStart }, h("div", { class: "hidden sm:flex gap-1" }, h("div", { class: "flex gap-0.5 ml-2 pointer-events-none" }, h(GripDotsVerticalIcon, null))), h("div", null), h("div", { class: "flex gap-1 items-center" }, this.sessionId && this.messages.length > 0 && (h("button", { class: "p-1.5 rounded-md transition-colors duration-200 hover:bg-gray-100 text-gray-500", onClick: () => this.startNewChat(), title: "Start new chat", "aria-label": "Start new chat" }, h(PencilSquare, null))), h("button", { class: "p-1.5 rounded-md transition-colors duration-200 hover:bg-gray-100 text-gray-500", onClick: () => this.toggleSize(), "aria-label": this.expanded ? "Collapse" : "Expand", title: this.expanded ? "Collapse" : "Expand" }, this.expanded ? h(ChevronDownIcon, null) : h(ChevronUpIcon, null)), h("button", { class: "p-1.5 hover:bg-gray-100 rounded-md transition-colors duration-200 text-gray-500", onClick: () => this.visible = false, "aria-label": "Close" }, h(XMarkIcon, null)))), h("div", { class: "flex flex-col flex-grow overflow-hidden" }, this.isLoading && !this.sessionId && (h("div", { class: "flex items-center justify-center flex-grow" }, h("div", { class: "loading-spinner" }), h("span", { class: "ml-2 text-gray-500" }, "Starting chat..."))), this.sessionId && (h("div", { ref: (el) => this.messageListRef = el, class: "flex-grow overflow-y-auto p-4 space-y-4" }, this.messages.length === 0 && !this.isTyping && this.parsedWelcomeMessages.length > 0 && (h("div", { class: "space-y-4" }, this.parsedWelcomeMessages.map((message, index) => (h("div", { key: `welcome-${index}`, class: "flex justify-start" }, h("div", { class: "bg-gray-200 text-gray-800 max-w-xs lg:max-w-md px-4 py-2 rounded-lg" }, h("div", { class: "chat-markdown", innerHTML: renderMarkdownComplete(message) }))))))), this.messages.map((message, index) => (h("div", { key: index, class: {
+        return (h(Host, null, this.renderButton(), this.visible && (h("div", { ref: (el) => this.chatWindowRef = el, id: "ocs-chat-window", class: this.getPositionClasses(), style: this.getPositionStyles() }, h("div", { class: `flex justify-between items-center px-2 py-2 border-b border-gray-100 ${this.isDragging ? 'cursor-grabbing' : 'cursor-grab'} active:bg-gray-50 hover:bg-gray-25 transition-colors duration-150`, onMouseDown: this.handleMouseDown, onTouchStart: this.handleTouchStart }, h("div", { class: "hidden sm:flex gap-1" }, h("div", { class: "flex gap-0.5 ml-2 pointer-events-none" }, h(GripDotsVerticalIcon, null))), h("div", { class: "sm:hidden" }), h("div", { class: "flex gap-1 items-center" }, this.allowFullScreen && h("button", { class: "hidden sm:block p-1.5 rounded-md transition-colors duration-200 hover:bg-gray-100 text-gray-500", onClick: () => this.toggleFullscreen(), title: this.isFullscreen ? "Exit fullscreen" : "Enter fullscreen", "aria-label": this.isFullscreen ? "Exit fullscreen" : "Enter fullscreen" }, this.isFullscreen ? h(ArrowsPointingInIcon, null) : h(ArrowsPointingOutIcon, null)), this.sessionId && this.messages.length > 0 && (h("button", { class: "p-1.5 rounded-md transition-colors duration-200 hover:bg-gray-100 text-gray-500", onClick: () => this.startNewChat(), title: "Start new chat", "aria-label": "Start new chat" }, h(PencilSquare, null))), h("button", { class: "p-1.5 hover:bg-gray-100 rounded-md transition-colors duration-200 text-gray-500", onClick: () => this.visible = false, "aria-label": "Close" }, h(XMarkIcon, null)))), h("div", { class: "flex flex-col flex-grow overflow-hidden" }, this.isLoading && !this.sessionId && (h("div", { class: "flex items-center justify-center flex-grow" }, h("div", { class: "loading-spinner" }), h("span", { class: "ml-2 text-gray-500" }, "Starting chat..."))), this.sessionId && (h("div", { ref: (el) => this.messageListRef = el, class: "flex-grow overflow-y-auto p-4 space-y-2" }, this.messages.length === 0 && !this.isTyping && this.parsedWelcomeMessages.length > 0 && (h("div", { class: "space-y-2" }, this.parsedWelcomeMessages.map((message, index) => (h("div", { key: `welcome-${index}`, class: "flex justify-start" }, h("div", { class: "bg-gray-200 text-gray-800 max-w-xs lg:max-w-md px-4 py-2 rounded-lg" }, h("div", { class: "chat-markdown", innerHTML: renderMarkdownComplete(message) }))))))), this.messages.map((message, index) => (h("div", { key: index, class: {
                 'flex': true,
                 'justify-end': message.role === 'user',
                 'justify-start': message.role !== 'user'
@@ -620,7 +658,7 @@ export class OcsChat {
                 'bg-blue-500 text-white': message.role === 'user',
                 'bg-gray-200 text-gray-800': message.role === 'assistant',
                 'bg-gray-100 text-gray-600 text-sm': message.role === 'system'
-            } }, h("div", { class: "chat-markdown", innerHTML: renderMarkdownComplete(message.content) }), message.attachments && message.attachments.length > 0 && (h("div", { class: "mt-2 space-y-1" }, message.attachments.map((attachment, attachmentIndex) => (h("a", { key: attachmentIndex, href: attachment.content_url, target: "_blank", rel: "noopener noreferrer", class: "block text-sm underline hover:no-underline" }, "\uD83D\uDCCE ", attachment.name))))), h("div", { class: "text-xs opacity-70 mt-1" }, this.formatTime(message.created_at)))))), this.isTyping && (h("div", { class: "flex justify-start" }, h("div", { class: "bg-gray-200 text-gray-800 max-w-xs lg:max-w-md px-2 py-2 rounded-lg" }, h("div", { class: "flex items-center gap-0.5" }, h("span", { class: "inline-block w-2 h-2 rounded-full bg-gray-400 animate-bounce" }), h("span", { class: "inline-block w-2 h-2 rounded-full bg-gray-400 animate-bounce", style: { animationDelay: '0.1s' } }), h("span", { class: "inline-block w-2 h-2 rounded-full bg-gray-400 animate-bounce", style: { animationDelay: '0.2s' } }))))))), this.sessionId && this.showStarterQuestions && this.messages.length === 0 && !this.isTyping && (h("div", { class: "p-4 space-y-2" }, this.parsedStarterQuestions.map((question, index) => (h("div", { key: `starter-${index}`, class: "flex justify-end" }, h("button", { class: "starter-question", onClick: () => this.handleStarterQuestionClick(question) }, question)))))), this.sessionId && (h("div", { class: "border-t border-gray-200 p-4" }, h("div", { class: "flex gap-2" }, h("textarea", { ref: (el) => this.textareaRef = el, class: "flex-grow px-3 py-2 border border-gray-300 rounded-md resize-none focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent", rows: 1, placeholder: "Type your message...", value: this.messageInput, onInput: (e) => this.handleInputChange(e), onKeyPress: (e) => this.handleKeyPress(e), disabled: this.isTyping }), h("button", { class: {
+            } }, h("div", { class: "chat-markdown", innerHTML: renderMarkdownComplete(message.content) }), message.attachments && message.attachments.length > 0 && (h("div", { class: "mt-2 space-y-1" }, message.attachments.map((attachment, attachmentIndex) => (h("a", { key: attachmentIndex, href: attachment.content_url, target: "_blank", rel: "noopener noreferrer", class: "block text-sm underline hover:no-underline" }, "\uD83D\uDCCE ", attachment.name))))), h("div", { class: "text-xs opacity-70 mt-1" }, this.formatTime(message.created_at)))))), this.isTyping && (h("div", null, h("div", { class: "h-1.5 w-full overflow-hidden" }, h("div", { class: "animate-progress w-full h-full bg-blue-200 origin-left-right rounded-lg" })), h("div", { class: "w-full text-xs opacity-70 justify-center" }, h("span", null, "Preparing response"), h("span", { class: "loading animate-dots" })))))), this.sessionId && this.showStarterQuestions && this.messages.length === 0 && !this.isTyping && (h("div", { class: "p-4 space-y-2" }, this.parsedStarterQuestions.map((question, index) => (h("div", { key: `starter-${index}`, class: "flex justify-end" }, h("button", { class: "starter-question", onClick: () => this.handleStarterQuestionClick(question) }, question)))))), this.sessionId && (h("div", { class: "border-t border-gray-200 p-4 text-sm" }, h("div", { class: "flex gap-2" }, h("textarea", { ref: (el) => this.textareaRef = el, class: "flex-grow px-3 py-2 border border-gray-300 rounded-md resize-none focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent", rows: 1, placeholder: "Type your message...", value: this.messageInput, onInput: (e) => this.handleInputChange(e), onKeyPress: (e) => this.handleKeyPress(e), disabled: this.isTyping }), h("button", { class: {
                 'px-4 py-2 rounded-md font-medium transition-colors duration-200': true,
                 'bg-blue-500 hover:bg-blue-600 text-white': !this.isTyping && !!this.messageInput.trim(),
                 'bg-gray-300 text-gray-500 cursor-not-allowed': this.isTyping || !this.messageInput.trim()
@@ -777,26 +815,6 @@ export class OcsChat {
                 "reflect": false,
                 "defaultValue": "'right'"
             },
-            "expanded": {
-                "type": "boolean",
-                "mutable": true,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Whether the chat widget is initially expanded."
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "expanded",
-                "reflect": false,
-                "defaultValue": "false"
-            },
             "welcomeMessages": {
                 "type": "string",
                 "mutable": false,
@@ -874,6 +892,26 @@ export class OcsChat {
                 "attribute": "persistent-session-expire",
                 "reflect": false,
                 "defaultValue": "60 * 24"
+            },
+            "allowFullScreen": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allow the user to make the chat window full screen."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "allow-full-screen",
+                "reflect": false,
+                "defaultValue": "true"
             }
         };
     }
@@ -892,9 +930,11 @@ export class OcsChat {
             "isDragging": {},
             "dragOffset": {},
             "windowPosition": {},
+            "fullscreenPosition": {},
             "showStarterQuestions": {},
             "parsedWelcomeMessages": {},
-            "parsedStarterQuestions": {}
+            "parsedStarterQuestions": {},
+            "isFullscreen": {}
         };
     }
 }
@@ -904,8 +944,8 @@ OcsChat.MESSAGE_POLLING_INTERVAL_MS = 30000;
 OcsChat.SCROLL_DELAY_MS = 100;
 OcsChat.FOCUS_DELAY_MS = 100;
 OcsChat.CHAT_WIDTH_DESKTOP = 450;
-OcsChat.CHAT_HEIGHT_EXPANDED_RATIO = 0.83; // 83% of window height
-OcsChat.CHAT_HEIGHT_COLLAPSED_RATIO = 0.6; // 60% of window height
+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__';