@lantos1618/better-ui 0.9.1 → 0.9.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +537 -398
- package/dist/components/index.js +38 -21
- package/dist/components/index.mjs +38 -21
- package/package.json +3 -1
package/dist/components/index.js
CHANGED
|
@@ -425,12 +425,14 @@ function ChatProvider({ endpoint = "/api/chat", tools, toolStateStore: externalS
|
|
|
425
425
|
|
|
426
426
|
// src/components/Thread.tsx
|
|
427
427
|
var import_react6 = require("react");
|
|
428
|
+
var import_lucide_react2 = require("lucide-react");
|
|
428
429
|
|
|
429
430
|
// src/components/Message.tsx
|
|
430
431
|
var import_ai2 = require("ai");
|
|
431
432
|
|
|
432
433
|
// src/components/ToolResult.tsx
|
|
433
434
|
var import_react4 = require("react");
|
|
435
|
+
var import_lucide_react = require("lucide-react");
|
|
434
436
|
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
435
437
|
var ToolViewErrorBoundary = class extends import_react4.Component {
|
|
436
438
|
constructor() {
|
|
@@ -447,7 +449,7 @@ var ToolViewErrorBoundary = class extends import_react4.Component {
|
|
|
447
449
|
if (this.state.error) {
|
|
448
450
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "bg-[var(--bui-error-muted,rgba(220,38,38,0.08))] border border-[var(--bui-error-border,rgba(153,27,27,0.5))] rounded-xl p-4", children: [
|
|
449
451
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
450
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
452
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.AlertCircle, { size: 16, className: "text-[var(--bui-error-fg,#f87171)] shrink-0" }),
|
|
451
453
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "text-[var(--bui-error-fg,#f87171)] text-sm font-medium", children: [
|
|
452
454
|
this.props.toolName,
|
|
453
455
|
" view error"
|
|
@@ -624,7 +626,7 @@ function ToolResult({
|
|
|
624
626
|
if (storeState?.error && !resolvedOutput && !resolvedLoading) {
|
|
625
627
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: `bg-[var(--bui-error-muted,rgba(220,38,38,0.08))] border border-[var(--bui-error-border,rgba(153,27,27,0.5))] rounded-xl p-4 ${className || ""}`, children: [
|
|
626
628
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-2 mb-2", children: [
|
|
627
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
629
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.AlertCircle, { size: 16, className: "text-[var(--bui-error-fg,#f87171)] shrink-0" }),
|
|
628
630
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "text-[var(--bui-error-fg,#f87171)] text-sm font-medium", children: [
|
|
629
631
|
toolName,
|
|
630
632
|
" failed"
|
|
@@ -831,18 +833,29 @@ function Thread({ className, emptyMessage, suggestions }) {
|
|
|
831
833
|
}
|
|
832
834
|
}, [messages, isLoading]);
|
|
833
835
|
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref: scrollRef, className: `${className || ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "p-6 space-y-6", children: [
|
|
834
|
-
messages.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime5.
|
|
835
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-[var(--bui-fg-secondary,#a1a1aa)]
|
|
836
|
-
suggestions && suggestions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex flex-
|
|
836
|
+
messages.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "py-12", children: [
|
|
837
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-center text-sm text-[var(--bui-fg-secondary,#a1a1aa)]", children: emptyMessage || "Send a message to get started" }),
|
|
838
|
+
suggestions && suggestions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mt-8 flex flex-col divide-y divide-[var(--bui-border,#27272a)] border-y border-[var(--bui-border,#27272a)]", children: suggestions.map((suggestion) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
837
839
|
"button",
|
|
838
840
|
{
|
|
839
841
|
onClick: () => sendMessage(suggestion),
|
|
840
|
-
className: "px-
|
|
841
|
-
children:
|
|
842
|
+
className: "group flex items-center justify-between gap-4 px-5 py-4 text-left text-sm text-[var(--bui-fg,#f4f4f5)] transition-colors hover:bg-[var(--bui-bg-hover,#27272a)]",
|
|
843
|
+
children: [
|
|
844
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "flex-1", children: suggestion }),
|
|
845
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
846
|
+
import_lucide_react2.ArrowRight,
|
|
847
|
+
{
|
|
848
|
+
size: 14,
|
|
849
|
+
strokeWidth: 1.75,
|
|
850
|
+
"aria-hidden": "true",
|
|
851
|
+
className: "shrink-0 text-[var(--bui-fg-faint,#52525b)] transition-all group-hover:translate-x-0.5 group-hover:text-[var(--bui-fg-secondary,#a1a1aa)]"
|
|
852
|
+
}
|
|
853
|
+
)
|
|
854
|
+
]
|
|
842
855
|
},
|
|
843
856
|
suggestion
|
|
844
857
|
)) })
|
|
845
|
-
] })
|
|
858
|
+
] }),
|
|
846
859
|
messages.map((message, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
847
860
|
Message,
|
|
848
861
|
{
|
|
@@ -865,6 +878,7 @@ function Thread({ className, emptyMessage, suggestions }) {
|
|
|
865
878
|
|
|
866
879
|
// src/components/Composer.tsx
|
|
867
880
|
var import_react7 = require("react");
|
|
881
|
+
var import_lucide_react3 = require("lucide-react");
|
|
868
882
|
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
869
883
|
function Composer({ className, placeholder = "Ask something..." }) {
|
|
870
884
|
const { sendMessage, isLoading } = useChatContext();
|
|
@@ -892,8 +906,9 @@ function Composer({ className, placeholder = "Ask something..." }) {
|
|
|
892
906
|
{
|
|
893
907
|
type: "submit",
|
|
894
908
|
disabled: isLoading || !input.trim(),
|
|
895
|
-
|
|
896
|
-
|
|
909
|
+
"aria-label": "Send",
|
|
910
|
+
className: "absolute right-2 top-1/2 -translate-y-1/2 flex h-8 w-8 items-center justify-center rounded-full bg-[var(--bui-primary,#18181b)] text-[var(--bui-user-fg,#f4f4f5)] transition-all enabled:hover:bg-[var(--bui-primary-hover,#27272a)] enabled:active:scale-95 disabled:bg-[var(--bui-bg-elevated,#27272a)] disabled:text-[var(--bui-fg-faint,#52525b)] disabled:cursor-not-allowed",
|
|
911
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react3.Send, { size: 14, strokeWidth: 1.75 })
|
|
897
912
|
}
|
|
898
913
|
)
|
|
899
914
|
] });
|
|
@@ -924,6 +939,7 @@ function Chat({
|
|
|
924
939
|
|
|
925
940
|
// src/components/Panel.tsx
|
|
926
941
|
var import_react8 = require("react");
|
|
942
|
+
var import_lucide_react4 = require("lucide-react");
|
|
927
943
|
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
928
944
|
function Panel({ toolStateStore, tools, getOnAction, className, tool: filterTool, excludeTools, maxItems = 5 }) {
|
|
929
945
|
const subscribe = (0, import_react8.useCallback)(
|
|
@@ -982,7 +998,7 @@ function Panel({ toolStateStore, tools, getOnAction, className, tool: filterTool
|
|
|
982
998
|
}
|
|
983
999
|
),
|
|
984
1000
|
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "relative flex flex-col items-center gap-3 text-center", children: [
|
|
985
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "w-10 h-10 rounded-xl bg-[var(--bui-bg-elevated,#27272a)] border border-[var(--bui-border-strong,#3f3f46)]/50 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1001
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "w-10 h-10 rounded-xl bg-[var(--bui-bg-elevated,#27272a)] border border-[var(--bui-border-strong,#3f3f46)]/50 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react4.Sparkles, { size: 20, strokeWidth: 1.5, className: "text-[var(--bui-fg-faint,#52525b)]" }) }),
|
|
986
1002
|
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
|
|
987
1003
|
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-[var(--bui-fg-muted,#71717a)] text-sm font-medium", children: "Canvas" }),
|
|
988
1004
|
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-[var(--bui-fg-faint,#52525b)] text-xs mt-1", children: "Tool results will render here as you chat" })
|
|
@@ -1100,6 +1116,7 @@ function ThemeProvider({
|
|
|
1100
1116
|
|
|
1101
1117
|
// src/components/Question.tsx
|
|
1102
1118
|
var import_react11 = require("react");
|
|
1119
|
+
var import_lucide_react5 = require("lucide-react");
|
|
1103
1120
|
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
1104
1121
|
function QuestionView({
|
|
1105
1122
|
question,
|
|
@@ -1161,7 +1178,7 @@ function QuestionView({
|
|
|
1161
1178
|
disabled: loading,
|
|
1162
1179
|
className: `w-full text-left px-3 py-2.5 rounded-lg border transition-colors ${isSelected(opt.value) ? "border-[var(--bui-primary-border,#2563eb80)] bg-[var(--bui-primary-muted,#1e3a5f)] text-[var(--bui-fg,#f4f4f5)]" : "border-[var(--bui-border-strong,#3f3f46)] bg-[var(--bui-bg-surface,#18181b)]/50 text-[var(--bui-fg-secondary,#a1a1aa)] hover:border-[var(--bui-border-strong,#3f3f46)] hover:bg-[var(--bui-bg-surface,#18181b)]"} disabled:opacity-50 disabled:cursor-not-allowed`,
|
|
1163
1180
|
children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-3", children: [
|
|
1164
|
-
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: `shrink-0 w-4 h-4 rounded-${mode === "multi" ? "sm" : "full"} border ${isSelected(opt.value) ? "border-[var(--bui-primary,#2563eb)] bg-[var(--bui-primary-hover,#3b82f6)]" : "border-[var(--bui-border-strong,#3f3f46)]"} flex items-center justify-center`, children: isSelected(opt.value) && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
1181
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: `shrink-0 w-4 h-4 rounded-${mode === "multi" ? "sm" : "full"} border ${isSelected(opt.value) ? "border-[var(--bui-primary,#2563eb)] bg-[var(--bui-primary-hover,#3b82f6)]" : "border-[var(--bui-border-strong,#3f3f46)]"} flex items-center justify-center`, children: isSelected(opt.value) && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react5.Check, { size: 10, strokeWidth: 3, className: "text-white" }) }),
|
|
1165
1182
|
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "min-w-0 flex-1", children: [
|
|
1166
1183
|
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-sm", children: opt.label }),
|
|
1167
1184
|
opt.description && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-[var(--bui-fg-muted,#71717a)] text-xs mt-0.5", children: opt.description })
|
|
@@ -1467,6 +1484,7 @@ function DataTableView({
|
|
|
1467
1484
|
}
|
|
1468
1485
|
|
|
1469
1486
|
// src/components/Progress.tsx
|
|
1487
|
+
var import_lucide_react6 = require("lucide-react");
|
|
1470
1488
|
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
1471
1489
|
function ProgressView({
|
|
1472
1490
|
title,
|
|
@@ -1521,8 +1539,8 @@ function ProgressView({
|
|
|
1521
1539
|
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "mt-0.5 shrink-0", children: [
|
|
1522
1540
|
step.status === "pending" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "w-4 h-4 rounded-full border border-[var(--bui-border-strong,#3f3f46)]" }),
|
|
1523
1541
|
step.status === "active" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "w-4 h-4 rounded-full bg-[var(--bui-primary-muted,#1e3a5f)] flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "w-2 h-2 bg-[var(--bui-primary-hover,#3b82f6)] rounded-full animate-pulse" }) }),
|
|
1524
|
-
step.status === "done" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
1525
|
-
step.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
1542
|
+
step.status === "done" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react6.Check, { size: 16, strokeWidth: 3, className: "text-[var(--bui-success-fg,#6ee7b7)]" }),
|
|
1543
|
+
step.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react6.X, { size: 16, strokeWidth: 3, className: "text-[var(--bui-error-fg,#f87171)]" })
|
|
1526
1544
|
] }),
|
|
1527
1545
|
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "min-w-0 flex-1", children: [
|
|
1528
1546
|
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: `text-sm ${step.status === "done" ? "text-[var(--bui-fg-secondary,#a1a1aa)] line-through" : step.status === "error" ? "text-[var(--bui-error-fg,#f87171)]" : step.status === "active" ? "text-[var(--bui-fg,#f4f4f5)]" : "text-[var(--bui-fg-secondary,#a1a1aa)]"}`, children: step.label }),
|
|
@@ -1676,6 +1694,7 @@ function MediaItemRenderer({
|
|
|
1676
1694
|
|
|
1677
1695
|
// src/components/CodeBlock.tsx
|
|
1678
1696
|
var import_react15 = require("react");
|
|
1697
|
+
var import_lucide_react7 = require("lucide-react");
|
|
1679
1698
|
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
1680
1699
|
function CodeBlockView({
|
|
1681
1700
|
code,
|
|
@@ -1742,13 +1761,10 @@ function CodeBlockView({
|
|
|
1742
1761
|
onClick: () => handleCopy(code),
|
|
1743
1762
|
className: "flex items-center gap-1.5 px-2 py-1 text-xs text-[var(--bui-fg-muted,#71717a)] hover:text-[var(--bui-fg-secondary,#a1a1aa)] transition-colors rounded hover:bg-[var(--bui-bg-hover,#3f3f46)]/50",
|
|
1744
1763
|
children: copied ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
|
|
1745
|
-
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
1764
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react7.Check, { size: 14, className: "text-[var(--bui-success-fg,#6ee7b7)]" }),
|
|
1746
1765
|
"Copied"
|
|
1747
1766
|
] }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
|
|
1748
|
-
/* @__PURE__ */ (0, import_jsx_runtime15.
|
|
1749
|
-
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
|
|
1750
|
-
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" })
|
|
1751
|
-
] }),
|
|
1767
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react7.Copy, { size: 14 }),
|
|
1752
1768
|
"Copy"
|
|
1753
1769
|
] })
|
|
1754
1770
|
}
|
|
@@ -1877,6 +1893,7 @@ function ToastItem({ toast: t, onDismiss }) {
|
|
|
1877
1893
|
|
|
1878
1894
|
// src/components/FileUpload.tsx
|
|
1879
1895
|
var import_react17 = require("react");
|
|
1896
|
+
var import_lucide_react8 = require("lucide-react");
|
|
1880
1897
|
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
1881
1898
|
function FileUploadView({
|
|
1882
1899
|
accept,
|
|
@@ -1960,7 +1977,7 @@ function FileUploadView({
|
|
|
1960
1977
|
className: "hidden"
|
|
1961
1978
|
}
|
|
1962
1979
|
),
|
|
1963
|
-
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
1980
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react8.Upload, { size: 32, strokeWidth: 1.5, className: "text-[var(--bui-fg-faint,#52525b)] mx-auto mb-2" }),
|
|
1964
1981
|
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-[var(--bui-fg-secondary,#a1a1aa)] text-sm", children: isDragging ? "Drop files here" : "Click or drag files to upload" }),
|
|
1965
1982
|
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("p", { className: "text-[var(--bui-fg-faint,#52525b)] text-xs mt-1", children: [
|
|
1966
1983
|
accept ? accept : "Any file type",
|
|
@@ -1984,7 +2001,7 @@ function formatBytes(bytes) {
|
|
|
1984
2001
|
function FileIcon({ type }) {
|
|
1985
2002
|
const isImage = type.startsWith("image/");
|
|
1986
2003
|
const isPdf = type === "application/pdf";
|
|
1987
|
-
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: `w-8 h-8 rounded-lg flex items-center justify-center shrink-0 ${isImage ? "bg-purple-900/30 text-purple-400" : isPdf ? "bg-[var(--bui-error-muted,rgba(220,38,38,0.08))] text-[var(--bui-error-fg,#f87171)]" : "bg-[var(--bui-bg-hover,#3f3f46)] text-[var(--bui-fg-secondary,#a1a1aa)]"}`, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
2004
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: `w-8 h-8 rounded-lg flex items-center justify-center shrink-0 ${isImage ? "bg-purple-900/30 text-purple-400" : isPdf ? "bg-[var(--bui-error-muted,rgba(220,38,38,0.08))] text-[var(--bui-error-fg,#f87171)]" : "bg-[var(--bui-bg-hover,#3f3f46)] text-[var(--bui-fg-secondary,#a1a1aa)]"}`, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react8.FileText, { size: 16, strokeWidth: 1.5 }) });
|
|
1988
2005
|
}
|
|
1989
2006
|
// Annotate the CommonJS export names for ESM import in node:
|
|
1990
2007
|
0 && (module.exports = {
|
|
@@ -367,6 +367,7 @@ function ChatProvider({ endpoint = "/api/chat", tools, toolStateStore: externalS
|
|
|
367
367
|
|
|
368
368
|
// src/components/Thread.tsx
|
|
369
369
|
import { useRef as useRef3, useEffect as useEffect4 } from "react";
|
|
370
|
+
import { ArrowRight } from "lucide-react";
|
|
370
371
|
|
|
371
372
|
// src/components/Message.tsx
|
|
372
373
|
import {
|
|
@@ -377,6 +378,7 @@ import {
|
|
|
377
378
|
|
|
378
379
|
// src/components/ToolResult.tsx
|
|
379
380
|
import { Component, useEffect as useEffect2, useRef as useRef2, useSyncExternalStore as useSyncExternalStore2, useCallback as useCallback3 } from "react";
|
|
381
|
+
import { AlertCircle } from "lucide-react";
|
|
380
382
|
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
381
383
|
var ToolViewErrorBoundary = class extends Component {
|
|
382
384
|
constructor() {
|
|
@@ -393,7 +395,7 @@ var ToolViewErrorBoundary = class extends Component {
|
|
|
393
395
|
if (this.state.error) {
|
|
394
396
|
return /* @__PURE__ */ jsxs("div", { className: "bg-[var(--bui-error-muted,rgba(220,38,38,0.08))] border border-[var(--bui-error-border,rgba(153,27,27,0.5))] rounded-xl p-4", children: [
|
|
395
397
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
|
|
396
|
-
/* @__PURE__ */ jsx2(
|
|
398
|
+
/* @__PURE__ */ jsx2(AlertCircle, { size: 16, className: "text-[var(--bui-error-fg,#f87171)] shrink-0" }),
|
|
397
399
|
/* @__PURE__ */ jsxs("span", { className: "text-[var(--bui-error-fg,#f87171)] text-sm font-medium", children: [
|
|
398
400
|
this.props.toolName,
|
|
399
401
|
" view error"
|
|
@@ -570,7 +572,7 @@ function ToolResult({
|
|
|
570
572
|
if (storeState?.error && !resolvedOutput && !resolvedLoading) {
|
|
571
573
|
return /* @__PURE__ */ jsxs("div", { className: `bg-[var(--bui-error-muted,rgba(220,38,38,0.08))] border border-[var(--bui-error-border,rgba(153,27,27,0.5))] rounded-xl p-4 ${className || ""}`, children: [
|
|
572
574
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-2", children: [
|
|
573
|
-
/* @__PURE__ */ jsx2(
|
|
575
|
+
/* @__PURE__ */ jsx2(AlertCircle, { size: 16, className: "text-[var(--bui-error-fg,#f87171)] shrink-0" }),
|
|
574
576
|
/* @__PURE__ */ jsxs("span", { className: "text-[var(--bui-error-fg,#f87171)] text-sm font-medium", children: [
|
|
575
577
|
toolName,
|
|
576
578
|
" failed"
|
|
@@ -777,18 +779,29 @@ function Thread({ className, emptyMessage, suggestions }) {
|
|
|
777
779
|
}
|
|
778
780
|
}, [messages, isLoading]);
|
|
779
781
|
return /* @__PURE__ */ jsx5("div", { ref: scrollRef, className: `${className || ""}`, children: /* @__PURE__ */ jsxs4("div", { className: "p-6 space-y-6", children: [
|
|
780
|
-
messages.length === 0 && /* @__PURE__ */
|
|
781
|
-
/* @__PURE__ */ jsx5("p", { className: "text-[var(--bui-fg-secondary,#a1a1aa)]
|
|
782
|
-
suggestions && suggestions.length > 0 && /* @__PURE__ */ jsx5("div", { className: "flex flex-
|
|
782
|
+
messages.length === 0 && /* @__PURE__ */ jsxs4("div", { className: "py-12", children: [
|
|
783
|
+
/* @__PURE__ */ jsx5("p", { className: "text-center text-sm text-[var(--bui-fg-secondary,#a1a1aa)]", children: emptyMessage || "Send a message to get started" }),
|
|
784
|
+
suggestions && suggestions.length > 0 && /* @__PURE__ */ jsx5("div", { className: "mt-8 flex flex-col divide-y divide-[var(--bui-border,#27272a)] border-y border-[var(--bui-border,#27272a)]", children: suggestions.map((suggestion) => /* @__PURE__ */ jsxs4(
|
|
783
785
|
"button",
|
|
784
786
|
{
|
|
785
787
|
onClick: () => sendMessage(suggestion),
|
|
786
|
-
className: "px-
|
|
787
|
-
children:
|
|
788
|
+
className: "group flex items-center justify-between gap-4 px-5 py-4 text-left text-sm text-[var(--bui-fg,#f4f4f5)] transition-colors hover:bg-[var(--bui-bg-hover,#27272a)]",
|
|
789
|
+
children: [
|
|
790
|
+
/* @__PURE__ */ jsx5("span", { className: "flex-1", children: suggestion }),
|
|
791
|
+
/* @__PURE__ */ jsx5(
|
|
792
|
+
ArrowRight,
|
|
793
|
+
{
|
|
794
|
+
size: 14,
|
|
795
|
+
strokeWidth: 1.75,
|
|
796
|
+
"aria-hidden": "true",
|
|
797
|
+
className: "shrink-0 text-[var(--bui-fg-faint,#52525b)] transition-all group-hover:translate-x-0.5 group-hover:text-[var(--bui-fg-secondary,#a1a1aa)]"
|
|
798
|
+
}
|
|
799
|
+
)
|
|
800
|
+
]
|
|
788
801
|
},
|
|
789
802
|
suggestion
|
|
790
803
|
)) })
|
|
791
|
-
] })
|
|
804
|
+
] }),
|
|
792
805
|
messages.map((message, i) => /* @__PURE__ */ jsx5(
|
|
793
806
|
Message,
|
|
794
807
|
{
|
|
@@ -811,6 +824,7 @@ function Thread({ className, emptyMessage, suggestions }) {
|
|
|
811
824
|
|
|
812
825
|
// src/components/Composer.tsx
|
|
813
826
|
import { useState as useState3 } from "react";
|
|
827
|
+
import { Send } from "lucide-react";
|
|
814
828
|
import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
815
829
|
function Composer({ className, placeholder = "Ask something..." }) {
|
|
816
830
|
const { sendMessage, isLoading } = useChatContext();
|
|
@@ -838,8 +852,9 @@ function Composer({ className, placeholder = "Ask something..." }) {
|
|
|
838
852
|
{
|
|
839
853
|
type: "submit",
|
|
840
854
|
disabled: isLoading || !input.trim(),
|
|
841
|
-
|
|
842
|
-
|
|
855
|
+
"aria-label": "Send",
|
|
856
|
+
className: "absolute right-2 top-1/2 -translate-y-1/2 flex h-8 w-8 items-center justify-center rounded-full bg-[var(--bui-primary,#18181b)] text-[var(--bui-user-fg,#f4f4f5)] transition-all enabled:hover:bg-[var(--bui-primary-hover,#27272a)] enabled:active:scale-95 disabled:bg-[var(--bui-bg-elevated,#27272a)] disabled:text-[var(--bui-fg-faint,#52525b)] disabled:cursor-not-allowed",
|
|
857
|
+
children: /* @__PURE__ */ jsx6(Send, { size: 14, strokeWidth: 1.75 })
|
|
843
858
|
}
|
|
844
859
|
)
|
|
845
860
|
] });
|
|
@@ -870,6 +885,7 @@ function Chat({
|
|
|
870
885
|
|
|
871
886
|
// src/components/Panel.tsx
|
|
872
887
|
import { useSyncExternalStore as useSyncExternalStore3, useCallback as useCallback4 } from "react";
|
|
888
|
+
import { Sparkles } from "lucide-react";
|
|
873
889
|
import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
874
890
|
function Panel({ toolStateStore, tools, getOnAction, className, tool: filterTool, excludeTools, maxItems = 5 }) {
|
|
875
891
|
const subscribe = useCallback4(
|
|
@@ -928,7 +944,7 @@ function Panel({ toolStateStore, tools, getOnAction, className, tool: filterTool
|
|
|
928
944
|
}
|
|
929
945
|
),
|
|
930
946
|
/* @__PURE__ */ jsxs7("div", { className: "relative flex flex-col items-center gap-3 text-center", children: [
|
|
931
|
-
/* @__PURE__ */ jsx8("div", { className: "w-10 h-10 rounded-xl bg-[var(--bui-bg-elevated,#27272a)] border border-[var(--bui-border-strong,#3f3f46)]/50 flex items-center justify-center", children: /* @__PURE__ */ jsx8(
|
|
947
|
+
/* @__PURE__ */ jsx8("div", { className: "w-10 h-10 rounded-xl bg-[var(--bui-bg-elevated,#27272a)] border border-[var(--bui-border-strong,#3f3f46)]/50 flex items-center justify-center", children: /* @__PURE__ */ jsx8(Sparkles, { size: 20, strokeWidth: 1.5, className: "text-[var(--bui-fg-faint,#52525b)]" }) }),
|
|
932
948
|
/* @__PURE__ */ jsxs7("div", { children: [
|
|
933
949
|
/* @__PURE__ */ jsx8("p", { className: "text-[var(--bui-fg-muted,#71717a)] text-sm font-medium", children: "Canvas" }),
|
|
934
950
|
/* @__PURE__ */ jsx8("p", { className: "text-[var(--bui-fg-faint,#52525b)] text-xs mt-1", children: "Tool results will render here as you chat" })
|
|
@@ -1046,6 +1062,7 @@ function ThemeProvider({
|
|
|
1046
1062
|
|
|
1047
1063
|
// src/components/Question.tsx
|
|
1048
1064
|
import { useState as useState5 } from "react";
|
|
1065
|
+
import { Check } from "lucide-react";
|
|
1049
1066
|
import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
1050
1067
|
function QuestionView({
|
|
1051
1068
|
question,
|
|
@@ -1107,7 +1124,7 @@ function QuestionView({
|
|
|
1107
1124
|
disabled: loading,
|
|
1108
1125
|
className: `w-full text-left px-3 py-2.5 rounded-lg border transition-colors ${isSelected(opt.value) ? "border-[var(--bui-primary-border,#2563eb80)] bg-[var(--bui-primary-muted,#1e3a5f)] text-[var(--bui-fg,#f4f4f5)]" : "border-[var(--bui-border-strong,#3f3f46)] bg-[var(--bui-bg-surface,#18181b)]/50 text-[var(--bui-fg-secondary,#a1a1aa)] hover:border-[var(--bui-border-strong,#3f3f46)] hover:bg-[var(--bui-bg-surface,#18181b)]"} disabled:opacity-50 disabled:cursor-not-allowed`,
|
|
1109
1126
|
children: /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-3", children: [
|
|
1110
|
-
/* @__PURE__ */ jsx10("div", { className: `shrink-0 w-4 h-4 rounded-${mode === "multi" ? "sm" : "full"} border ${isSelected(opt.value) ? "border-[var(--bui-primary,#2563eb)] bg-[var(--bui-primary-hover,#3b82f6)]" : "border-[var(--bui-border-strong,#3f3f46)]"} flex items-center justify-center`, children: isSelected(opt.value) && /* @__PURE__ */ jsx10(
|
|
1127
|
+
/* @__PURE__ */ jsx10("div", { className: `shrink-0 w-4 h-4 rounded-${mode === "multi" ? "sm" : "full"} border ${isSelected(opt.value) ? "border-[var(--bui-primary,#2563eb)] bg-[var(--bui-primary-hover,#3b82f6)]" : "border-[var(--bui-border-strong,#3f3f46)]"} flex items-center justify-center`, children: isSelected(opt.value) && /* @__PURE__ */ jsx10(Check, { size: 10, strokeWidth: 3, className: "text-white" }) }),
|
|
1111
1128
|
/* @__PURE__ */ jsxs8("div", { className: "min-w-0 flex-1", children: [
|
|
1112
1129
|
/* @__PURE__ */ jsx10("span", { className: "text-sm", children: opt.label }),
|
|
1113
1130
|
opt.description && /* @__PURE__ */ jsx10("p", { className: "text-[var(--bui-fg-muted,#71717a)] text-xs mt-0.5", children: opt.description })
|
|
@@ -1413,6 +1430,7 @@ function DataTableView({
|
|
|
1413
1430
|
}
|
|
1414
1431
|
|
|
1415
1432
|
// src/components/Progress.tsx
|
|
1433
|
+
import { Check as Check2, X } from "lucide-react";
|
|
1416
1434
|
import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
1417
1435
|
function ProgressView({
|
|
1418
1436
|
title,
|
|
@@ -1467,8 +1485,8 @@ function ProgressView({
|
|
|
1467
1485
|
/* @__PURE__ */ jsxs11("div", { className: "mt-0.5 shrink-0", children: [
|
|
1468
1486
|
step.status === "pending" && /* @__PURE__ */ jsx13("div", { className: "w-4 h-4 rounded-full border border-[var(--bui-border-strong,#3f3f46)]" }),
|
|
1469
1487
|
step.status === "active" && /* @__PURE__ */ jsx13("div", { className: "w-4 h-4 rounded-full bg-[var(--bui-primary-muted,#1e3a5f)] flex items-center justify-center", children: /* @__PURE__ */ jsx13("div", { className: "w-2 h-2 bg-[var(--bui-primary-hover,#3b82f6)] rounded-full animate-pulse" }) }),
|
|
1470
|
-
step.status === "done" && /* @__PURE__ */ jsx13(
|
|
1471
|
-
step.status === "error" && /* @__PURE__ */ jsx13(
|
|
1488
|
+
step.status === "done" && /* @__PURE__ */ jsx13(Check2, { size: 16, strokeWidth: 3, className: "text-[var(--bui-success-fg,#6ee7b7)]" }),
|
|
1489
|
+
step.status === "error" && /* @__PURE__ */ jsx13(X, { size: 16, strokeWidth: 3, className: "text-[var(--bui-error-fg,#f87171)]" })
|
|
1472
1490
|
] }),
|
|
1473
1491
|
/* @__PURE__ */ jsxs11("div", { className: "min-w-0 flex-1", children: [
|
|
1474
1492
|
/* @__PURE__ */ jsx13("p", { className: `text-sm ${step.status === "done" ? "text-[var(--bui-fg-secondary,#a1a1aa)] line-through" : step.status === "error" ? "text-[var(--bui-error-fg,#f87171)]" : step.status === "active" ? "text-[var(--bui-fg,#f4f4f5)]" : "text-[var(--bui-fg-secondary,#a1a1aa)]"}`, children: step.label }),
|
|
@@ -1622,6 +1640,7 @@ function MediaItemRenderer({
|
|
|
1622
1640
|
|
|
1623
1641
|
// src/components/CodeBlock.tsx
|
|
1624
1642
|
import { useState as useState9 } from "react";
|
|
1643
|
+
import { Check as Check3, Copy } from "lucide-react";
|
|
1625
1644
|
import { Fragment as Fragment2, jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
1626
1645
|
function CodeBlockView({
|
|
1627
1646
|
code,
|
|
@@ -1688,13 +1707,10 @@ function CodeBlockView({
|
|
|
1688
1707
|
onClick: () => handleCopy(code),
|
|
1689
1708
|
className: "flex items-center gap-1.5 px-2 py-1 text-xs text-[var(--bui-fg-muted,#71717a)] hover:text-[var(--bui-fg-secondary,#a1a1aa)] transition-colors rounded hover:bg-[var(--bui-bg-hover,#3f3f46)]/50",
|
|
1690
1709
|
children: copied ? /* @__PURE__ */ jsxs13(Fragment2, { children: [
|
|
1691
|
-
/* @__PURE__ */ jsx15(
|
|
1710
|
+
/* @__PURE__ */ jsx15(Check3, { size: 14, className: "text-[var(--bui-success-fg,#6ee7b7)]" }),
|
|
1692
1711
|
"Copied"
|
|
1693
1712
|
] }) : /* @__PURE__ */ jsxs13(Fragment2, { children: [
|
|
1694
|
-
/* @__PURE__ */
|
|
1695
|
-
/* @__PURE__ */ jsx15("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
|
|
1696
|
-
/* @__PURE__ */ jsx15("path", { d: "M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" })
|
|
1697
|
-
] }),
|
|
1713
|
+
/* @__PURE__ */ jsx15(Copy, { size: 14 }),
|
|
1698
1714
|
"Copy"
|
|
1699
1715
|
] })
|
|
1700
1716
|
}
|
|
@@ -1823,6 +1839,7 @@ function ToastItem({ toast: t, onDismiss }) {
|
|
|
1823
1839
|
|
|
1824
1840
|
// src/components/FileUpload.tsx
|
|
1825
1841
|
import { useState as useState11, useRef as useRef6, useCallback as useCallback6 } from "react";
|
|
1842
|
+
import { Upload, FileText } from "lucide-react";
|
|
1826
1843
|
import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
1827
1844
|
function FileUploadView({
|
|
1828
1845
|
accept,
|
|
@@ -1906,7 +1923,7 @@ function FileUploadView({
|
|
|
1906
1923
|
className: "hidden"
|
|
1907
1924
|
}
|
|
1908
1925
|
),
|
|
1909
|
-
/* @__PURE__ */ jsx17(
|
|
1926
|
+
/* @__PURE__ */ jsx17(Upload, { size: 32, strokeWidth: 1.5, className: "text-[var(--bui-fg-faint,#52525b)] mx-auto mb-2" }),
|
|
1910
1927
|
/* @__PURE__ */ jsx17("p", { className: "text-[var(--bui-fg-secondary,#a1a1aa)] text-sm", children: isDragging ? "Drop files here" : "Click or drag files to upload" }),
|
|
1911
1928
|
/* @__PURE__ */ jsxs15("p", { className: "text-[var(--bui-fg-faint,#52525b)] text-xs mt-1", children: [
|
|
1912
1929
|
accept ? accept : "Any file type",
|
|
@@ -1930,7 +1947,7 @@ function formatBytes(bytes) {
|
|
|
1930
1947
|
function FileIcon({ type }) {
|
|
1931
1948
|
const isImage = type.startsWith("image/");
|
|
1932
1949
|
const isPdf = type === "application/pdf";
|
|
1933
|
-
return /* @__PURE__ */ jsx17("div", { className: `w-8 h-8 rounded-lg flex items-center justify-center shrink-0 ${isImage ? "bg-purple-900/30 text-purple-400" : isPdf ? "bg-[var(--bui-error-muted,rgba(220,38,38,0.08))] text-[var(--bui-error-fg,#f87171)]" : "bg-[var(--bui-bg-hover,#3f3f46)] text-[var(--bui-fg-secondary,#a1a1aa)]"}`, children: /* @__PURE__ */ jsx17(
|
|
1950
|
+
return /* @__PURE__ */ jsx17("div", { className: `w-8 h-8 rounded-lg flex items-center justify-center shrink-0 ${isImage ? "bg-purple-900/30 text-purple-400" : isPdf ? "bg-[var(--bui-error-muted,rgba(220,38,38,0.08))] text-[var(--bui-error-fg,#f87171)]" : "bg-[var(--bui-bg-hover,#3f3f46)] text-[var(--bui-fg-secondary,#a1a1aa)]"}`, children: /* @__PURE__ */ jsx17(FileText, { size: 16, strokeWidth: 1.5 }) });
|
|
1934
1951
|
}
|
|
1935
1952
|
export {
|
|
1936
1953
|
Chat,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lantos1618/better-ui",
|
|
3
|
-
"version": "0.9.
|
|
3
|
+
"version": "0.9.3",
|
|
4
4
|
"description": "A minimal, type-safe AI-first UI framework for building tools",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.mjs",
|
|
@@ -92,6 +92,7 @@
|
|
|
92
92
|
"@ai-sdk/anthropic": "^3.0.0",
|
|
93
93
|
"@ai-sdk/google": "^3.0.0",
|
|
94
94
|
"jose": "^6.0.0",
|
|
95
|
+
"lucide-react": "^1.9.0",
|
|
95
96
|
"react": "^19.0.0",
|
|
96
97
|
"react-dom": "^19.0.0"
|
|
97
98
|
},
|
|
@@ -123,6 +124,7 @@
|
|
|
123
124
|
"jest": "^29.7.0",
|
|
124
125
|
"jest-environment-jsdom": "^30.3.0",
|
|
125
126
|
"jose": "^6.2.2",
|
|
127
|
+
"lucide-react": "^1.9.0",
|
|
126
128
|
"react": "^19.2.4",
|
|
127
129
|
"react-dom": "^19.2.4",
|
|
128
130
|
"ts-jest": "^29.4.9",
|