@rekayasa/erica-bubble 1.0.2 → 1.0.3

package/dist/index.mjs

@@ -2342,42 +2342,33 @@ function Ft({ onSend: e, inProgress: t, threadId: n }) {
 		onDrop: E,
 		children: [
 			f && /* @__PURE__ */ u("div", {
-				className: "absolute inset-0 z-50 bg-teal-50/90 rounded-lg flex items-center justify-center pointer-events-none",
+				className: "erica-drag-overlay",
 				children: /* @__PURE__ */ u("p", {
-					className: "text-sm font-medium text-teal-600",
+					className: "erica-drag-overlay-text",
 					children: "Drop files to attach"
 				})
 			}),
 			a.length > 0 && /* @__PURE__ */ u("div", {
-				className: "flex flex-col gap-2 mb-2",
+				className: "erica-file-list",
 				children: a.map((e) => /* @__PURE__ */ d("div", {
-					className: `
-                px-3 py-2 rounded-lg flex items-center justify-between
-                ${e.status === "error" ? "bg-red-50" : e.status === "done" ? "bg-green-50" : "bg-gray-100"}
-              `,
+					className: `erica-file-item ${e.status === "error" ? "erica-file-item--error" : e.status === "done" ? "erica-file-item--done" : "erica-file-item--uploading"}`,
 					children: [/* @__PURE__ */ d("div", {
-						className: `
-                  flex items-center gap-2 flex-1 rounded-lg transition-colors
-                  ${e.status === "done" ? "cursor-pointer hover:bg-green-100 -mx-3 -my-2 px-3 py-2" : ""}
-                `,
+						className: `erica-file-content ${e.status === "done" ? "erica-file-content--clickable" : ""}`,
 						onClick: () => e.status === "done" && S(e),
 						role: e.status === "done" ? "button" : void 0,
 						tabIndex: e.status === "done" ? 0 : void 0,
 						children: [
-							e.status === "uploading" ? /* @__PURE__ */ u("div", { className: "w-4 h-4 border-2 border-gray-500 border-t-transparent rounded-full animate-spin" }) : m === e.id ? /* @__PURE__ */ u("div", { className: "w-4 h-4 border-2 border-green-500 border-t-transparent rounded-full animate-spin" }) : e.status === "done" ? /* @__PURE__ */ u(X, { className: "w-4 h-4 text-green-600" }) : /* @__PURE__ */ u(X, { className: "w-4 h-4 text-red-600" }),
+							e.status === "uploading" ? /* @__PURE__ */ u("div", { className: "erica-spinner erica-spinner--gray" }) : m === e.id ? /* @__PURE__ */ u("div", { className: "erica-spinner erica-spinner--green" }) : e.status === "done" ? /* @__PURE__ */ u(X, { className: "erica-icon-sm erica-icon-green" }) : /* @__PURE__ */ u(X, { className: "erica-icon-sm erica-icon-red" }),
 							/* @__PURE__ */ d("div", {
-								className: "flex-1 min-w-0",
+								className: "erica-file-info",
 								children: [/* @__PURE__ */ d("div", {
-									className: `
-                    text-sm font-medium truncate
-                    ${e.status === "error" ? "text-red-700" : e.status === "done" ? "text-green-700" : "text-gray-700"}
-                  `,
+									className: `erica-file-name ${e.status === "error" ? "erica-file-name--error" : e.status === "done" ? "erica-file-name--done" : "erica-file-name--uploading"}`,
 									children: [e.name, m === e.id && /* @__PURE__ */ u("span", {
-										className: "ml-2 text-xs text-green-600",
+										className: "erica-downloading-badge",
 										children: "Downloading..."
 									})]
 								}), /* @__PURE__ */ d("div", {
-									className: "text-xs text-gray-500",
+									className: "erica-file-status",
 									children: [
 										e.status === "uploading" && "Uploading...",
 										e.status === "done" && "Ready · Click to download",
@@ -2385,16 +2376,16 @@ function Ft({ onSend: e, inProgress: t, threadId: n }) {
 									]
 								})]
 							}),
-							e.status === "done" && !m && /* @__PURE__ */ u(et, { className: "w-4 h-4 text-green-600 opacity-0 group-hover:opacity-100 transition-opacity" })
+							e.status === "done" && !m && /* @__PURE__ */ u(et, { className: "erica-download-icon" })
 						]
 					}), /* @__PURE__ */ u("button", {
 						onClick: (t) => {
 							t.stopPropagation(), x(e.id);
 						},
 						disabled: e.status === "uploading",
-						className: "ml-2 p-1 hover:bg-black/10 rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
+						className: "erica-remove-button",
 						"aria-label": `Remove ${e.name}`,
-						children: /* @__PURE__ */ u(nt, { className: "w-4 h-4 text-gray-500" })
+						children: /* @__PURE__ */ u(nt, { className: "erica-icon-sm erica-icon-gray" })
 					})]
 				}, e.id))
 			}),
@@ -2407,7 +2398,7 @@ function Ft({ onSend: e, inProgress: t, threadId: n }) {
 					onChange: (e) => i(e.target.value),
 					onKeyDown: O,
 					placeholder: a.length > 0 ? `Ask about ${a.length} file${a.length > 1 ? "s" : ""}...` : "Type a message or attach files...",
-					className: "overflow-auto resize-none",
+					className: "erica-textarea",
 					rows: 1,
 					disabled: t
 				}), /* @__PURE__ */ d("div", {
@@ -2417,19 +2408,19 @@ function Ft({ onSend: e, inProgress: t, threadId: n }) {
 							ref: _,
 							type: "file",
 							onChange: b,
-							className: "hidden",
+							className: "erica-file-input",
 							disabled: t,
 							multiple: !0
 						}),
 						/* @__PURE__ */ u("button", {
 							onClick: () => _.current?.click(),
 							disabled: t,
-							className: "copilotKitInputControlButton mr-2",
+							className: "copilotKitInputControlButton erica-attach-button",
 							"aria-label": "Attach files",
 							title: "Attach files (drag & drop supported)",
-							children: /* @__PURE__ */ u(X, { className: "w-5 h-5" })
+							children: /* @__PURE__ */ u(X, { className: "erica-icon-md" })
 						}),
-						/* @__PURE__ */ u("div", { className: "grow" }),
+						/* @__PURE__ */ u("div", { className: "erica-spacer" }),
 						/* @__PURE__ */ u("button", {
 							onClick: D,
 							disabled: t || !r.trim() && a.filter((e) => e.status === "done").length === 0,
@@ -2511,63 +2502,63 @@ function Vt({ onNewChat: e, onThreadSelect: t }) {
 		r(!1), t?.(e);
 	}
 	return /* @__PURE__ */ d("div", {
-		className: "flex items-center justify-between px-4 py-3 border-b border-gray-200",
+		className: "erica-header",
 		children: [/* @__PURE__ */ u("h2", {
-			className: "text-lg font-semibold text-gray-900",
+			className: "erica-header-title",
 			children: "Erica Assistant"
 		}), /* @__PURE__ */ d("div", {
-			className: "flex items-center gap-2 relative",
+			className: "erica-header-controls",
 			ref: i,
 			children: [
 				/* @__PURE__ */ u("button", {
 					onClick: e,
-					className: "p-2 bg-gray-900 hover:bg-gray-700 text-white rounded-lg transition-colors",
+					className: "erica-new-chat-button",
 					title: "Start new chat",
-					children: /* @__PURE__ */ u(tt, { className: "w-4 h-4" })
+					children: /* @__PURE__ */ u(tt, { className: "erica-icon-sm" })
 				}),
 				/* @__PURE__ */ d("button", {
 					onClick: () => r(!n),
-					className: "flex items-center gap-1.5 px-3 py-2 hover:bg-gray-100 rounded-lg transition-colors",
+					className: "erica-threads-toggle",
 					title: "Recent threads",
 					children: [/* @__PURE__ */ d("span", {
-						className: "text-sm font-medium text-gray-700",
+						className: "erica-threads-toggle-text",
 						children: ["Threads ", a.length > 0 && `(${a.length})`]
-					}), /* @__PURE__ */ u($e, { className: `w-4 h-4 text-gray-500 transition-transform ${n ? "rotate-180" : ""}` })]
+					}), /* @__PURE__ */ u($e, { className: `erica-threads-toggle-icon ${n ? "erica-threads-toggle-icon--open" : ""}` })]
 				}),
 				n && /* @__PURE__ */ u("div", {
-					className: "absolute top-full right-0 mt-1 w-72 bg-white rounded-lg shadow-lg border border-gray-200 z-50 max-h-80 overflow-y-auto",
+					className: "erica-threads-dropdown",
 					children: /* @__PURE__ */ d("div", {
-						className: "p-2",
+						className: "erica-threads-dropdown-content",
 						children: [
 							/* @__PURE__ */ u("div", {
-								className: "px-3 py-2 text-xs font-semibold text-gray-500 uppercase",
+								className: "erica-threads-dropdown-header",
 								children: "Recent Threads"
 							}),
 							s && /* @__PURE__ */ u("div", {
-								className: "px-3 py-4 text-center text-sm text-gray-500",
+								className: "erica-threads-empty",
 								children: "Loading threads..."
 							}),
 							!s && a.length === 0 && /* @__PURE__ */ u("div", {
-								className: "px-3 py-4 text-center text-sm text-gray-500",
+								className: "erica-threads-empty",
 								children: "No conversations yet"
 							}),
 							!s && a.map((e) => {
 								let t = zt(e.agent), n = Bt(e.last_run_at ?? e.created_at);
 								return /* @__PURE__ */ u("button", {
 									onClick: () => f(e.uid),
-									className: "w-full text-left px-3 py-2 hover:bg-gray-100 rounded-lg transition-colors",
+									className: "erica-thread-item",
 									children: /* @__PURE__ */ d("div", {
-										className: "flex flex-col gap-1",
+										className: "erica-thread-item-content",
 										children: [/* @__PURE__ */ u("span", {
-											className: "text-sm font-medium text-gray-900 truncate",
+											className: "erica-thread-title",
 											children: typeof e.thread_metadata?.title == "string" ? e.thread_metadata.title : e.last_message ?? "New conversation"
 										}), /* @__PURE__ */ d("div", {
-											className: "flex items-center justify-between gap-2",
+											className: "erica-thread-meta",
 											children: [t && /* @__PURE__ */ u("span", {
-												className: "text-xs text-gray-500 truncate flex-1",
+												className: "erica-thread-agent",
 												children: t
 											}), n && /* @__PURE__ */ u("span", {
-												className: "text-xs text-gray-400 shrink-0",
+												className: "erica-thread-time",
 												children: n
 											})]
 										})]