imacaron-chatbot 0.3.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 MacaronFR
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,126 @@
+# Chatbot
+
+## Usage
+
+First, you will need to put the chatbot button and root in your HTML.
+The minimal structure is the following:
+```html
+<div class="chatbot" id="chatbot-button">
+    <button class="button-icon">Open</button>
+    <button class="button-icon not-visible">Close</button>
+    <div id="chatbot_root" class="chatbot-container not-visible"></div>
+</div>
+```
+The structure, class and id names are important and can't be changed. However, you can change the button content at your will.
+
+This is the default content of the buttons:
+```html
+<div class="chatbot" id="chatbot-button">
+    <button class="button-icon">
+      <svg width="32" height="30" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><g clip-path="url(#messages__clip0_14307_15730)"><path fill-opacity="0.01" d="M0 0h24v24H0z"></path><mask id="messages__b" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24" style="mask-type: alpha;"><g clip-path="url(#messages__clip1_14307_15730)"><g clip-path="url(#messages__clip2_14307_15730)"><mask id="messages__a" maskUnits="userSpaceOnUse" x="1" y="0" width="23" height="23" style="mask-type: alpha;"><path d="M2.571 22.286h-.008.008z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M17.143 4.286c1.414 0 2.571 1.157 2.571 2.571v8.572c0 1.414-1.157 2.571-2.571 2.571H7.209l-4.037 4.037c-.162.162-.384.247-.606.248-.11 0-.219-.017-.32-.068-.317-.128-.532-.445-.532-.788V6.857c0-1.414 1.157-2.571 2.572-2.571h12.857zM4.286 6c-.472 0-.857.386-.857.857v12.506l2.82-2.82c.162-.163.377-.249.608-.249h10.286c.471 0 .857-.385.857-.857V6.866c0-.472-.386-.857-.857-.857H4.286V6z"></path><path d="M20.571.857c1.415 0 2.572 1.158 2.572 2.572V12c0 .472-.386.857-.857.857-.472 0-.857-.385-.857-.857V3.43c0-.472-.386-.857-.858-.857H7.714c-.471 0-.857-.386-.857-.857 0-.472.386-.858.857-.858h12.857z"></path></mask><g mask="url(#messages__a)"><path d="M-1.714-1.714h27.429v27.429H-1.714z"></path></g></g></g></mask><g mask="url(#messages__b)"><path d="M0 0h24v24H0V0z"></path></g></g><defs><clipPath id="messages__clip0_14307_15730"><path d="M0 0h24v24H0z"></path></clipPath><clipPath id="messages__clip1_14307_15730"><path d="M0 0h24v24H0z"></path></clipPath><clipPath id="messages__clip2_14307_15730"><path transform="translate(-1.714 -1.714)" d="M0 0h27.429v27.429H0z"></path></clipPath></defs></svg>
+    </button>
+    <button class="button-icon not-visible">
+      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 19 18" class="conversations-visitor-close-icon"><g fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g fill="currentColor" transform="translate(-927 -991) translate(900.277 962)"><g transform="translate(27 29)"><path d="M10.627 9.013l6.872 6.873.708.707-1.415 1.414-.707-.707-6.872-6.872L2.34 17.3l-.707.707L.22 16.593l.707-.707L7.8 9.013.946 2.161l-.707-.708L1.653.04l.707.707L9.213 7.6 16.066.746l.707-.707 1.414 1.414-.707.708-6.853 6.852z"></path></g></g></g></svg>
+    </button>
+    <div id="chatbot_root" class="chatbot-container not-visible"></div>
+  </div>
+```
+
+After that you will need to add the script and CSS to load the chatbot
+```html
+<script type="module" src="chatbot.js"></script>
+<link rel="stylesheet" href="chatbot.css">
+```
+
+Finally, you will need to initialize the chatbot by listening to the `chatbot-loaded` event and then calling the `initChatbot` function.  
+This function takes one argument of type [`TConfig`](./src/types/TConfig.ts).  
+
+Example: 
+```typescript
+document.addEventListener("chatbot-loaded", () => initChatbot({ ... })
+);
+```
+## Configuration
+
+To use the chatbot, you will need to provide at least a title and a list [`TQuestions`](./src/types/TQuestions.ts) object.  
+You can also provide a callback `onEnd` that will take the data you or the user sent during the chatbot.  
+You can finally customize the end message text by setting the `endMessage` property and the new chat button text by setting the `endButtonText` property. 
+
+### Example
+
+```typescript
+const config: TConfig = {
+  title: "Chatbot title",
+  questions: { ... },
+  onEnd: (data) => console.log(data),
+  endMessage: "Thanks for chatting with us!",
+  endButtonText: "Open new chat",
+};
+```
+
+### [`TQuestions`](./src/types/TQuestions.ts)
+
+The `TQuestions` object is a map of question id to `TQuestion` object.  
+Each `TQuestion` object contains at least a question as a string or a list of string (a list will display a chat bubble for each element).  
+It can also contain an action as a `TAction` object.  
+It may also contain a list of `TAnswer` objects.  
+And it may have a `goto` string that if provided will redirect automatically to the question with the given id.
+The chatbot will always start at the question with id `start`.
+
+### Exemple
+
+```json
+{
+  "start": {
+    "question": "First question",
+    "answers": [
+      { "text": "Answer 1", "next": "other_id" },
+      { "text": "Answer 2", "next": "other_id", "action": { "action": "set", "property": "prop1", "value": "value1" } }
+    ]
+  },
+  "other_id": {
+    "question": ["Question", "In 2 messages"],
+    "goto": "end",
+    "action": { "action": "ask", "property": "prop2" }
+  },
+  "end": {
+    "question": "End of chatbot",
+    "action": { "action": "end" }
+  }
+}
+```
+
+### `TAction`
+
+The `TAction` object contains an `action` property that can be either `ask`, `set` or end.  
+If the action is `ask`, the chatbot will ask the user a question and wait for a response to set the `property` to the response.  
+If the action is `set`, the chatbot will set the given `property` to the given `value`.
+If the action is `end`, the chatbot will end the conversation and call the `onEnd` callback with the data provided by the user.
+An action can also contain a `goto` property that will redirect the chatbot to the question with the given id.
+
+### `TAnswer`
+
+The `TAnswer` object contains a `text` property that will be displayed as a message and a `next` property that will redirect the chatbot to the question with the given id.  
+It can also contain an `action` property that will be executed after the message is displayed.
+The `at` property is used internally and you don't need to set it.
+
+## Customization
+
+You can customize the chatbot colors by setting variables in the `theme` layer.  
+To not be overridden by the chatbot default, you must place your custom style after the link to `chatbot.css`.  
+
+### Variables
+
+| Name                   | Default            | Description                                                                           |
+|------------------------|--------------------|---------------------------------------------------------------------------------------|
+| --color-primary        | rgb(178, 69, 146)  | The main color. Used on header, selected response, options hover and endButton color. |
+| --color-primary-dark   | rgb(154, 12, 113)  | Dark declination of the primary color. Used on hover of enButton.                     |
+| --color-onprimary      | rgb(255, 255, 255) | Text color on primary container. Used in header text and button icon color.           |
+| --color-question       | rgb(245, 243, 242) | Question container background color.                                                  |
+| --color-question-text  | rgb(0, 0, 0)       | Question text color. Used in end message text.                                        |
+| --color-background     | rgb(255, 255, 255) | Chatbot background color.                                                             |
+| --color-option         | rgb(51, 71, 91)    | Option border and text color.                                                         |
+| --color-option-hover   | --color-primary    | Option border and text color on hover. By default same as primary.                    |
+| --color-input          | rgb(30, 41, 57)    | Footer input text and border color.                                                   |
+| --color-input-disabled | rgb(166, 160, 155) | Footer input text and border color when disabled (no input required).                 |
+

package/dist/Answer.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface AnswerProps {
+    text: string;
+    at?: string;
+}
+export default function Answer(props: AnswerProps): React.JSX.Element;
+export {};

package/dist/Answer.js

@@ -0,0 +1,7 @@
+import React from "react";
+export default function Answer(props) {
+    return React.createElement("div", { className: "bg-primary rounded-lg px-4 py-2 self-end text-onprimary" },
+        React.createElement("p", null, props.text),
+        React.createElement("p", { className: "w-full text-end text-xs" }, props.at));
+}
+//# sourceMappingURL=Answer.js.map

package/dist/Answer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Answer.js","sourceRoot":"","sources":["../src/Answer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAkB;IAChD,OAAO,6BAAK,SAAS,EAAE,yDAAyD;QAC/E,+BAAI,KAAK,CAAC,IAAI,CAAK;QACnB,2BAAG,SAAS,EAAE,yBAAyB,IAAG,KAAK,CAAC,EAAE,CAAK,CAClD,CAAA;AACP,CAAC"}

package/dist/Answers.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import type { TAnswer } from "./types/TQuestions.ts";
+interface AnswersProps {
+    answers: TAnswer[];
+    onClick: (answer: TAnswer) => void;
+}
+export default function Answers(props: AnswersProps): React.JSX.Element;
+export {};

package/dist/Answers.js

@@ -0,0 +1,7 @@
+import React from "react";
+export default function Answers(props) {
+    return React.createElement("div", { className: "self-end flex flex-row flex-wrap items-end gap-2 max-w-[284px]" }, props.answers.map((el, i) => {
+        return (React.createElement("div", { className: "cursor-pointer bg-transparent rounded-lg px-4 py-2 border border-option text-option hover:text-option-hover hover:border-option-hover", key: i, onClick: () => props.onClick(el) }, el.text));
+    }));
+}
+//# sourceMappingURL=Answers.js.map

package/dist/Answers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Answers.js","sourceRoot":"","sources":["../src/Answers.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,KAAmB;IAClD,OAAO,6BAAK,SAAS,EAAE,gEAAgE,IACrF,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE;QAC5B,OAAO,CACN,6BAAK,SAAS,EAAE,uIAAuI,EAAE,GAAG,EAAE,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,IAC/L,EAAE,CAAC,IAAI,CACH,CACN,CAAA;IACF,CAAC,CAAC,CACG,CAAA;AACP,CAAC"}

package/dist/Chatbot.d.ts

@@ -0,0 +1,7 @@
+import type TConfig from "./types/TConfig.ts";
+import React from "react";
+interface ChatbotProps {
+    config?: TConfig;
+}
+export default function Chatbot(props: ChatbotProps): React.JSX.Element;
+export {};

package/dist/Chatbot.js

@@ -0,0 +1,121 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import Question from "./Question";
+import Answers from "./Answers";
+import History from "./History";
+import Input from "./Input";
+import { currentTime } from "./utils";
+import useChatbot from "./hooks/useChatbot";
+import React from "react";
+document.getElementById("chatbot_root").onclick = (e) => {
+    e.stopPropagation();
+};
+document.getElementById("chatbot-button").addEventListener("click", () => {
+    document.getElementById("chatbot_root").classList.toggle("not-visible");
+    document.querySelectorAll(".button-icon").forEach(el => {
+        el.classList.toggle("not-visible");
+    });
+});
+export default function Chatbot(props) {
+    const config = useChatbot(props.config);
+    const [data, setData] = useState({});
+    const [chatbot, setChatbot] = useState(config.bot.questions);
+    const [currentQuestion, setCurrentQuestion] = useState(null);
+    const [currentQuestionId, setCurrentQuestionId] = useState(null);
+    const [history, setHistory] = useState({});
+    const [answers, setAnswers] = useState({});
+    const [end, setEnd] = useState(false);
+    const container = useRef(null);
+    const audio = useMemo(() => {
+        return new Audio("/notification.mp3");
+    }, []);
+    const clickAnswer = useCallback((answer) => {
+        if (answer.next && currentQuestion) {
+            answer.at = currentTime();
+            setHistory(prev => ({ ...prev, [currentQuestionId]: currentQuestion }));
+            setCurrentQuestionId(answer.next);
+            setCurrentQuestion(chatbot[answer.next]);
+            setAnswers(prev => ({ ...prev, [currentQuestionId]: answer }));
+            if (answer.action) {
+                if (answer.action.action === "set") {
+                    setData(prev => ({ ...prev, [answer.action.property]: answer.action?.value }));
+                }
+            }
+        }
+    }, [currentQuestion, chatbot, currentQuestionId]);
+    const sendAnswer = useCallback((input) => {
+        if (currentQuestion && currentQuestion.action && currentQuestion.action.property) {
+            const prop = currentQuestion.action.property;
+            setData(prev => ({ ...prev, [prop]: input }));
+            setHistory(prev => ({ ...prev, [currentQuestionId]: currentQuestion }));
+            setCurrentQuestionId(currentQuestion.action.goto);
+            setCurrentQuestion(chatbot[currentQuestion.action.goto]);
+            setAnswers(prev => ({ ...prev, [currentQuestionId]: { text: input, at: currentTime() } }));
+        }
+    }, [currentQuestion, currentQuestionId, chatbot]);
+    useEffect(() => {
+        setChatbot(config.bot.questions);
+    }, [config]);
+    useEffect(() => {
+        if (chatbot["start"] !== undefined) {
+            setCurrentQuestion(chatbot["start"]);
+            setCurrentQuestionId("start");
+        }
+    }, [chatbot]);
+    useEffect(() => {
+        container?.current?.scrollBy(0, 500);
+        if (currentQuestion && currentQuestion.at === undefined) {
+            setCurrentQuestion(prev => ({ ...prev, at: currentTime() }));
+            currentQuestion.at = currentTime();
+        }
+        if (currentQuestion && currentQuestion.goto) {
+            const next = currentQuestion.goto;
+            setTimeout(() => {
+                setHistory(prev => ({ ...prev, [currentQuestionId]: currentQuestion }));
+                setCurrentQuestionId(next);
+                setCurrentQuestion(chatbot[next]);
+            }, 2500);
+        }
+    }, [currentQuestion, chatbot, currentQuestionId]);
+    useEffect(() => {
+        if (currentQuestion && currentQuestion.action) {
+            if (currentQuestion.action.property && currentQuestion.action.action === "set") {
+                setData(prev => ({ ...prev, [currentQuestion.action.property]: currentQuestion.action?.value }));
+            }
+        }
+    }, [config, currentQuestion]);
+    useEffect(() => {
+        if (currentQuestion && currentQuestion.action && currentQuestion.action.action === "end") {
+            setEnd(true);
+            if (config.onEnd) {
+                config.onEnd(data);
+            }
+        }
+    }, [config, currentQuestion, data]);
+    useEffect(() => {
+        if (currentQuestionId !== "start") {
+            audio.play();
+        }
+    }, [currentQuestionId, audio]);
+    return (React.createElement("div", { className: "h-[700px] flex flex-col overflow-hidden bg-background rounded-2xl absolute w-[416px] -top-[720px] -left-[356px]" },
+        React.createElement("header", { className: "bg-primary" },
+            React.createElement("nav", { className: "flex items-center h-full p-4 flex-col text-onprimary" },
+                React.createElement("div", { className: "flex w-full" }),
+                React.createElement("p", { className: "font-bold text-xl" }, config.bot.name))),
+        React.createElement("div", { className: "flex flex-col items-start gap-2 overflow-y-auto grow pb-8 px-4 pt-4 scroll-smooth", ref: container },
+            React.createElement(History, { history: history, answers: answers }),
+            currentQuestion && React.createElement("div", { className: "flex flex-col gap-2 w-full" },
+                React.createElement(Question, { text: currentQuestion.question, at: currentQuestion.at })),
+            currentQuestion && currentQuestion.answers && React.createElement(Answers, { answers: currentQuestion.answers, onClick: clickAnswer }),
+            end && React.createElement("div", { className: "w-full text-center" },
+                React.createElement("p", { className: "text-question-text" }, config.endMessage ?? "Votre chat est terminé"),
+                React.createElement("a", { className: "text-primary transition hover:underline hover:text-primary-dark cursor-pointer", onClick: () => {
+                        setCurrentQuestion(chatbot["start"]);
+                        setCurrentQuestionId("start");
+                        setHistory({});
+                        setAnswers({});
+                        setEnd(false);
+                    } }, config.endButtonText ?? "Pour commencer un nouveau chat, cliquez ici."))),
+        React.createElement("footer", { className: "w-full p-4 bg-transparent" },
+            React.createElement(Input, { disabled: currentQuestion?.action?.action !== "ask", onSend: sendAnswer }))));
+}
+//# sourceMappingURL=Chatbot.js.map

package/dist/Chatbot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chatbot.js","sourceRoot":"","sources":["../src/Chatbot.tsx"],"names":[],"mappings":"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"}

package/dist/History.d.ts

@@ -0,0 +1,8 @@
+import type { TAnswer, TQuestions } from "./types/TQuestions.ts";
+import React from "react";
+interface HistoryProps {
+    history: TQuestions;
+    answers: Record<string, TAnswer>;
+}
+export default function History(props: HistoryProps): React.JSX.Element[];
+export {};

package/dist/History.js

@@ -0,0 +1,11 @@
+import Question from "./Question";
+import Answer from "./Answer";
+import React from "react";
+export default function History(props) {
+    return Object.keys(props.history).map(k => {
+        return React.createElement("div", { className: "flex flex-col gap-2 w-full", key: k },
+            React.createElement(Question, { key: `${k}_question`, text: props.history[k].question, at: props.history[k].at }),
+            props.answers[k] && React.createElement(Answer, { key: `${k}_answer`, text: props.answers[k].text, at: props.answers[k].at }));
+    });
+}
+//# sourceMappingURL=History.js.map

package/dist/History.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"History.js","sourceRoot":"","sources":["../src/History.tsx"],"names":[],"mappings":"AACA,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,KAAmB;IAClD,OAAO,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;QACzC,OAAO,6BAAK,SAAS,EAAE,4BAA4B,EAAE,GAAG,EAAE,CAAC;YAC1D,oBAAC,QAAQ,IAAC,GAAG,EAAE,GAAG,CAAC,WAAW,EAAE,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,EAAE,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,GAAG;YACzF,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,oBAAC,MAAM,IAAC,GAAG,EAAE,GAAG,CAAC,SAAS,EAAE,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,GAAG,CACpG,CAAA;IACP,CAAC,CAAC,CAAC;AACJ,CAAC"}

package/dist/Input.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface InputProps {
+    disabled?: boolean;
+    onSend?: (input: string) => void;
+}
+export default function Input(props: InputProps): React.JSX.Element;
+export {};

package/dist/Input.js

@@ -0,0 +1,24 @@
+import React from "react";
+import Send from "./Send";
+import { useEffect, useState } from "react";
+export default function Input(props) {
+    const [value, setValue] = useState("");
+    useEffect(() => {
+        if (props.disabled) {
+            setValue("");
+        }
+    }, [setValue, props.disabled]);
+    return React.createElement("div", { className: "border border-input rounded-full px-4 py-2 flex justify-between text-input" },
+        React.createElement("input", { type: "text", className: "focus:outline-none grow", value: value, onChange: e => setValue(e.target.value), disabled: props.disabled, onKeyDown: e => {
+                if (e.key === "Enter") {
+                    props.onSend?.(value);
+                    setValue("");
+                }
+            } }),
+        React.createElement("button", { className: "cursor-pointer text-input disabled:cursor-not-allowed disabled:text-input-disabled", disabled: value.length === 0 || props.disabled, onClick: () => {
+                props.onSend?.(value);
+                setValue("");
+            } },
+            React.createElement(Send, null)));
+}
+//# sourceMappingURL=Input.js.map

package/dist/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","sourceRoot":"","sources":["../src/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,QAAQ,CAAC;AAC1B,OAAO,EAAC,SAAS,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AAO1C,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,KAAiB;IAC9C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACvC,SAAS,CAAC,GAAG,EAAE;QACd,IAAG,KAAK,CAAC,QAAQ,EAAE,CAAC;YACnB,QAAQ,CAAC,EAAE,CAAC,CAAC;QACd,CAAC;IACF,CAAC,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC/B,OAAO,6BAAK,SAAS,EAAE,4EAA4E;QAClG,+BAAO,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,yBAAyB,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,SAAS,EAAE,CAAC,CAAC,EAAE;gBAC1J,IAAG,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;oBACtB,KAAK,CAAC,MAAM,EAAE,CAAC,KAAK,CAAC,CAAA;oBACrB,QAAQ,CAAC,EAAE,CAAC,CAAC;gBACd,CAAC;YACF,CAAC,GAAG;QACJ,gCAAQ,SAAS,EAAE,oFAAoF,EAAE,QAAQ,EAAE,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,OAAO,EAAE,GAAG,EAAE;gBACtK,KAAK,CAAC,MAAM,EAAE,CAAC,KAAK,CAAC,CAAA;gBACrB,QAAQ,CAAC,EAAE,CAAC,CAAC;YACd,CAAC;YACA,oBAAC,IAAI,OAAE,CACC,CACJ,CAAA;AACP,CAAC"}

package/dist/Question.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface QuestionProps {
+    text: string | string[];
+    at?: string;
+}
+export default function Question(props: QuestionProps): React.JSX.Element | React.JSX.Element[];
+export {};

package/dist/Question.js

@@ -0,0 +1,9 @@
+import React from "react";
+export default function Question(props) {
+    if (typeof props.text === "string")
+        return (React.createElement("div", { className: "min-h-8 bg-question text-question-text rounded-lg px-4 py-2 self-start whitespace-pre-wrap h-auto" },
+            React.createElement("p", null, props.text),
+            React.createElement("p", { className: "text-xs" }, props.at)));
+    return props.text.map((el, i) => React.createElement(Question, { text: el, key: i }));
+}
+//# sourceMappingURL=Question.js.map

package/dist/Question.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Question.js","sourceRoot":"","sources":["../src/Question.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAoB;IACpD,IAAG,OAAO,KAAK,CAAC,IAAI,KAAK,QAAQ;QAAE,OAAO,CACzC,6BAAK,SAAS,EAAE,mGAAmG;YAClH,+BAAI,KAAK,CAAC,IAAI,CAAK;YACnB,2BAAG,SAAS,EAAE,SAAS,IAAG,KAAK,CAAC,EAAE,CAAK,CAClC,CACN,CAAA;IACD,OAAQ,KAAK,CAAC,IAAiB,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,oBAAC,QAAQ,IAAC,IAAI,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,GAAG,CAAC,CAAC;AAC/E,CAAC"}

package/dist/Send.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export default function Send(): React.JSX.Element;

package/dist/Send.js

@@ -0,0 +1,6 @@
+import React from "react";
+export default function Send() {
+    return React.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg", className: "SendButton__SendIcon-biCvBD iJveov", style: { fill: "currentColor" } },
+        React.createElement("path", { d: "M12.377 1.772c.68-.183 1.389.005 1.892.508.503.503.69 1.206.508 1.892l-2.468 9.211c-.183.686-.697 1.2-1.383 1.383-.171.046-.343.068-.514.068h-.006c-.509 0-1-.2-1.372-.571l-2.56-2.56c-.668-.668-.668-1.754 0-2.423l3.229-3.228c.223-.223.583-.223.806 0 .222.223.222.582 0 .805L7.28 10.086c-.108.108-.165.251-.165.406 0 .154.057.297.165.405l2.56 2.56c.206.206.503.286.783.212.286-.074.497-.292.577-.578L13.67 3.88c.074-.286 0-.577-.212-.782-.211-.206-.503-.286-.783-.212L3.463 5.354c-.286.075-.497.292-.577.572-.074.285 0 .577.211.783l1.835 1.834c.223.223.222.583 0 .806-.223.223-.583.223-.806 0L2.292 7.514c-.503-.502-.692-1.205-.509-1.89.183-.68.697-1.2 1.383-1.383l9.211-2.47z" }));
+}
+//# sourceMappingURL=Send.js.map

package/dist/Send.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Send.js","sourceRoot":"","sources":["../src/Send.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,CAAC,OAAO,UAAU,IAAI;IAC3B,OAAO,6BAAK,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAC,SAAS,EAAC,oCAAoC,EAAC,KAAK,EAAE,EAAC,IAAI,EAAE,cAAc,EAAC;QACvK,8BACC,CAAC,EAAC,oqBAAoqB,GAAQ,CAC1qB,CAAA;AACP,CAAC"}

package/dist/hooks/useChatbot.d.ts

@@ -0,0 +1,2 @@
+import type TConfig from "../types/TConfig.ts";
+export default function useChatbot(initConfig?: TConfig): TConfig;

package/dist/hooks/useChatbot.js

@@ -0,0 +1,44 @@
+import { useCallback, useEffect, useState } from "react";
+export default function useChatbot(initConfig) {
+    const [config, setConfig] = useState(initConfig ?? { bot: { name: "Chatbot", questions: {} } });
+    const init = useCallback((ev) => {
+        setConfig(ev.detail);
+        const theme = ev.detail.bot.theme;
+        if (theme) {
+            document.getElementById("chatbot-button").style.cssText = cssStringFromTheme(theme);
+        }
+    }, []);
+    useEffect(() => {
+        document.addEventListener("chatbot-init", init);
+        document.dispatchEvent(new CustomEvent("chatbot-loaded"));
+        return () => {
+            document.removeEventListener("chatbot-init", init);
+        };
+    }, [init]);
+    return config;
+}
+function cssStringFromTheme(theme) {
+    let css = "";
+    if (theme.primary)
+        css += `--color-primary: ${theme.primary};\n`;
+    if (theme["primary-dark"])
+        css += `--color-primary-dark: ${theme["primary-dark"]};\n`;
+    if (theme.onprimary)
+        css += `--color-onprimary: ${theme.onprimary};\n`;
+    if (theme.question)
+        css += `--color-question: ${theme.question};\n`;
+    if (theme["question-text"])
+        css += `--color-question-text: ${theme["question-text"]};\n`;
+    if (theme.background)
+        css += `--color-background: ${theme.background};\n`;
+    if (theme.option)
+        css += `--color-option: ${theme.option};\n`;
+    if (theme["option-hover"])
+        css += `--color-option-hover: ${theme["option-hover"]};\n`;
+    if (theme.input)
+        css += `--color-input: ${theme.input};\n`;
+    if (theme["input-disabled"])
+        css += `--color-input-disabled: ${theme["input-disabled"]};\n`;
+    return css;
+}
+//# sourceMappingURL=useChatbot.js.map

package/dist/hooks/useChatbot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChatbot.js","sourceRoot":"","sources":["../../src/hooks/useChatbot.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AAIvD,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,UAAoB;IACtD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAU,UAAU,IAAI,EAAE,GAAG,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,EAAC,EAAC,CAAC,CAAC;IACvG,MAAM,IAAI,GAAG,WAAW,CAAC,CAAC,EAAS,EAAE,EAAE;QACtC,SAAS,CAAE,EAA2B,CAAC,MAAM,CAAC,CAAC;QAC/C,MAAM,KAAK,GAAI,EAA2B,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAA;QAC3D,IAAG,KAAK,EAAE,CAAC;YACV,QAAQ,CAAC,cAAc,CAAC,gBAAgB,CAAE,CAAC,KAAK,CAAC,OAAO,GAAG,kBAAkB,CAAC,KAAK,CAAC,CAAA;QACrF,CAAC;IACF,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,SAAS,CAAC,GAAG,EAAE;QACd,QAAQ,CAAC,gBAAgB,CAAC,cAAc,EAAE,IAAI,CAAC,CAAC;QAChD,QAAQ,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,gBAAgB,CAAC,CAAC,CAAC;QAC1D,OAAO,GAAG,EAAE;YACX,QAAQ,CAAC,mBAAmB,CAAC,cAAc,EAAE,IAAI,CAAC,CAAC;QACpD,CAAC,CAAA;IACF,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IACX,OAAO,MAAM,CAAC;AACf,CAAC;AAED,SAAS,kBAAkB,CAAC,KAAY;IACvC,IAAI,GAAG,GAAG,EAAE,CAAC;IACb,IAAG,KAAK,CAAC,OAAO;QAAE,GAAG,IAAI,oBAAoB,KAAK,CAAC,OAAO,KAAK,CAAC;IAChE,IAAG,KAAK,CAAC,cAAc,CAAC;QAAE,GAAG,IAAI,yBAAyB,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IACrF,IAAG,KAAK,CAAC,SAAS;QAAE,GAAG,IAAI,sBAAsB,KAAK,CAAC,SAAS,KAAK,CAAC;IACtE,IAAG,KAAK,CAAC,QAAQ;QAAE,GAAG,IAAI,qBAAqB,KAAK,CAAC,QAAQ,KAAK,CAAC;IACnE,IAAG,KAAK,CAAC,eAAe,CAAC;QAAE,GAAG,IAAI,0BAA0B,KAAK,CAAC,eAAe,CAAC,KAAK,CAAC;IACxF,IAAG,KAAK,CAAC,UAAU;QAAE,GAAG,IAAI,uBAAuB,KAAK,CAAC,UAAU,KAAK,CAAC;IACzE,IAAG,KAAK,CAAC,MAAM;QAAE,GAAG,IAAI,mBAAmB,KAAK,CAAC,MAAM,KAAK,CAAC;IAC7D,IAAG,KAAK,CAAC,cAAc,CAAC;QAAE,GAAG,IAAI,yBAAyB,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IACrF,IAAG,KAAK,CAAC,KAAK;QAAE,GAAG,IAAI,kBAAkB,KAAK,CAAC,KAAK,KAAK,CAAC;IAC1D,IAAG,KAAK,CAAC,gBAAgB,CAAC;QAAE,GAAG,IAAI,2BAA2B,KAAK,CAAC,gBAAgB,CAAC,KAAK,CAAC;IAC3F,OAAO,GAAG,CAAC;AACZ,CAAC"}

package/dist/main.d.ts

@@ -0,0 +1 @@
+import './index.css';

package/dist/main.js

@@ -0,0 +1,8 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import './index.css';
+import Chatbot from "./Chatbot";
+import React from "react";
+createRoot(document.getElementById('chatbot_root')).render(React.createElement(StrictMode, null,
+    React.createElement(Chatbot, null)));
+//# sourceMappingURL=main.js.map

package/dist/main.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.js","sourceRoot":"","sources":["../src/main.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAC,MAAM,OAAO,CAAA;AAChC,OAAO,EAAC,UAAU,EAAC,MAAM,kBAAkB,CAAA;AAC3C,OAAO,aAAa,CAAA;AACpB,OAAO,OAAO,MAAM,WAAW,CAAC;AAChC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,CAAC,QAAQ,CAAC,cAAc,CAAC,cAAc,CAAE,CAAC,CAAC,MAAM,CAC1D,oBAAC,UAAU;IACV,oBAAC,OAAO,OAAE,CACE,CACb,CAAA"}

package/dist/types/TBot.d.ts

@@ -0,0 +1,18 @@
+import type { TQuestions } from "./TQuestions.ts";
+export interface TBot {
+    name: string;
+    questions: TQuestions;
+    theme?: Theme;
+}
+export interface Theme {
+    primary?: string;
+    "primary-dark"?: string;
+    onprimary?: string;
+    question?: string;
+    "question-text"?: string;
+    background?: string;
+    option?: string;
+    "option-hover"?: string;
+    input?: string;
+    "input-disabled"?: string;
+}

package/dist/types/TBot.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=TBot.js.map

package/dist/types/TBot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TBot.js","sourceRoot":"","sources":["../../src/types/TBot.ts"],"names":[],"mappings":""}

package/dist/types/TConfig.d.ts

@@ -0,0 +1,7 @@
+import type { TBot } from "./TBot.ts";
+export default interface TConfig {
+    bot: TBot;
+    onEnd?: (data: Record<string, any>) => void;
+    endMessage?: string;
+    endButtonText?: string;
+}

package/dist/types/TConfig.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=TConfig.js.map

package/dist/types/TConfig.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TConfig.js","sourceRoot":"","sources":["../../src/types/TConfig.ts"],"names":[],"mappings":""}

package/dist/types/TQuestions.d.ts

@@ -0,0 +1,21 @@
+export type TQuestions = Record<string, TQuestion>;
+export interface TQuestion {
+    question: string | string[];
+    action?: TAction;
+    answers?: TAnswer[];
+    goto?: string;
+    at?: string;
+}
+export interface TAnswer {
+    text: string;
+    next?: string;
+    action?: TAction;
+    at?: string;
+}
+interface TAction {
+    action: "set" | "ask" | "end";
+    property?: string;
+    value?: any;
+    goto?: string;
+}
+export {};

package/dist/types/TQuestions.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=TQuestions.js.map

package/dist/types/TQuestions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TQuestions.js","sourceRoot":"","sources":["../../src/types/TQuestions.ts"],"names":[],"mappings":""}

package/dist/utils.d.ts

@@ -0,0 +1,3 @@
+import type TConfig from "./types/TConfig.ts";
+export declare function currentTime(): string;
+export declare function initChatbot(config: TConfig): void;

package/dist/utils.js

@@ -0,0 +1,9 @@
+export function currentTime() {
+    const now = new Date();
+    return now.toLocaleTimeString("fr-FR", { hour: "2-digit", minute: "2-digit" });
+}
+export function initChatbot(config) {
+    const ev = new CustomEvent("chatbot-init", { detail: config });
+    document.dispatchEvent(ev);
+}
+//# sourceMappingURL=utils.js.map

package/dist/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,WAAW;IAC1B,MAAM,GAAG,GAAG,IAAI,IAAI,EAAE,CAAC;IACvB,OAAO,GAAG,CAAC,kBAAkB,CAAC,OAAO,EAAE,EAAC,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAC,CAAC,CAAC;AAC9E,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,MAAe;IAC1C,MAAM,EAAE,GAAG,IAAI,WAAW,CAAC,cAAc,EAAE,EAAC,MAAM,EAAE,MAAM,EAAC,CAAC,CAAC;IAC7D,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC;AAC5B,CAAC"}

package/index.css

@@ -0,0 +1,2 @@
+/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-font-weight:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-gray-800:oklch(27.8% .033 256.848);--color-stone-400:oklch(70.9% .01 56.259);--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--font-weight-bold:700;--radius-lg:.5rem;--radius-2xl:1rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-primary:#b24592;--color-primary-dark:#9a0c71;--color-onprimary:#fff;--color-question:#f5f3f2;--color-question-text:black;--color-background:#fff;--color-option:#33475b;--color-option-hover:var(--color-primary);--color-input:var(--color-gray-800);--color-input-disabled:var(--color-stone-400)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.absolute{position:absolute!important}.-top-\[720px\]{top:-720px!important}.-left-\[356px\]{left:-356px!important}.container{width:100%!important}@media (min-width:40rem){.container{max-width:40rem!important}}@media (min-width:48rem){.container{max-width:48rem!important}}@media (min-width:64rem){.container{max-width:64rem!important}}@media (min-width:80rem){.container{max-width:80rem!important}}@media (min-width:96rem){.container{max-width:96rem!important}}.flex{display:flex!important}.h-\[700px\]{height:700px!important}.h-auto{height:auto!important}.h-full{height:100%!important}.min-h-8{min-height:calc(var(--spacing)*8)!important}.w-\[416px\]{width:416px!important}.w-full{width:100%!important}.max-w-\[284px\]{max-width:284px!important}.grow{flex-grow:1!important}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)!important}.cursor-pointer{cursor:pointer!important}.flex-col{flex-direction:column!important}.flex-row{flex-direction:row!important}.flex-wrap{flex-wrap:wrap!important}.items-center{align-items:center!important}.items-end{align-items:flex-end!important}.items-start{align-items:flex-start!important}.justify-between{justify-content:space-between!important}.gap-2{gap:calc(var(--spacing)*2)!important}.self-end{align-self:flex-end!important}.self-start{align-self:flex-start!important}.overflow-hidden{overflow:hidden!important}.overflow-y-auto{overflow-y:auto!important}.scroll-smooth{scroll-behavior:smooth!important}.rounded-2xl{border-radius:var(--radius-2xl)!important}.rounded-full{border-radius:3.40282e38px!important}.rounded-lg{border-radius:var(--radius-lg)!important}.border{border-style:var(--tw-border-style)!important;border-width:1px!important}.border-input{border-color:var(--color-input)!important}.border-option{border-color:var(--color-option)!important}.bg-background{background-color:var(--color-background)!important}.bg-primary{background-color:var(--color-primary)!important}.bg-question{background-color:var(--color-question)!important}.bg-transparent{background-color:#0000!important}.p-4{padding:calc(var(--spacing)*4)!important}.px-4{padding-inline:calc(var(--spacing)*4)!important}.py-2{padding-block:calc(var(--spacing)*2)!important}.pt-4{padding-top:calc(var(--spacing)*4)!important}.pb-8{padding-bottom:calc(var(--spacing)*8)!important}.text-center{text-align:center!important}.text-end{text-align:end!important}.text-xl{font-size:var(--text-xl)!important;line-height:var(--tw-leading,var(--text-xl--line-height))!important}.text-xs{font-size:var(--text-xs)!important;line-height:var(--tw-leading,var(--text-xs--line-height))!important}.font-bold{--tw-font-weight:var(--font-weight-bold)!important;font-weight:var(--font-weight-bold)!important}.whitespace-pre-wrap{white-space:pre-wrap!important}.text-input{color:var(--color-input)!important}.text-onprimary{color:var(--color-onprimary)!important}.text-option{color:var(--color-option)!important}.text-primary{color:var(--color-primary)!important}.text-question-text{color:var(--color-question-text)!important}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events!important;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))!important;transition-duration:var(--tw-duration,var(--default-transition-duration))!important}@media (hover:hover){.hover\:border-option-hover:hover{border-color:var(--color-option-hover)!important}.hover\:text-option-hover:hover{color:var(--color-option-hover)!important}.hover\:text-primary-dark:hover{color:var(--color-primary-dark)!important}.hover\:underline:hover{text-decoration-line:underline!important}}.focus\:outline-none:focus{--tw-outline-style:none!important;outline-style:none!important}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed!important}.disabled\:text-input-disabled:disabled{color:var(--color-input-disabled)!important}}.chatbot{background-color:var(--color-primary);cursor:pointer;color:var(--color-onprimary);border-radius:100%;justify-content:center;align-items:center;display:flex;position:fixed;bottom:15px;right:15px;width:60px!important;height:60px!important}.chatbot-container{opacity:1;cursor:default;transition:all .3s ease-in-out;bottom:0!important}.button-icon{opacity:1;rotate:0;cursor:pointer;transition:all .3s ease-in-out;position:absolute}.not-visible{opacity:0}.button-icon.not-visible{rotate:45deg}.chatbot-container.not-visible{bottom:-100px}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "imacaron-chatbot",
+  "description": "A chatbot open-source library for scenarized chatbot",
+  "type": "module",
+  "main": "dist/index.js",
+  "files": [
+    "/dist",
+    "/index.css"
+  ],
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "dev": "vite",
+    "build": "rm -rf dist && tsc && tailwindcss -i src/index.css -o index.css --minify",
+    "prepublish": "npm run build"
+  },
+  "author": "Macaron",
+  "license": "ISC",
+  "dependencies": {
+    "@tailwindcss/cli": "^4.1.16",
+    "@tailwindcss/vite": "^4.1.16",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "tailwindcss": "^4.1.16"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.36.0",
+    "@types/node": "^24.6.0",
+    "@types/react": "^19.1.16",
+    "@types/react-dom": "^19.1.9",
+    "@vitejs/plugin-react": "^5.0.4",
+    "eslint": "^9.36.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.22",
+    "globals": "^16.4.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.45.0",
+    "vite": "^7.1.7"
+  },
+  "keywords": [
+    "chatbot",
+    "chat",
+    "bot",
+    "library",
+    "react",
+    "js",
+    "typescript",
+    "open-source",
+    "open",
+    "source"
+  ],
+  "version": "0.3.0"
+}