laif-ds
Version:
Design System di Laif con componenti React basati su principi di Atomic Design
273 lines (272 loc) • 9.86 kB
JavaScript
"use client";
import { jsxs as l, jsx as e } from "react/jsx-runtime";
import { useMemo as v, Suspense as h, useState as w } from "react";
import { cva as C } from "../../node_modules/class-variance-authority/dist/index.js";
import { motion as k } from "framer-motion";
import { cn as i } from "../../lib/utils.js";
import { Collapsible as U, CollapsibleTrigger as S, CollapsibleContent as T } from "./collapsible.js";
import { FilePreview as O } from "./file-preview.js";
import { MarkdownRenderer as x } from "./markdown-renderer.js";
import B from "../../node_modules/lucide-react/dist/esm/icons/chevron-right.js";
import M from "../../node_modules/lucide-react/dist/esm/icons/ban.js";
import R from "../../node_modules/lucide-react/dist/esm/icons/code-xml.js";
import $ from "../../node_modules/lucide-react/dist/esm/icons/terminal.js";
import j from "../../node_modules/lucide-react/dist/esm/icons/loader-circle.js";
const b = C(
"group/message relative break-words rounded-lg p-3 text-sm sm:max-w-[70%]",
{
variants: {
isUser: {
true: "bg-d-primary text-d-primary-foreground",
false: "bg-d-secondary text-d-foreground"
},
animation: {
none: "",
slide: "duration-300 animate-in fade-in-0",
scale: "duration-300 animate-in fade-in-0 zoom-in-75",
fade: "duration-500 animate-in fade-in-0"
}
},
compoundVariants: [
{
isUser: !0,
animation: "slide",
class: "slide-in-from-right"
},
{
isUser: !1,
animation: "slide",
class: "slide-in-from-left"
},
{
isUser: !0,
animation: "scale",
class: "origin-bottom-right"
},
{
isUser: !1,
animation: "scale",
class: "origin-bottom-left"
}
]
}
), Z = ({
role: s,
content: a,
createdAt: r,
showTimeStamp: c = !1,
animation: d = "scale",
actions: m,
experimental_attachments: f,
toolInvocations: u,
parts: p
}) => {
const N = v(() => f == null ? void 0 : f.map((n) => {
const o = F(n.url);
return new File([o], n.name ?? "Unknown");
}), [f]), t = s === "user", g = r == null ? void 0 : r.toLocaleTimeString("en-US", {
hour: "2-digit",
minute: "2-digit"
});
return t ? /* @__PURE__ */ l(
"div",
{
className: i("flex flex-col", t ? "items-end" : "items-start"),
children: [
N ? /* @__PURE__ */ e("div", { className: "mb-1 flex flex-wrap gap-2", children: N.map((n, o) => /* @__PURE__ */ e(O, { file: n }, o)) }) : null,
/* @__PURE__ */ e("div", { className: i(b({ isUser: t, animation: d })), children: /* @__PURE__ */ e(
h,
{
fallback: /* @__PURE__ */ e("div", { className: "text-d-secondary-foreground", children: "Caricamento..." }),
children: /* @__PURE__ */ e(x, { children: a })
}
) }),
c && r ? /* @__PURE__ */ e(
"time",
{
dateTime: r.toISOString(),
className: i(
"mt-1 block px-1 text-xs opacity-50",
d !== "none" && "animate-in fade-in-0 duration-500"
),
children: g
}
) : null
]
}
) : p && p.length > 0 ? p.map((n, o) => n.type === "text" ? /* @__PURE__ */ l(
"div",
{
className: i(
"flex flex-col",
t ? "items-end" : "items-start"
),
children: [
/* @__PURE__ */ l("div", { className: i(b({ isUser: t, animation: d })), children: [
/* @__PURE__ */ e(
h,
{
fallback: /* @__PURE__ */ e("div", { className: "text-d-secondary-foreground", children: "Caricamento..." }),
children: /* @__PURE__ */ e(x, { children: n.text })
}
),
m ? /* @__PURE__ */ e("div", { className: "bg-d-background text-d-foreground absolute right-2 -bottom-4 flex space-x-1 rounded-lg border p-1 opacity-0 transition-opacity group-hover/message:opacity-100", children: m }) : null
] }),
c && r ? /* @__PURE__ */ e(
"time",
{
dateTime: r.toISOString(),
className: i(
"mt-1 block px-1 text-xs opacity-50",
d !== "none" && "animate-in fade-in-0 duration-500"
),
children: g
}
) : null
]
},
`text-${o}`
) : n.type === "reasoning" ? /* @__PURE__ */ e(L, { part: n }, `reasoning-${o}`) : n.type === "tool-invocation" ? /* @__PURE__ */ e(
y,
{
toolInvocations: [n.toolInvocation]
},
`tool-${o}`
) : null) : u && u.length > 0 ? /* @__PURE__ */ e(y, { toolInvocations: u }) : /* @__PURE__ */ l("div", { className: i("flex flex-col", t ? "items-end" : "items-start"), children: [
/* @__PURE__ */ l("div", { className: i(b({ isUser: t, animation: d })), children: [
/* @__PURE__ */ e(
h,
{
fallback: /* @__PURE__ */ e("div", { className: "text-d-secondary-foreground", children: "Caricamento..." }),
children: /* @__PURE__ */ e(x, { children: a })
}
),
m ? /* @__PURE__ */ e("div", { className: "bg-d-background text-foreground absolute right-2 -bottom-4 flex space-x-1 rounded-lg border p-1 opacity-0 transition-opacity group-hover/message:opacity-100", children: m }) : null
] }),
c && r ? /* @__PURE__ */ e(
"time",
{
dateTime: r.toISOString(),
className: i(
"mt-1 block px-1 text-xs opacity-50",
d !== "none" && "animate-in fade-in-0 duration-500"
),
children: g
}
) : null
] });
};
function F(s) {
const a = s.split(",")[1], r = Buffer.from(a, "base64");
return new Uint8Array(r);
}
const L = ({ part: s }) => {
const [a, r] = w(!1);
return /* @__PURE__ */ e("div", { className: "mb-2 flex flex-col items-start sm:max-w-[70%]", children: /* @__PURE__ */ l(
U,
{
open: a,
onOpenChange: r,
className: "group bg-d-secondary/50 w-full overflow-hidden rounded-lg border",
children: [
/* @__PURE__ */ e("div", { className: "flex items-center p-2", children: /* @__PURE__ */ e(S, { asChild: !0, children: /* @__PURE__ */ l("button", { className: "text-d-secondary-foreground hover:text-d-foreground flex items-center gap-2 text-sm", children: [
/* @__PURE__ */ e(B, { className: "h-4 w-4 transition-transform group-data-[state=open]:rotate-90" }),
/* @__PURE__ */ e("span", { children: "Thinking" })
] }) }) }),
/* @__PURE__ */ e(T, { forceMount: !0, children: /* @__PURE__ */ e(
k.div,
{
initial: !1,
animate: a ? "open" : "closed",
variants: {
open: { height: "auto", opacity: 1 },
closed: { height: 0, opacity: 0 }
},
transition: { duration: 0.3, ease: [0.04, 0.62, 0.23, 0.98] },
className: "border-t",
children: /* @__PURE__ */ e("div", { className: "p-2", children: /* @__PURE__ */ e("div", { className: "text-xs whitespace-pre-wrap", children: s.reasoning }) })
}
) })
]
}
) });
};
function y({
toolInvocations: s
}) {
return s != null && s.length ? /* @__PURE__ */ e("div", { className: "flex flex-col items-start gap-2", children: s.map((a, r) => {
if (a.state === "result" && a.result.__cancelled === !0)
return /* @__PURE__ */ l(
"div",
{
className: "bg-d-secondary/50 text-d-secondary-foreground flex items-center gap-2 rounded-lg border px-3 py-2 text-sm",
children: [
/* @__PURE__ */ e(M, { className: "h-4 w-4" }),
/* @__PURE__ */ l("span", { children: [
"Cancelled",
" ",
/* @__PURE__ */ l("span", { className: "font-mono", children: [
"`",
a.toolName,
"`"
] })
] })
]
},
r
);
switch (a.state) {
case "partial-call":
case "call":
return /* @__PURE__ */ l(
"div",
{
className: "bg-d-secondary/50 text-d-secondary-foreground flex items-center gap-2 rounded-lg border px-3 py-2 text-sm",
children: [
/* @__PURE__ */ e($, { className: "h-4 w-4" }),
/* @__PURE__ */ l("span", { children: [
"Calling",
" ",
/* @__PURE__ */ l("span", { className: "font-mono", children: [
"`",
a.toolName,
"`"
] }),
"..."
] }),
/* @__PURE__ */ e(j, { className: "h-3 w-3 animate-spin" })
]
},
r
);
case "result":
return /* @__PURE__ */ l(
"div",
{
className: "bg-d-secondary/50 flex flex-col gap-1.5 rounded-lg border px-3 py-2 text-sm",
children: [
/* @__PURE__ */ l("div", { className: "text-d-secondary-foreground flex items-center gap-2", children: [
/* @__PURE__ */ e(R, { className: "h-4 w-4" }),
/* @__PURE__ */ l("span", { children: [
"Result from",
" ",
/* @__PURE__ */ l("span", { className: "font-mono", children: [
"`",
a.toolName,
"`"
] })
] })
] }),
/* @__PURE__ */ e("pre", { className: "text-d-foreground overflow-x-auto whitespace-pre-wrap", children: JSON.stringify(a.result, null, 2) })
]
},
r
);
default:
return null;
}
}) }) : null;
}
export {
Z as ChatMessage
};