open-chat-studio-widget 0.4.3 → 0.4.5

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],"welcomeMessages":[1,"welcome-messages"],"starterQuestions":[1,"starter-questions"],"userId":[1,"user-id"],"userName":[1,"user-name"],"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],"generatedUserId":[32],"isFullscreen":[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"],"headerText":[1,"header-text"],"visible":[1028],"position":[1025],"welcomeMessages":[1,"welcome-messages"],"starterQuestions":[1,"starter-questions"],"userId":[1,"user-id"],"userName":[1,"user-name"],"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],"generatedUserId":[32],"isFullscreen":[32]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

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

@@ -1,17 +1,17 @@
 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" }));
+    return h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M6 18 18 6M6 6l12 12" }));
 };
 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" })));
+    return (h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 24 24" }, 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" })));
+    return (h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor" }, 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" })));
+    return (h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor" }, 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" })));
+    return (h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor" }, 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,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"]}
+{"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,EAAC,MAAM,EAAC,cAAc;QACrH,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;QAGnB,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;QAC9G,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;QAC9G,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;QAC9G,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\" stroke=\"currentColor\">\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    >\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      <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      <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      <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

@@ -499,6 +499,10 @@ video {
 [hidden]:where(:not([hidden="until-found"])) {
   display: none;
 }
+#ocs-chat-window {
+    z-index: var(--chat-z-index);
+    font-size: var(--chat-window-font-size);
+  }
 .starter-question {
   border-radius: 0.5rem;
   text-align: left;
@@ -533,40 +537,39 @@ video {
 .chat-btn-text,
   .chat-btn-icon {
     background-color: var(--button-background-color, white);
+    border: 1px solid var(--button-border-color);
     z-index: var(--chat-z-index, 50);
+    font-size: var(--button-font-size);
+    padding: var(--button-padding, 0.75em);
+  }
+.chat-btn-text:hover, .chat-btn-icon:hover {
+    color: var(--button-text-color-hover, #1d4ed8);
+    border: 1px solid var(--button-border-color-hover);
   }
 /* Button with text and icon */
 .chat-btn-text {
   display: flex;
   align-items: center;
   gap: 8px;
-    padding: var(--button-padding, 0.75em);
     color: var(--button-text-color, #111827);
 }
-.chat-btn-text:hover {
-    color: var(--button-text-color-hover, #1d4ed8);
-  }
 .chat-btn-text span {
   white-space: nowrap;
   font-weight: 500;
-    font-size: var(--button-font-size);
 }
 .chat-btn-text img {
+  width: var(--button-icon-size);
+  height: var(--button-icon-size);
   flex-shrink: 0;
   -o-object-fit: contain;
      object-fit: contain;
-    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.75em);
-    width: 56px;
-    height: 56px;
   }
 .chat-btn-icon img {
-  height: 100%;
-  width: 100%;
+  width: var(--button-icon-size);
+  height: var(--button-icon-size);
   -o-object-fit: contain;
      object-fit: contain;
 }
@@ -599,7 +602,6 @@ video {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   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 {
@@ -650,6 +652,14 @@ video {
     padding: var(--header-padding, 0.5em);
     background-color: var(--header-bg-color);
     border-bottom: 1px solid var(--header-border-color);
+    font-size: var(--header-font-size);
+}
+.header-text {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+    font-size: var(--header-text-font-size);
+    color: var(--header-text-color);
 }
 .chat-header:hover,
   .chat-header:active {
@@ -676,12 +686,6 @@ video {
   display: flex;
   gap: 2px;
 }
-@media (min-width: 640px) {
-
-  .drag-spacer {
-    display: none;
-  }
-}
 .header-buttons {
   display: flex;
   align-items: center;
@@ -693,9 +697,13 @@ 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.375em);
+    padding: 0.375em;
     color: var(--header-button-text-color);
 }
+.header-button svg {
+  width: var(--header-button-icon-size);
+  height: var(--header-button-icon-size);
+}
 .header-button:hover {
     background-color: var(--header-button-bg-hover-color);
   }
@@ -885,7 +893,6 @@ video {
 }
 .starter-questions {
     padding: var(--container-padding, 1em);
-    font-size: var(--chat-window-font-size);
   }
 .starter-question-row {
   display: flex;
@@ -893,10 +900,9 @@ video {
 }
 /* Input area */
 .input-area {
-    padding: var(--container-padding, 1em);
+    padding: var(--container-padding, 1em) var(--container-padding, 1em) 0 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);
   }
 .input-container {
   display: flex;
@@ -928,7 +934,6 @@ video {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 200ms;
     padding: var(--send-button-padding-y, 0.5em) var(--send-button-padding-x, 1em);
-    font-size: var(--chat-window-font-size);
 }
 .send-button-enabled {
     background-color: var(--send-button-bg-color);
@@ -951,12 +956,14 @@ video {
 .relative {
   position: relative;
 }
+.flex {
+  display: flex;
+}
 .table {
   display: table;
 }
-.size-6 {
-  width: 1.5rem;
-  height: 1.5rem;
+.w-full {
+  width: 100%;
 }
 .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));
@@ -964,6 +971,32 @@ video {
 .resize {
   resize: both;
 }
+.items-center {
+  align-items: center;
+}
+.justify-center {
+  justify-content: center;
+}
+.border {
+  border-width: 1px;
+}
+.py-\[2px\] {
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
+.text-\[0\.8em\] {
+  font-size: 0.8em;
+}
+.font-light {
+  font-weight: 300;
+}
+.text-slate-500 {
+  --tw-text-opacity: 1;
+  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
+}
+.underline {
+  text-decoration-line: underline;
+}
 .shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
@@ -971,11 +1004,9 @@ video {
 }
 :host {
   /**
-    * Global Variables
     * @prop --chat-z-index: Z-index for chat widget (50)
     * @prop --container-padding: General container padding (1em)
     *
-    * Button Variables
     * @prop --button-background-color: Button background color (#ffffff)
     * @prop --button-background-color-hover: Button background color on hover (#f3f4f6)
     * @prop --button-text-color: Button text color (#111827)
@@ -983,12 +1014,9 @@ video {
     * @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.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)
+    * @prop --button-icon-size: Button icon size (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%)
@@ -998,15 +1026,17 @@ video {
     * @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)
     * @prop --header-bg-hover-color: Header background color on hover (#f9fafb)
     * @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.5em)
+    * @prop --header-font-size: Header font size (1em)
+    * @prop --header-button-icon-size: Icon size for buttons in the header (1.5em)
+    * @prop --header-text-font-size: Font size for the text in the header (1em)
+    * @prop --header-text-color: Color for the text in the header (#525762)
     *
-    * Starter Question Variables
     * @prop --starter-question-bg-color: Starter question background color (transparent)
     * @prop --starter-question-bg-hover-color: Starter question background on hover (#eff6ff)
     * @prop --starter-question-text-color: Starter question text color (#3b82f6)
@@ -1014,7 +1044,6 @@ video {
     * @prop --starter-question-border-hover-color: Starter question border on hover (#2563eb)
     * @prop --starter-question-padding: Starter question padding (0.75em)
     *
-    * Message Bubble Variables
     * @prop --message-user-bg-color: User message background color (#3b82f6)
     * @prop --message-user-text-color: User message text color (#ffffff)
     * @prop --message-assistant-bg-color: Assistant message background color (#e5e7eb)
@@ -1026,7 +1055,6 @@ video {
     * @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)
     * @prop --input-border-color: Input field border color (#d1d5db)
     * @prop --input-text-color: Input text color (#111827)
@@ -1035,7 +1063,6 @@ video {
     * @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)
     * @prop --send-button-bg-hover-color: Send button background on hover (#2563eb)
     * @prop --send-button-text-color: Send button text color (#ffffff)
@@ -1044,25 +1071,20 @@ video {
     * @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.25em)
     *
-    * Typing Indicator Variables
     * @prop --typing-progress-bg-color: Typing progress bar background color (#ade3ff)
     *
-    * Scrollbar Variables
     * @prop --scrollbar-track-color: Scrollbar track color (#f3f4f6)
     * @prop --scrollbar-thumb-color: Scrollbar thumb color (#d1d5db)
     * @prop --scrollbar-thumb-hover-color: Scrollbar thumb hover color (#9ca3af)
     *
-    * Error Variables
     * @prop --error-text-color: Error text color (#ef4444)
     * @prop --error-message-padding: Error message padding (0.5em)
     *
-    * Markdown Code Variables
     * @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)
@@ -1079,13 +1101,11 @@ video {
   --button-background-color-hover: #f3f4f6;
   --button-text-color: #111827;
   --button-text-color-hover: #1d4ed8;
-  --button-border-color: #6b7280;
-  --button-border-color-hover: #374151;
-  --button-padding: 0.75em;
-  --button-padding-sm: 0.375em;
+  --button-border-color: transparent;
+  --button-border-color-hover: #d1d5db;
+  --button-padding: 0.5em;
   --button-font-size: 0.875em; /* text-sm */
-  --button-icon-width: 1.5em;
-  --button-icon-height: 1.5em;
+  --button-icon-size: 1.5em;
 
   /* Chat window variables */
   --chat-window-height: 60%;
@@ -1104,6 +1124,10 @@ video {
   --header-button-text-color: #6b7280;
   --header-button-bg-hover-color: #f3f4f6;
   --header-padding: 0.5em;
+  --header-font-size: 1em;
+  --header-text-font-size: 1em;
+  --header-text-color: #525762;
+  --header-button-icon-size: 1.5em;
 
   /* Starter question variables */
   --starter-question-bg-color: transparent;
@@ -1174,9 +1198,6 @@ video {
   right: 20px;
   bottom: 20px;
 }
-#ocs-chat-window {
-  z-index: var(--chat-z-index);
-}
 textarea {
   max-height: 8rem;
   min-height: 2.5rem;
@@ -1197,6 +1218,10 @@ textarea::-webkit-scrollbar-thumb {
 textarea::-webkit-scrollbar-thumb:hover {
   background-color: var(--scrollbar-thumb-hover-color);
 }
+.loading-spinner {
+  width: var(--loading-spinner-size);
+  height: var(--loading-spinner-size);
+}
 @keyframes spin {
 
   to {
@@ -1209,8 +1234,6 @@ 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.25em);
-  height: var(--loading-spinner-size, 1.25em);
 }
 .overflow-y-auto::-webkit-scrollbar {
   width: 0.375rem;
@@ -1881,7 +1904,7 @@ 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);
+  font-size: 1em;
   --tw-prose-body: var(--message-assistant-text-color);
   --tw-prose-headings: var(--message-assistant-text-color);
   --tw-prose-lead: var(--message-assistant-text-color);

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 { getCSRFToken } from "../../utils/cookies";
 import { varToPixels } from "../../utils/utils";
 export class OcsChat {
     constructor() {
@@ -173,6 +174,16 @@ export class OcsChat {
     getApiBaseUrl() {
         return this.apiBaseUrl || window.location.origin;
     }
+    getApiHeaders() {
+        const headers = {
+            'Content-Type': 'application/json',
+        };
+        const csrfToken = getCSRFToken(this.getApiBaseUrl());
+        if (csrfToken) {
+            headers['X-CSRFToken'] = csrfToken;
+        }
+        return headers;
+    }
     async startSession() {
         try {
             this.isLoading = true;
@@ -191,9 +202,7 @@ export class OcsChat {
             }
             const response = await fetch(`${this.getApiBaseUrl()}/api/chat/start/`, {
                 method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
+                headers: this.getApiHeaders(),
                 body: JSON.stringify(requestBody)
             });
             if (!response.ok) {
@@ -250,9 +259,7 @@ export class OcsChat {
             this.isTyping = true;
             const response = await fetch(`${this.getApiBaseUrl()}/api/chat/${this.sessionId}/message/`, {
                 method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
+                headers: this.getApiHeaders(),
                 body: JSON.stringify({ message: message.trim() })
             });
             if (!response.ok) {
@@ -688,13 +695,13 @@ export class OcsChat {
         if (this.error) {
             return (h(Host, null, h("p", { class: "error-message" }, 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: `chat-header ${this.isDragging ? 'chat-header-dragging' : 'chat-header-draggable'}`, onMouseDown: this.handleMouseDown, onTouchStart: this.handleTouchStart }, h("div", { class: "drag-indicator" }, h("div", { class: "drag-dots" }, h(GripDotsVerticalIcon, null))), h("div", { class: "drag-spacer" }), h("div", { class: "header-buttons" }, this.allowFullScreen && h("button", { class: "header-button fullscreen-button", 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: "header-button", onClick: () => this.startNewChat(), title: "Start new chat", "aria-label": "Start new chat" }, h(PencilSquare, null))), h("button", { class: "header-button", onClick: () => this.visible = false, "aria-label": "Close" }, h(XMarkIcon, null)))), h("div", { class: "chat-content" }, this.isLoading && !this.sessionId && (h("div", { class: "loading-container" }, h("div", { class: "loading-spinner" }), h("span", { class: "loading-text" }, "Starting chat..."))), this.sessionId && (h("div", { ref: (el) => this.messageListRef = el, class: "messages-container" }, this.messages.length === 0 && !this.isTyping && this.parsedWelcomeMessages.length > 0 && (h("div", { class: "welcome-messages" }, this.parsedWelcomeMessages.map((message, index) => (h("div", { key: `welcome-${index}`, class: "message-row message-row-assistant" }, h("div", { class: "message-bubble message-bubble-assistant" }, h("div", { class: "chat-markdown", innerHTML: renderMarkdownComplete(message) }))))))), this.messages.map((message, index) => (h("div", { key: index, class: `message-row ${message.role === 'user' ? 'message-row-user' : 'message-row-assistant'}` }, h("div", { class: `message-bubble ${message.role === 'user'
+        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: `chat-header ${this.isDragging ? 'chat-header-dragging' : 'chat-header-draggable'}`, onMouseDown: this.handleMouseDown, onTouchStart: this.handleTouchStart }, h("div", { class: "drag-indicator" }, h("div", { class: "drag-dots header-button" }, h(GripDotsVerticalIcon, null))), h("div", { class: "header-text" }, this.headerText), h("div", { class: "header-buttons" }, this.allowFullScreen && h("button", { class: "header-button fullscreen-button", 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: "header-button", onClick: () => this.startNewChat(), title: "Start new chat", "aria-label": "Start new chat" }, h(PencilSquare, null))), h("button", { class: "header-button", onClick: () => this.visible = false, "aria-label": "Close" }, h(XMarkIcon, null)))), h("div", { class: "chat-content" }, this.isLoading && !this.sessionId && (h("div", { class: "loading-container" }, h("div", { class: "loading-spinner" }), h("span", { class: "loading-text" }, "Starting chat..."))), this.sessionId && (h("div", { ref: (el) => this.messageListRef = el, class: "messages-container" }, this.messages.length === 0 && !this.isTyping && this.parsedWelcomeMessages.length > 0 && (h("div", { class: "welcome-messages" }, this.parsedWelcomeMessages.map((message, index) => (h("div", { key: `welcome-${index}`, class: "message-row message-row-assistant" }, h("div", { class: "message-bubble message-bubble-assistant" }, h("div", { class: "chat-markdown", innerHTML: renderMarkdownComplete(message) }))))))), this.messages.map((message, index) => (h("div", { key: index, class: `message-row ${message.role === 'user' ? 'message-row-user' : 'message-row-assistant'}` }, h("div", { class: `message-bubble ${message.role === 'user'
                 ? 'message-bubble-user'
                 : message.role === 'assistant'
                     ? 'message-bubble-assistant'
                     : 'message-bubble-system'}` }, h("div", { class: "chat-markdown", innerHTML: renderMarkdownComplete(message.content) }), message.attachments && message.attachments.length > 0 && (h("div", { class: "message-attachments" }, message.attachments.map((attachment, attachmentIndex) => (h("a", { key: attachmentIndex, href: attachment.content_url, target: "_blank", rel: "noopener noreferrer", class: "attachment-link" }, "\uD83D\uDCCE ", attachment.name))))), h("div", { class: "message-timestamp" }, this.formatTime(message.created_at)))))), this.isTyping && (h("div", null, h("div", { class: "typing-indicator" }, h("div", { class: "typing-progress" })), h("div", { class: "typing-text" }, h("span", null, "Preparing response"), h("span", { class: "typing-dots" })))))), this.sessionId && this.showStarterQuestions && this.messages.length === 0 && !this.isTyping && (h("div", { class: "starter-questions" }, this.parsedStarterQuestions.map((question, index) => (h("div", { key: `starter-${index}`, class: "starter-question-row" }, h("button", { class: "starter-question", onClick: () => this.handleStarterQuestionClick(question) }, question)))))), this.sessionId && (h("div", { class: "input-area" }, h("div", { class: "input-container" }, h("textarea", { ref: (el) => this.textareaRef = el, class: "message-textarea", 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: `send-button ${!this.isTyping && !!this.messageInput.trim()
                 ? 'send-button-enabled'
-                : 'send-button-disabled'}`, onClick: () => this.sendMessage(this.messageInput), disabled: this.isTyping || !this.messageInput.trim() }, "Send")))))))));
+                : 'send-button-disabled'}`, onClick: () => this.sendMessage(this.messageInput), disabled: this.isTyping || !this.messageInput.trim() }, "Send")))), h("div", { class: "flex items-center justify-center text-[0.8em] font-light w-full text-slate-500 py-[2px]" }, h("p", null, "Powered by ", h("a", { class: "underline", href: "https://www.dimagi.com", target: "_blank" }, "Dimagi"))))))));
     }
     static get is() { return "open-chat-studio-widget"; }
     static get encapsulation() { return "shadow"; }
@@ -807,6 +814,25 @@ export class OcsChat {
                 "reflect": false,
                 "defaultValue": "'square'"
             },
+            "headerText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "''",
+                    "resolved": "\"\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The text to place in the header."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "header-text",
+                "reflect": false
+            },
             "visible": {
                 "type": "boolean",
                 "mutable": true,