@shane_donnelly/dsi-internal-react-utils 0.2.1 → 1.0.0

package/README.md

@@ -30,6 +30,25 @@ Wrapper de simplification pour `keycloak-js`. `KeycloakProvider` singleton à la
 
 [Documentation complète du module Keycloak](docs/keycloak.md)
 
+### Chatbot UI
+
+Ensemble de composants React pour créer des interfaces de type chatbot modernes (style ChatGPT / Claude / Gemini). Entièrement indépendant de la logique métier — gère uniquement l'affichage.
+
+Composants disponibles :
+
+| Composant | Description |
+|-----------|-------------|
+| `MarkdownRenderer` | Rendu markdown avec bouton copier sur les blocs de code |
+| `UserMessage` | Bulle de message utilisateur avec slots typés optionnels |
+| `BotMessage` | Message bot full-width, extensible via registry |
+| `SessionHistory` | Affichage d'une conversation complète |
+| `InputBar` | Barre d'input avec bouton "+", bouton d'action configurable et slots |
+| `SessionContainer` | Composant tout-en-un : SessionHistory + InputBar |
+
+Système de thème global via `setTheme("light" | "dark" | ColorPalette)`.
+
+[Documentation complète du module Chatbot](docs/chatbot.md)
+
 ---
 
 ## Exemple complet avec React Router v7 (framework mode)

package/dist/BotMessage-DegH8sM-.js

@@ -0,0 +1,255 @@
+import { t as e } from "./MarkdownRenderer-vU2aoyaG.js";
+import { useTheme as t } from "./chatbot/theme/useTheme.js";
+import { t as n } from "./iconBase-CDbPVA4E.js";
+import { n as r, t as i } from "./bs-CmZftXMO.js";
+import { useEffect as a, useState as o } from "react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region node_modules/react-icons/tb/index.mjs
+function u(e) {
+	return n({
+		tag: "svg",
+		attr: {
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		},
+		child: [
+			{
+				tag: "path",
+				attr: { d: "M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" },
+				child: []
+			},
+			{
+				tag: "path",
+				attr: { d: "M3.6 9h16.8" },
+				child: []
+			},
+			{
+				tag: "path",
+				attr: { d: "M3.6 15h16.8" },
+				child: []
+			},
+			{
+				tag: "path",
+				attr: { d: "M11.5 3a17 17 0 0 0 0 18" },
+				child: []
+			},
+			{
+				tag: "path",
+				attr: { d: "M12.5 3a17 17 0 0 1 0 18" },
+				child: []
+			}
+		]
+	})(e);
+}
+function d(e) {
+	return n({
+		tag: "svg",
+		attr: {
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		},
+		child: [{
+			tag: "path",
+			attr: { d: "M6 9l6 6l6 -6" },
+			child: []
+		}]
+	})(e);
+}
+//#endregion
+//#region lib/chatbot/BotMessage/styles.module.css
+var f = {
+	"dsi-bot-msg": "_dsi-bot-msg_9iqvz_2",
+	"dsi-bot-loading-dot": "_dsi-bot-loading-dot_9iqvz_15",
+	"dsi-bot-pulse": "_dsi-bot-pulse_9iqvz_1",
+	"dsi-bot-msg-footer": "_dsi-bot-msg-footer_9iqvz_28",
+	"dsi-bot-copy-btn": "_dsi-bot-copy-btn_9iqvz_39",
+	"dsi-bot-msg-time": "_dsi-bot-msg-time_9iqvz_62",
+	"dsi-bot-reasoning": "_dsi-bot-reasoning_9iqvz_75",
+	"dsi-bot-tool": "_dsi-bot-tool_9iqvz_76",
+	"dsi-bot-search": "_dsi-bot-search_9iqvz_77",
+	"dsi-bot-collapsible-header": "_dsi-bot-collapsible-header_9iqvz_84",
+	"dsi-bot-collapsible-header-inner": "_dsi-bot-collapsible-header-inner_9iqvz_99",
+	"dsi-bot-element-title": "_dsi-bot-element-title_9iqvz_108",
+	"dsi-bot-collapse-chevron": "_dsi-bot-collapse-chevron_9iqvz_115",
+	"dsi-bot-collapsible-body": "_dsi-bot-collapsible-body_9iqvz_126",
+	"dsi-bot-collapsible-content": "_dsi-bot-collapsible-content_9iqvz_132",
+	"dsi-bot-search-icon": "_dsi-bot-search-icon_9iqvz_140",
+	"dsi-bot-spinner": "_dsi-bot-spinner_9iqvz_146",
+	"dsi-spin": "_dsi-spin_9iqvz_1"
+};
+//#endregion
+//#region lib/chatbot/BotMessage/index.tsx
+function p({ markdownText: t }) {
+	return t ? /* @__PURE__ */ c(e, { text: t }) : null;
+}
+function m() {
+	return /* @__PURE__ */ c("svg", {
+		className: f["dsi-bot-loading-dot"],
+		width: "10",
+		height: "10",
+		viewBox: "0 0 10 10",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ c("circle", {
+			cx: "5",
+			cy: "5",
+			r: "4",
+			fill: "currentColor"
+		})
+	});
+}
+function h({ text: e }) {
+	let [t, n] = o(!1);
+	return /* @__PURE__ */ c("button", {
+		className: f["dsi-bot-copy-btn"],
+		onClick: () => {
+			navigator.clipboard.writeText(e).then(() => {
+				n(!0), setTimeout(() => n(!1), 2e3);
+			});
+		},
+		"aria-label": "Copier le message",
+		type: "button",
+		children: c(t ? i : r, {})
+	});
+}
+function g({ defaultOpen: e, closeWhen: t = !1, header: n, content: r, className: i, style: s }) {
+	let [u, p] = o(e);
+	return a(() => {
+		t && p(!1);
+	}, [t]), /* @__PURE__ */ l("div", {
+		className: i,
+		style: s,
+		children: [/* @__PURE__ */ l("div", {
+			className: f["dsi-bot-collapsible-header"],
+			onClick: () => p((e) => !e),
+			role: "button",
+			tabIndex: 0,
+			onKeyDown: (e) => {
+				(e.key === "Enter" || e.key === " ") && p((e) => !e);
+			},
+			"aria-expanded": u,
+			children: [/* @__PURE__ */ c("div", {
+				className: f["dsi-bot-collapsible-header-inner"],
+				children: n
+			}), /* @__PURE__ */ c(d, {
+				className: f["dsi-bot-collapse-chevron"],
+				style: { transform: u ? "rotate(0deg)" : "rotate(-90deg)" },
+				"aria-hidden": "true"
+			})]
+		}), u && r && /* @__PURE__ */ c("div", {
+			className: f["dsi-bot-collapsible-body"],
+			children: r
+		})]
+	});
+}
+function _({ title: e, content: n, isLoading: r = !1, _isLastElement: i = !1 }) {
+	let a = t();
+	return /* @__PURE__ */ c(g, {
+		defaultOpen: r || i,
+		closeWhen: !r && !i,
+		className: f["dsi-bot-reasoning"],
+		style: {
+			"--dsi-reasoning-border": a.reasoningBorder,
+			"--dsi-reasoning-text": a.reasoningText
+		},
+		header: /* @__PURE__ */ c("span", {
+			className: f["dsi-bot-element-title"],
+			children: e || "Raisonnement"
+		}),
+		content: n ? /* @__PURE__ */ c("p", {
+			className: f["dsi-bot-collapsible-content"],
+			children: n
+		}) : null
+	});
+}
+function v({ title: e, content: n, isLoading: r = !1, _isLastElement: i = !1 }) {
+	let a = t();
+	return /* @__PURE__ */ c(g, {
+		defaultOpen: r || i,
+		closeWhen: !r && !i,
+		className: f["dsi-bot-tool"],
+		style: {
+			"--dsi-tool-border": a.toolBorder,
+			"--dsi-text-secondary": a.textSecondary,
+			"--dsi-text-primary": a.textPrimary
+		},
+		header: /* @__PURE__ */ l(s, { children: [r && /* @__PURE__ */ c("span", { className: f["dsi-bot-spinner"] }), /* @__PURE__ */ c("span", {
+			className: f["dsi-bot-element-title"],
+			children: e || "Outil"
+		})] }),
+		content: n ? /* @__PURE__ */ c("p", {
+			className: f["dsi-bot-collapsible-content"],
+			children: n
+		}) : null
+	});
+}
+function y({ title: e, content: n, isLoading: r = !1, _isLastElement: i = !1 }) {
+	let a = t();
+	return /* @__PURE__ */ c(g, {
+		defaultOpen: r || i,
+		closeWhen: !r && !i,
+		className: f["dsi-bot-search"],
+		style: {
+			"--dsi-tool-border": a.toolBorder,
+			"--dsi-text-secondary": a.textSecondary,
+			"--dsi-text-primary": a.textPrimary
+		},
+		header: /* @__PURE__ */ l(s, { children: [
+			/* @__PURE__ */ c(u, { className: f["dsi-bot-search-icon"] }),
+			r && /* @__PURE__ */ c("span", { className: f["dsi-bot-spinner"] }),
+			/* @__PURE__ */ c("span", {
+				className: f["dsi-bot-element-title"],
+				children: e || "Recherche"
+			})
+		] }),
+		content: n ? /* @__PURE__ */ c("p", {
+			className: f["dsi-bot-collapsible-content"],
+			children: n
+		}) : null
+	});
+}
+var b = {
+	text: p,
+	reasoning: _,
+	tool: v,
+	search: y
+};
+function x({ message: e, registry: n = b }) {
+	let r = t(), i = [...e.elements].sort((e, t) => e.index - t.index), a = [...i].reverse().find((e) => e.type === "text")?.markdownText ?? "";
+	return /* @__PURE__ */ l("div", {
+		className: f["dsi-bot-msg"],
+		style: {
+			"--dsi-text-primary": r.textPrimary,
+			"--dsi-text-secondary": r.textSecondary,
+			"--dsi-border": r.border
+		},
+		children: [
+			e.isLoading && /* @__PURE__ */ c(m, {}),
+			i.map((e, t) => {
+				let r = n[e.type];
+				if (!r) return null;
+				let a = t === i.length - 1;
+				return /* @__PURE__ */ c(r, {
+					...e,
+					_isLastElement: a
+				}, `${e.type}-${e.index}-${t}`);
+			}),
+			/* @__PURE__ */ l("div", {
+				className: f["dsi-bot-msg-footer"],
+				children: [!e.isLoading && /* @__PURE__ */ c(h, { text: a }), !e.isLoading && e.timeOrDateToDisplay && /* @__PURE__ */ c("span", {
+					className: f["dsi-bot-msg-time"],
+					children: e.timeOrDateToDisplay
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { b as n, x as t };

package/dist/InputBar-CxSc2du6.js

@@ -0,0 +1,201 @@
+import { useTheme as e } from "./chatbot/theme/useTheme.js";
+import { t } from "./iconBase-CDbPVA4E.js";
+import { useEffect as n, useRef as r, useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region node_modules/react-icons/fi/index.mjs
+function s(e) {
+	return t({
+		tag: "svg",
+		attr: {
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		},
+		child: [{
+			tag: "line",
+			attr: {
+				x1: "22",
+				y1: "2",
+				x2: "11",
+				y2: "13"
+			},
+			child: []
+		}, {
+			tag: "polygon",
+			attr: { points: "22 2 15 22 11 13 2 9 22 2" },
+			child: []
+		}]
+	})(e);
+}
+function c(e) {
+	return t({
+		tag: "svg",
+		attr: {
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		},
+		child: [{
+			tag: "line",
+			attr: {
+				x1: "12",
+				y1: "5",
+				x2: "12",
+				y2: "19"
+			},
+			child: []
+		}, {
+			tag: "line",
+			attr: {
+				x1: "5",
+				y1: "12",
+				x2: "19",
+				y2: "12"
+			},
+			child: []
+		}]
+	})(e);
+}
+//#endregion
+//#region node_modules/react-icons/fa/index.mjs
+function l(e) {
+	return t({
+		tag: "svg",
+		attr: { viewBox: "0 0 448 512" },
+		child: [{
+			tag: "path",
+			attr: { d: "M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48z" },
+			child: []
+		}]
+	})(e);
+}
+//#endregion
+//#region node_modules/react-icons/ri/index.mjs
+function u(e) {
+	return t({
+		tag: "svg",
+		attr: {
+			viewBox: "0 0 24 24",
+			fill: "currentColor"
+		},
+		child: [{
+			tag: "path",
+			attr: { d: "M5 7H7V17H5V7ZM1 10H3V14H1V10ZM9 2H11V20H9V2ZM13 4H15V22H13V4ZM17 7H19V17H17V7ZM21 10H23V14H21V10Z" },
+			child: []
+		}]
+	})(e);
+}
+//#endregion
+//#region lib/chatbot/InputBar/styles.module.css
+var d = {
+	"dsi-inputbar": "_dsi-inputbar_1ngbl_2",
+	"dsi-inputbar-upper-slot": "_dsi-inputbar-upper-slot_1ngbl_12",
+	"dsi-inputbar-plus-slot": "_dsi-inputbar-plus-slot_1ngbl_23",
+	"dsi-inputbar-row": "_dsi-inputbar-row_1ngbl_38",
+	"dsi-inputbar-row--with-upper": "_dsi-inputbar-row--with-upper_1ngbl_55",
+	"dsi-inputbar-textarea": "_dsi-inputbar-textarea_1ngbl_60",
+	"dsi-inputbar-plus-btn": "_dsi-inputbar-plus-btn_1ngbl_81",
+	"dsi-inputbar-plus-btn--open": "_dsi-inputbar-plus-btn--open_1ngbl_100",
+	"dsi-inputbar-action-btn": "_dsi-inputbar-action-btn_1ngbl_105"
+};
+//#endregion
+//#region lib/chatbot/InputBar/index.tsx
+function f({ type: e }) {
+	switch (e) {
+		case "send": return /* @__PURE__ */ a(s, {});
+		case "stop": return /* @__PURE__ */ a(l, {});
+		case "vocal": return /* @__PURE__ */ a(u, {});
+		default: return null;
+	}
+}
+function p({ value: t, onChange: s, placeholder: l = "Envoyer un message…", actionButtonType: u = "send", actionButtonEnabled: p = !0, onActionButtonClick: m, plusSlot: h, upperSlot: g, messageHistory: _ }) {
+	let v = e(), [y, b] = i(!1), x = r(null), S = r(null), C = r(null), w = r(-1);
+	n(() => {
+		let e = x.current;
+		e && (e.style.height = "auto", e.style.height = `${e.scrollHeight}px`);
+	}, [t]), n(() => {
+		if (!y) return;
+		let e = (e) => {
+			!S.current?.contains(e.target) && !C.current?.contains(e.target) && b(!1);
+		};
+		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+	}, [y]);
+	let T = {
+		"--dsi-border": v.border,
+		"--dsi-input-bg": v.inputBg,
+		"--dsi-accent": v.accent,
+		"--dsi-text-primary": v.textPrimary,
+		"--dsi-text-secondary": v.textSecondary,
+		"--dsi-button-bg": v.buttonBg,
+		"--dsi-button-hover-bg": v.buttonHoverBg,
+		"--dsi-action-btn-bg": v.actionButtonBg,
+		"--dsi-action-btn-hover-bg": v.actionButtonHoverBg,
+		"--dsi-action-btn-icon": v.actionButtonIcon
+	};
+	return /* @__PURE__ */ o("div", {
+		className: d["dsi-inputbar"],
+		style: T,
+		children: [
+			y && h && /* @__PURE__ */ a("div", {
+				className: d["dsi-inputbar-plus-slot"],
+				ref: S,
+				children: h
+			}),
+			g && /* @__PURE__ */ a("div", {
+				className: d["dsi-inputbar-upper-slot"],
+				children: g
+			}),
+			/* @__PURE__ */ o("div", {
+				className: `${d["dsi-inputbar-row"]} ${g ? d["dsi-inputbar-row--with-upper"] : ""}`,
+				children: [
+					/* @__PURE__ */ a("button", {
+						ref: C,
+						className: `${d["dsi-inputbar-plus-btn"]} ${y ? d["dsi-inputbar-plus-btn--open"] : ""}`,
+						onClick: () => b((e) => !e),
+						"aria-label": "Options",
+						type: "button",
+						children: /* @__PURE__ */ a(c, {})
+					}),
+					/* @__PURE__ */ a("textarea", {
+						ref: x,
+						className: d["dsi-inputbar-textarea"],
+						value: t,
+						onChange: (e) => {
+							w.current = -1, s(e.target.value);
+						},
+						placeholder: l,
+						rows: 1,
+						onKeyDown: (e) => {
+							let n = _ ?? [];
+							if (e.key === "ArrowUp" && !e.shiftKey) {
+								t === "" && w.current === -1 && n.length > 0 ? (w.current = n.length - 1, s(n[w.current]), e.preventDefault()) : w.current > 0 ? (w.current--, s(n[w.current]), e.preventDefault()) : w.current === 0 && e.preventDefault();
+								return;
+							}
+							if (e.key === "ArrowDown" && w.current !== -1) {
+								w.current < n.length - 1 ? (w.current++, s(n[w.current])) : (w.current = -1, s("")), e.preventDefault();
+								return;
+							}
+							e.key === "Enter" && !e.shiftKey && (e.preventDefault(), w.current = -1, p && u !== "none" && m?.(u));
+						}
+					}),
+					u !== "none" && /* @__PURE__ */ a("button", {
+						className: d["dsi-inputbar-action-btn"],
+						disabled: !p,
+						onClick: () => m?.(u),
+						"aria-label": u,
+						type: "button",
+						children: /* @__PURE__ */ a(f, { type: u })
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { p as t };