laif-ds/dist/components/ui/chat.js

Design System di Laif con componenti React basati su principi di Atomic Design

"use client";
import { jsxs as v, Fragment as y, jsx as t } from "react/jsx-runtime";
import { forwardRef as A, useRef as M, useCallback as k, useState as O } from "react";
import { cn as q } from "../../lib/utils.js";
import { useAutoScroll as H } from "../../hooks/use-auto-scroll.js";
import { Button as N } from "./button.js";
import { CopyButton as S } from "./copy-button.js";
import { MessageInput as J } from "./message-input.js";
import { MessageList as K } from "./message-list.js";
import { PromptSuggestions as Q } from "./prompt-suggestions.js";
import { Typo as z } from "./typo.js";
import j from "../../node_modules/lucide-react/dist/esm/icons/save.js";
import V from "../../node_modules/lucide-react/dist/esm/icons/thumbs-up.js";
import W from "../../node_modules/lucide-react/dist/esm/icons/thumbs-down.js";
import X from "../../node_modules/lucide-react/dist/esm/icons/arrow-down.js";
function Y({
  messages: e,
  welcomeTitle: n = "Da dove iniziamo?",
  handleSubmit: i,
  input: m,
  handleInputChange: c,
  stop: s,
  isGenerating: u,
  append: f,
  suggestions: h,
  className: D,
  onRateResponse: w,
  setMessages: x,
  transcribeAudio: L,
  allowAttachments: g = !1,
  onEdit: B,
  onMessageSave: d
}) {
  const P = e.at(-1), T = e.length === 0, I = P?.role === "user", C = M(e);
  C.current = e;
  const U = k(() => {
    if (s?.(), !x) return;
    const o = [...C.current], l = o.findLast(
      (a) => a.role === "assistant"
    );
    if (!l) return;
    let p = !1, b = { ...l };
    if (l.toolInvocations) {
      const a = l.toolInvocations.map(
        (r) => r.state === "call" ? (p = !0, {
          ...r,
          state: "result",
          result: {
            content: "Tool execution was cancelled",
            __cancelled: !0
            // Special marker to indicate cancellation
          }
        }) : r
      );
      p && (b = {
        ...b,
        toolInvocations: a
      });
    }
    if (l.parts && l.parts.length > 0) {
      const a = l.parts.map((r) => r.type === "tool-invocation" && r.toolInvocation && r.toolInvocation.state === "call" ? (p = !0, {
        ...r,
        toolInvocation: {
          ...r.toolInvocation,
          state: "result",
          result: {
            content: "Tool execution was cancelled",
            __cancelled: !0
          }
        }
      }) : r);
      p && (b = {
        ...b,
        parts: a
      });
    }
    if (p) {
      const a = o.findIndex(
        (r) => r.id === l.id
      );
      a !== -1 && (o[a] = b, x(o));
    }
  }, [s, x, C]), E = k(
    (o) => ({
      actions: w ? /* @__PURE__ */ v(y, { children: [
        /* @__PURE__ */ t("div", { className: "border-d-border border-r pr-1", children: /* @__PURE__ */ t(
          S,
          {
            content: o.content,
            copyMessage: "Copied response to clipboard!"
          }
        ) }),
        d && /* @__PURE__ */ t("div", { className: "border-d-border border-r pr-1", children: /* @__PURE__ */ t(
          N,
          {
            size: "icon",
            variant: "ghost",
            className: "h-6 w-6",
            onClick: () => d(o.id, o.content),
            title: "Save message",
            children: /* @__PURE__ */ t(j, { className: "h-4 w-4" })
          }
        ) }),
        /* @__PURE__ */ t(
          N,
          {
            size: "icon",
            variant: "ghost",
            className: "h-6 w-6",
            onClick: () => w(o.id, "thumbs-up"),
            children: /* @__PURE__ */ t(V, { className: "h-4 w-4" })
          }
        ),
        /* @__PURE__ */ t(
          N,
          {
            size: "icon",
            variant: "ghost",
            className: "h-6 w-6",
            onClick: () => w(o.id, "thumbs-down"),
            children: /* @__PURE__ */ t(W, { className: "h-4 w-4" })
          }
        )
      ] }) : /* @__PURE__ */ v(y, { children: [
        /* @__PURE__ */ t(
          S,
          {
            content: o.content,
            copyMessage: "Copied response to clipboard!"
          }
        ),
        d && /* @__PURE__ */ t("div", { className: "border-d-border border-l pl-1", children: /* @__PURE__ */ t(
          N,
          {
            size: "icon",
            variant: "ghost",
            className: "h-6 w-6",
            onClick: () => d(o.id, o.content),
            title: "Save message",
            children: /* @__PURE__ */ t(j, { className: "h-4 w-4" })
          }
        ) })
      ] }),
      onMessageSave: d
    }),
    [w, d]
  );
  return /* @__PURE__ */ v(F, { className: D, children: [
    T && /* @__PURE__ */ t("div", { className: "flex flex-1 flex-col items-center justify-center p-8", children: f && h && /* @__PURE__ */ v(y, { children: [
      /* @__PURE__ */ t(z, { variant: "h3", className: "mb-8 text-center", children: n }),
      /* @__PURE__ */ t(
        Q,
        {
          label: "",
          append: f,
          suggestions: h
        }
      )
    ] }) }),
    e.length > 0 ? /* @__PURE__ */ t(Z, { messages: e, children: /* @__PURE__ */ t(
      K,
      {
        messages: e,
        isTyping: I,
        messageOptions: E,
        onEdit: B,
        onMessageSave: d
      }
    ) }) : null,
    T && !f && !h && /* @__PURE__ */ t(z, { variant: "h3", className: "mb-8 text-center", children: n }),
    /* @__PURE__ */ t(
      _,
      {
        className: "flex-shrink-0",
        isPending: u || I,
        handleSubmit: i,
        children: ({ files: o, setFiles: l }) => /* @__PURE__ */ t(
          J,
          {
            value: m,
            onChange: c,
            allowAttachments: g,
            files: o,
            setFiles: l,
            stop: U,
            isGenerating: u,
            transcribeAudio: L
          }
        )
      }
    )
  ] });
}
Y.displayName = "Chat";
function Z({
  messages: e,
  children: n
}) {
  const {
    containerRef: i,
    scrollToBottom: m,
    handleScroll: c,
    shouldAutoScroll: s,
    handleTouchStart: u
  } = H([e]);
  return /* @__PURE__ */ v(
    "div",
    {
      className: "relative flex-1 overflow-y-auto pb-4",
      ref: i,
      onScroll: c,
      onTouchStart: u,
      children: [
        /* @__PURE__ */ t("div", { className: "max-w-full", children: n }),
        !s && /* @__PURE__ */ t("div", { className: "pointer-events-none absolute right-0 bottom-0 left-0 flex items-end justify-end", children: /* @__PURE__ */ t("div", { className: "sticky bottom-0 left-0 flex w-full justify-end", children: /* @__PURE__ */ t(
          N,
          {
            onClick: m,
            className: "animate-in fade-in-0 slide-in-from-bottom-1 pointer-events-auto h-8 w-8 rounded-full ease-in-out",
            size: "icon",
            variant: "ghost",
            children: /* @__PURE__ */ t(X, { className: "h-4 w-4" })
          }
        ) }) })
      ]
    }
  );
}
const F = A(({ className: e, ...n }, i) => /* @__PURE__ */ t(
  "div",
  {
    ref: i,
    className: q("flex h-full max-h-full w-full flex-col", e),
    ...n
  }
));
F.displayName = "ChatContainer";
const _ = A(
  ({ children: e, handleSubmit: n, className: i }, m) => {
    const [c, s] = O(null);
    return /* @__PURE__ */ t("form", { ref: m, onSubmit: (f) => {
      if (!c) {
        n(f);
        return;
      }
      const h = $(c);
      n(f, { experimental_attachments: h }), s(null);
    }, className: i, children: e({ files: c, setFiles: s }) });
  }
);
_.displayName = "ChatForm";
function $(e) {
  if (typeof window > "u")
    return {};
  const n = new DataTransfer();
  for (const i of Array.from(e))
    n.items.add(i);
  return n.files;
}
export {
  Y as Chat,
  F as ChatContainer,
  _ as ChatForm,
  Z as ChatMessages
};