chatbot-editor 1.0.0

package/dist/UI.js

@@ -0,0 +1,116 @@
+import SideBar from "./Components/SideBar";
+import { useEffect, useState } from "react";
+import { useCurrentQuestion } from "./CurrentQuestionHook";
+import Button from "./Components/Button";
+import Input from "./Components/Input";
+import { clsx } from "clsx";
+import Select from "./Components/Select";
+import { BsPlus } from "react-icons/bs";
+import { LuSave } from "react-icons/lu";
+import { MdOutlineFileOpen } from "react-icons/md";
+import { BiDownload, BiUpload } from "react-icons/bi";
+import React from "react";
+export default function UI(props) {
+    const [question, setQuestion] = useCurrentQuestion();
+    const [id, setId] = useState("");
+    const [goto, setGoto] = useState();
+    const [text, setText] = useState([""]);
+    const [answers, setAnswers] = useState([]);
+    const [action, setAction] = useState(undefined);
+    useEffect(() => {
+        if (question) {
+            setId(question.id);
+            if (typeof question.text === "string") {
+                setText([question.text]);
+            }
+            else {
+                setText(question.text);
+            }
+            setGoto(question.goto);
+            setAnswers(question.answers ?? []);
+            setAction(question.action);
+        }
+    }, [question]);
+    return (React.createElement("div", { className: "fixed top-0 left-0 w-0 h-0 overflow-visible text-white z-10" },
+        React.createElement(SideBar, { display: question !== null, setDisplay: (value) => { if (typeof value === "function")
+                value = value(question !== null); if (!value)
+                setQuestion(null); }, onClose: () => setQuestion(null), onValidate: () => {
+                const t = text.length === 1 ? text[0] : text;
+                props.editQuestion(question?.id ?? "", { id: id, text: t, goto: goto, answers: answers, position: { x: 0, y: 0 }, action: action });
+                setQuestion(null);
+            } },
+            React.createElement("div", { className: "flex flex-col gap-2 h-full pb-8 overflow-y-auto overflow-x-hidden" },
+                React.createElement(Input, { type: "text", value: id, onChange: (e) => setId(e.target.value), label: "ID" }),
+                React.createElement("div", { className: "bg-stone-950 p-2 rounded-lg flex flex-col gap-1" },
+                    React.createElement("p", { className: "text-lg font-bold " }, "Text"),
+                    text.map((value, index) => React.createElement("div", { className: "flex gap-1", key: index },
+                        React.createElement(Input, { type: "text", value: value, onChange: (e) => setText(prev => prev.map((v, i) => i === index ? e.target.value : v)) }),
+                        React.createElement(Button, { onClick: () => setText(prev => prev.filter((_, i) => i !== index)) }, "-"))),
+                    React.createElement(Button, { onClick: () => setText(prev => [...prev, ""]) }, "+")),
+                React.createElement("div", { className: "bg-stone-950 p-2 rounded-lg flex flex-col gap-1" },
+                    React.createElement("p", { className: "text-lg font-bold" }, "Answers"),
+                    answers.map((value, index) => React.createElement("div", { className: "flex ga flex-col p-1", key: index },
+                        React.createElement("div", { className: "flex gap-1 items-end" },
+                            React.createElement(Input, { type: "text", value: value.text, onChange: (e) => setAnswers(prev => prev.map((v, i) => i === index ? { ...v, text: e.target.value } : v)), label: "Text" }),
+                            React.createElement(Input, { type: "text", value: value.next, onChange: (e) => setAnswers(prev => prev.map((v, i) => i === index ? { ...v, next: e.target.value } : v)), label: "Next" }),
+                            React.createElement(Button, { onClick: () => setAnswers(prev => prev.filter((_, i) => i !== index)) }, "-")),
+                        React.createElement("div", { className: "flex flex-col gap-1" },
+                            React.createElement("p", null, "Action"),
+                            React.createElement(Select, { options: [{ value: "none", label: "None" }, { value: "set", label: "Set" }], value: value.action?.action ?? "none", onChange: (v) => v === "none" ?
+                                    setAnswers(prev => prev.map((v, i) => i === index ? { ...v, action: undefined } : v)) :
+                                    setAnswers(prev => prev.map((v, i) => i === index ? { ...v, action: { action: "set" } } : v)) }),
+                            React.createElement(Input, { className: clsx(value.action === undefined && "hidden"), label: "Property", value: value.action?.property ?? "", onChange: e => setAnswers(prev => prev.map((v, i) => i === index ? { ...v, action: { action: value.action.action, property: e.target.value, value: value.action?.value } } : v)) }),
+                            React.createElement(Input, { className: clsx(value.action === undefined && "hidden"), label: "Value", value: value.action?.value ?? "", onChange: e => setAnswers(prev => prev.map((v, i) => i === index ? { ...v, action: { action: value.action.action, value: e.target.value, property: value.action?.property } } : v)) })))),
+                    React.createElement(Button, { disabled: goto !== undefined, onClick: () => setAnswers(prev => [...prev, { text: "", next: "" }]) }, "+")),
+                React.createElement("div", { className: "bg-stone-950 p-2 rounded-lg flex flex-col gap-1" },
+                    React.createElement("p", { className: "text-lg font-bold" }, "Action"),
+                    React.createElement(Select, { options: [{ value: "ask", label: "Ask" }, { value: "set", label: "Set" }, { value: "end", label: "End" }, { value: "none", label: "None" }], value: action?.action ?? "none", onChange: (v) => {
+                            switch (v) {
+                                case "ask":
+                                    setAction(prev => ({ action: "ask", property: prev?.property, value: undefined }));
+                                    break;
+                                case "end":
+                                    setAction({ action: "end", property: undefined, value: undefined });
+                                    break;
+                                case "set":
+                                    setAction(prev => ({ action: "set", property: prev?.property, value: prev?.value }));
+                                    break;
+                                case "none":
+                                    setAction(undefined);
+                                    break;
+                            }
+                        } }),
+                    React.createElement(Input, { className: clsx((action === undefined || action.action === "end") && "hidden"), type: "text", label: "Property", value: action?.property ?? "", onChange: (e) => setAction(prev => prev ? ({ ...prev, property: e.target.value === "" ? undefined : e.target.value }) : undefined) }),
+                    React.createElement(Input, { className: clsx((action === undefined || action.action !== "set") && "hidden"), type: "text", label: "Value", value: action?.value ?? "", onChange: (e) => setAction(prev => prev ? ({ ...prev, value: e.target.value === "" ? undefined : e.target.value }) : undefined) }),
+                    React.createElement(Input, { className: clsx((action === undefined || action.action !== "ask") && "hidden"), type: "text", label: "Goto", value: action?.goto ?? "", onChange: (e) => setAction(prev => prev ? ({ ...prev, goto: e.target.value === "" ? undefined : e.target.value }) : undefined) })),
+                React.createElement(Input, { disabled: answers.length !== 0, type: "text", label: "Goto", value: goto ?? "", onChange: (e) => setGoto(e.target.value === "" ? undefined : e.target.value) }),
+                React.createElement("div", { className: "grow" }),
+                React.createElement(Button, { onClick: () => {
+                        props.deleteQuestion(question?.id ?? "");
+                        setQuestion(null);
+                    } }, "Delete"))),
+        React.createElement("div", { className: "p-2 fixed right-8 top-0 flex gap-2" },
+            React.createElement(Button, { onClick: () => props.addQuestion({ x: 20, y: 20 }) },
+                React.createElement(BsPlus, { className: "w-6 h-6" })),
+            props.save && React.createElement(Button, { onClick: () => props.save && props.save(props.questions) },
+                React.createElement(LuSave, { className: "w-6 h-6" })),
+            props.load && React.createElement(Button, { onClick: async () => {
+                    if (props.load) {
+                        const questions = await props.load();
+                        props.setQuestions(questions);
+                        props.setReloadArrow(prev => !prev);
+                    }
+                } },
+                React.createElement(MdOutlineFileOpen, { className: "w-6 h-6" })),
+            props.export && React.createElement(Button, { onClick: () => props.export && props.export(props.questions) },
+                React.createElement(BiDownload, { className: "w-6 h-6" })),
+            props.import && React.createElement(Button, { onClick: async () => {
+                    if (props.import) {
+                        const questions = await props.import();
+                        props.setQuestions(questions);
+                        props.setReloadArrow(prev => !prev);
+                    }
+                } },
+                React.createElement(BiUpload, { className: "w-6 h-6" })))));
+}
+//# sourceMappingURL=UI.js.map

package/dist/UI.js.map

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

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+import App from "./App";
+import type TQuestion from "./TQuestion.ts";
+export { App, type TQuestion };

package/dist/index.js

@@ -0,0 +1,3 @@
+import App from "./App";
+export { App };
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,GAAG,MAAM,OAAO,CAAC;AAGxB,OAAO,EACN,GAAG,EAEH,CAAA"}

package/dist/main.d.ts

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

package/dist/main.js

@@ -0,0 +1,108 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import './index.css';
+import App from "./App";
+import React from "react";
+const save = (questions) => {
+    const save = questions.map(q => {
+        const pos = document.getElementById(q.id).getBoundingClientRect();
+        q.position.x = pos.x;
+        q.position.y = pos.y;
+        return q;
+    });
+    const file = URL.createObjectURL(new Blob([JSON.stringify(save)], { type: "application/json" }));
+    const a = document.createElement("a");
+    a.href = file;
+    a.download = "questions.json";
+    a.click();
+    URL.revokeObjectURL(file);
+};
+const download = (questions) => {
+    const result = {};
+    questions.forEach(q => result[q.id] = {
+        question: q.text,
+        goto: q.goto,
+        action: q.action,
+        answers: q.answers
+    });
+    const file = URL.createObjectURL(new Blob([JSON.stringify(result)], { type: "application/json" }));
+    const a = document.createElement("a");
+    a.href = file;
+    a.download = "questions.json";
+    a.click();
+    URL.revokeObjectURL(file);
+};
+const load = async () => {
+    const fileLoader = document.createElement("input");
+    fileLoader.type = "file";
+    fileLoader.accept = ".json";
+    const p = new Promise((resolve, reject) => {
+        fileLoader.addEventListener("change", () => {
+            if (fileLoader.files?.length === 1) {
+                fileLoader.files[0].text().then(v => {
+                    const questions = JSON.parse(v);
+                    if (typeof questions === "object" && questions instanceof Array) {
+                        const validate = questions.filter(q => {
+                            return typeof q["id"] === "string" && typeof q["text"] === "string" && typeof q["position"] === "object" && typeof q["position"]["x"] === "number" && typeof q["position"]["y"] === "number";
+                        });
+                        if (validate.length !== questions.length) {
+                            console.error("Invalid file format");
+                            return;
+                        }
+                        resolve(questions);
+                    }
+                    else {
+                        reject("Invalid file format");
+                    }
+                }).catch(reject);
+            }
+            else {
+                reject("You must select only one file");
+            }
+        });
+    });
+    fileLoader.click();
+    return p;
+};
+const importFile = async () => {
+    const fileLoader = document.createElement("input");
+    fileLoader.type = "file";
+    fileLoader.accept = ".json";
+    const p = new Promise((resolve, reject) => {
+        fileLoader.addEventListener("change", () => {
+            if (fileLoader.files?.length === 1) {
+                fileLoader.files[0].text().then(v => {
+                    const questions = JSON.parse(v);
+                    if (typeof questions === "object") {
+                        const validate = Object.values(questions).filter(q => {
+                            return typeof q["question"] === "string" || (typeof q["question"] === "object" && q["question"] instanceof Array);
+                        });
+                        if (validate.length !== Object.values(questions).length) {
+                            reject("Invalid file format");
+                            return;
+                        }
+                        const tmp = Object.keys(questions).map((id, index) => {
+                            return {
+                                id: id,
+                                text: questions[id]["question"],
+                                goto: questions[id]["goto"] ?? undefined,
+                                answers: questions[id]["answers"] ?? [],
+                                position: { x: index % 5 * 260 + 20, y: Math.floor(index / 5) * 300 + 20 },
+                                action: questions[id]["action"] ?? undefined
+                            };
+                        });
+                        resolve(tmp);
+                    }
+                    else {
+                        reject("Invalid file format");
+                    }
+                }).catch(reject);
+            }
+        });
+    });
+    fileLoader.click();
+    return p;
+};
+createRoot(document.getElementById('root')).render(React.createElement(StrictMode, null,
+    React.createElement(App, { save: save, load: load, export: download, import: importFile })));
+//# sourceMappingURL=main.js.map

package/dist/main.js.map

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

package/dist/utils.d.ts

@@ -0,0 +1,2 @@
+import * as React from "react";
+export type SetState<T> = React.Dispatch<React.SetStateAction<T>>;

package/dist/utils.js

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

package/dist/utils.js.map

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

package/eslint.config.js

@@ -0,0 +1,26 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks, {rules} from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    rules: {
+      "react-hooks/set-state-in-effect": "off"
+    },
+  }
+]);

package/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>chatbot-editor</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "chatbot-editor",
+  "description": "A chat bot editor made with React and TailwindCSS",
+  "repository": "MacaronFR/chatbot-editor",
+  "type": "module",
+  "main": "dist/index.js",
+  "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.17",
+    "@tailwindcss/vite": "^4.1.17",
+    "clsx": "^2.1.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-icons": "^5.5.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vite": "^7.2.4"
+  },
+  "version": "1.0.0"
+}

package/src/App.tsx

@@ -0,0 +1,43 @@
+import UI from "./UI";
+import Canva from "./Canva";
+import {useState} from "react";
+import type TQuestion from "./TQuestion.ts";
+import {CurrentQuestionProvider} from "./CurrentQuestionHook";
+import React from "react";
+
+interface AppProps {
+	save?: (questions: TQuestion[]) => void;
+	load?: () => Promise<TQuestion[]>;
+	export?: (questions: TQuestion[]) => void;
+	import?: () => Promise<TQuestion[]>;
+}
+
+export default function App(props: AppProps) {
+	const [questions, setQuestions] = useState<TQuestion[]>([]);
+	const [reloadArrow, setReloadArrow] = useState(false);
+	return (
+		<CurrentQuestionProvider>
+			<div className={"relative h-screen w-screen overflow-hidden"}>
+				<Canva questions={questions} setQuestions={setQuestions} reloadArrow={reloadArrow} setReloadArrow={setReloadArrow}/>
+				<UI setReloadArrow={setReloadArrow} questions={questions} addQuestion={(initPos: {x: number, y: number}) => {
+					let idQuestion = "question";
+					let i = 0;
+					while(questions.find(v => v.id === idQuestion)) {
+						i++;
+						idQuestion = `question${i}`;
+					}
+					setQuestions(prev => [...prev, {id: idQuestion, text: "Text", position: initPos}]);
+				}} editQuestion={(id, data) =>
+					setQuestions(prev => prev.map(v => v.id === id ? data : v))
+				}
+					deleteQuestion={id => setQuestions(prev => prev.filter(v => v.id !== id))}
+					setQuestions={setQuestions}
+					save={props.save}
+					load={props.load}
+					export={props.export}
+					import={props.import}
+				/>
+			</div>
+		</CurrentQuestionProvider>
+	)
+}

package/src/Canva.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import Question from "./Components/Question";
+import type TQuestion from "./TQuestion.ts";
+import type {SetState} from "./utils.ts";
+import {useEffect} from "react";
+
+interface CanvaProps {
+	questions: TQuestion[];
+	setQuestions: SetState<TQuestion[]>;
+	reloadArrow: boolean;
+	setReloadArrow: SetState<boolean>;
+}
+
+export default function Canva(props: CanvaProps) {
+	useEffect(() => {
+		props.setReloadArrow(prev => !prev);
+	}, [props.questions, props.setReloadArrow]);
+	return (
+		<div className={"min-w-full min-h-full bg-neutral-950 workspace overflow-auto"}>
+			{props.questions.map((v, i) => <Question {...v} key={i} reloadArrow={props.reloadArrow} setReloadArrow={props.setReloadArrow}/>)}
+		</div>
+	)
+}

package/src/Components/Answers.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import Arrow from "./Arrow";
+import {useEffect, useMemo, useRef, useState} from "react";
+import {CiWarning} from "react-icons/ci";
+
+interface AnswersProps {
+	text: string;
+	next: string;
+	reloadArrows: boolean;
+}
+
+export default function Answers(props: AnswersProps) {
+	const container = useRef<HTMLDivElement>(null);
+	const [pos, setPos] = useState({x: 0, y: 0});
+	useEffect(() => {
+		setPos(container.current!.getBoundingClientRect());
+	}, [props.reloadArrows]);
+	const destPos = useMemo(() => {
+		return document.getElementById(props.next)?.getBoundingClientRect();
+	}, [props.next, props.reloadArrows]);
+	return (
+		<div className={"rounded bg-stone-700 w-16 px-2 py-1 text-nowrap text-ellipsis relative"} ref={container}>
+			<p className={"text-ellipsis text-nowrap overflow-hidden max-w-full"} title={props.text}>{props.text}</p>
+			{destPos && <Arrow from={{x: 64, y: 16}} to={{x: destPos.x - pos.x - 1, y: destPos.y - pos.y + 20}}/> || <CiWarning className={"text-orange-500 absolute -right-5 top-2"}/>}
+		</div>
+	)
+}

package/src/Components/Arrow.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import {useMemo, useRef} from "react";
+
+interface ArrowProps {
+	from: {x: number, y: number},
+	to: {x: number, y: number}
+}
+
+export default function Arrow(props: ArrowProps) {
+	const ref = useRef<SVGSVGElement>(null);
+	const [width, height] = useMemo(() => [
+		Math.abs(props.from.x - props.to.x) + (props.from.x + 20 <= props.to.x - 20 ? 0 : 40),
+		Math.abs(props.from.y - props.to.y)
+	], [props.from, props.to]);
+	const [start] = useMemo(() => [
+		{x: props.from.x + 20 < props.to.x - 20 ? 0 : -20, y: 0}
+	], [props.from, props.to]);
+	const [left, top] = useMemo(() =>
+		[
+			props.from.x + 20 <= props.to.x - 20 ? props.from.x : props.to.x - 20,
+			props.from.y < props.to.y ? props.from.y : props.to.y
+		],
+		[props.from, props.to]
+	);
+	const [from, to] = useMemo(() => [
+		{x: props.from.x + 20 < props.to.x - 20 ? 0 : (props.from.x < props.to.x ? (props.from.x === props.to.x ? 0 : -20) : width - 40), y: props.from.y < props.to.y ? 0 : height},
+		{x: props.from.x + 20 < props.to.x - 20 ? width : (props.from.x + 20 === props.to.x - 20 ? 20 : 0), y: props.from.y < props.to.y ? height : 0},
+	], [props.from, props.to, width, height]);
+	const path = useMemo(() => {
+		let p = `M${from.x} ${from.y}  L${from.x + 16} ${from.y}`;
+		if(from.x + 20 < to.x - 20) {
+			if(from.y < to.y) {
+				p += ` L${(to.x - from.x) / 2 - 4} ${from.y} Q${(to.x - from.x) / 2 - 4} ${from.y} ${(to.x - from.x) / 2} ${from.y + 4} L${(to.x - from.x) / 2} ${to.y - 4} Q${(to.x - from.x) / 2} ${to.y - 4} ${(to.x - from.x) / 2 + 4} ${to.y}`;
+			} else if(from.y > to.y) {
+				p += ` L${(to.x - from.x) / 2 - 4} ${from.y} Q${(to.x - from.x) / 2 - 4} ${from.y} ${(to.x - from.x) / 2} ${from.y - 4} L${(to.x - from.x) / 2} ${to.y + 4} Q${(to.x - from.x) / 2} ${to.y + 4} ${(to.x - from.x) / 2 + 4} ${to.y}`;
+			}
+		} else if(from.x + 20 > to.x - 20) {
+			if(from.y < to.y) {
+				p += ` Q${from.x + 16} ${from.y} ${from.x + 20} ${from.y + 4} L${from.x + 20} ${to.y - 44} Q${from.x + 20} ${to.y - 44} ${from.x + 16} ${to.y - 40} L${to.x-16} ${to.y - 40} Q${to.x-16} ${to.y - 40} ${to.x-20} ${to.y - 36}`;
+				p += ` L${to.x - 20} ${to.y - 4} Q${to.x - 20} ${to.y - 4} ${to.x - 16} ${to.y}`;
+			} else if(from.y > to.y) {
+				p += ` Q${from.x + 16} ${from.y} ${from.x + 20} ${from.y - 4} L${from.x + 20} ${from.y - 36} Q${from.x + 20} ${from.y - 36} ${from.x + 16} ${from.y -40} L${to.x-16} ${from.y - 40} Q${to.x-16} ${from.y - 40} ${to.x-20} ${from.y - 44}`;
+				p += ` L${to.x - 20} ${to.y + 4} Q${to.x - 20} ${to.y + 4} ${to.x - 16} ${to.y}`;
+			}
+		} else {
+			if(from.y < to.y) {
+				p += ` Q${from.x + 16} ${from.y} ${from.x + 20} ${from.y + 4} L${from.x + 20} ${to.y - 4} Q${from.x + 20} ${to.y - 4} ${from.x + 24} ${to.y}`;
+			} else if(from.y > to.y) {
+				p += ` Q${from.x + 16} ${from.y} ${from.x + 20} ${from.y - 4} L${from.x + 20} ${to.y + 4} Q${from.x + 20} ${to.y + 4} ${from.x + 24} ${to.y}`;
+			}
+		}
+		p += ` L${to.x} ${to.y}`
+		return p;
+	}, [from, to]);
+	return (
+		<svg ref={ref} viewBox={`${start.x} ${start.y} ${width} ${height}`} width={width} height={height} className={"absolute -z-20 stroke-stone-600 pointer-events-none"} style={{left: left, top: top}}>
+			<path d={path} fill={"none"} strokeWidth={"2"}/>
+		</svg>
+	)
+}

package/src/Components/Bubble.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+interface BubbleProps {
+	text: string;
+}
+
+export default function Bubble(props: BubbleProps) {
+	return (
+		<div className={"text-orange-100 py-2 px-4 rounded bg-stone-800"}>
+			{props.text}
+		</div>
+	)
+}

package/src/Components/Button.tsx

@@ -0,0 +1,14 @@
+import  {type ReactNode} from "react";
+import React from "react";
+
+interface ButtonProps {
+	children: ReactNode;
+	disabled?: boolean;
+	onClick?: (e: React.MouseEvent) => void;
+}
+
+export default function Button(props: ButtonProps) {
+	return (
+		<button className={"bg-stone-800 rounded-lg py-1 px-2 text-lg cursor-pointer transition hover:scale-105 disabled:hover:scale-100 disabled:cursor-default disabled:text-stone-400 disabled:bg-neutral-800"} onClick={props.onClick} disabled={props.disabled}>{props.children}</button>
+	)
+}

package/src/Components/Input.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+import {useMemo} from "react";
+import {clsx} from "clsx";
+
+interface InputProps {
+	value: string;
+	onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+	type?: React.HTMLInputTypeAttribute;
+	label?: React.ReactNode;
+	disabled?: boolean;
+	id?: string;
+	className?: string;
+}
+
+export default function Input(props: InputProps) {
+	const id = useMemo(() => {
+		return props.id ?? (Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15));
+	}, [props.id]);
+	return (
+		<div className={clsx("flex flex-col", props.className)}>
+			{props.label && <label className={clsx("px-2 pt-1 rounded-t-lg pb-2 -mb-2", props.disabled === true && "text-stone-500 bg-neutral-950" || "bg-stone-950")} htmlFor={id}>{props.label}</label>}
+			<input type={props.type} value={props.value} onChange={props.onChange} id={id} className={"bg-stone-800 rounded-lg py-1 px-2 text-lg disabled:bg-neutral-900"} disabled={props.disabled}/>
+		</div>
+	)
+}