laif-ds 0.1.1 → 0.1.3

package/dist/components/ui/menubar.js

@@ -0,0 +1,252 @@
+"use client";
+import { j as t } from "../../_virtual/jsx-runtime.js";
+import * as n from "@radix-ui/react-menubar";
+import { CheckIcon as i, CircleIcon as u, ChevronRightIcon as c } from "lucide-react";
+import { cn as o } from "../../lib/utils.js";
+function p({
+  className: e,
+  ...a
+}) {
+  return /* @__PURE__ */ t.jsx(
+    n.Root,
+    {
+      "data-slot": "menubar",
+      className: o(
+        "bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs",
+        e
+      ),
+      ...a
+    }
+  );
+}
+function x({
+  ...e
+}) {
+  return /* @__PURE__ */ t.jsx(n.Menu, { "data-slot": "menubar-menu", ...e });
+}
+function g({
+  ...e
+}) {
+  return /* @__PURE__ */ t.jsx(n.Group, { "data-slot": "menubar-group", ...e });
+}
+function l({
+  ...e
+}) {
+  return /* @__PURE__ */ t.jsx(n.Portal, { "data-slot": "menubar-portal", ...e });
+}
+function v({
+  ...e
+}) {
+  return /* @__PURE__ */ t.jsx(n.RadioGroup, { "data-slot": "menubar-radio-group", ...e });
+}
+function h({
+  className: e,
+  ...a
+}) {
+  return /* @__PURE__ */ t.jsx(
+    n.Trigger,
+    {
+      "data-slot": "menubar-trigger",
+      className: o(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none",
+        e
+      ),
+      ...a
+    }
+  );
+}
+function j({
+  className: e,
+  align: a = "start",
+  alignOffset: r = -4,
+  sideOffset: s = 8,
+  ...d
+}) {
+  return /* @__PURE__ */ t.jsx(l, { children: /* @__PURE__ */ t.jsx(
+    n.Content,
+    {
+      "data-slot": "menubar-content",
+      align: a,
+      alignOffset: r,
+      sideOffset: s,
+      className: o(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md",
+        e
+      ),
+      ...d
+    }
+  ) });
+}
+function M({
+  className: e,
+  inset: a,
+  variant: r = "default",
+  ...s
+}) {
+  return /* @__PURE__ */ t.jsx(
+    n.Item,
+    {
+      "data-slot": "menubar-item",
+      "data-inset": a,
+      "data-variant": r,
+      className: o(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        e
+      ),
+      ...s
+    }
+  );
+}
+function z({
+  className: e,
+  children: a,
+  checked: r,
+  ...s
+}) {
+  return /* @__PURE__ */ t.jsxs(
+    n.CheckboxItem,
+    {
+      "data-slot": "menubar-checkbox-item",
+      className: o(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        e
+      ),
+      checked: r,
+      ...s,
+      children: [
+        /* @__PURE__ */ t.jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ t.jsx(n.ItemIndicator, { children: /* @__PURE__ */ t.jsx(i, { className: "size-4" }) }) }),
+        a
+      ]
+    }
+  );
+}
+function N({
+  className: e,
+  children: a,
+  ...r
+}) {
+  return /* @__PURE__ */ t.jsxs(
+    n.RadioItem,
+    {
+      "data-slot": "menubar-radio-item",
+      className: o(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        e
+      ),
+      ...r,
+      children: [
+        /* @__PURE__ */ t.jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ t.jsx(n.ItemIndicator, { children: /* @__PURE__ */ t.jsx(u, { className: "size-2 fill-current" }) }) }),
+        a
+      ]
+    }
+  );
+}
+function I({
+  className: e,
+  inset: a,
+  ...r
+}) {
+  return /* @__PURE__ */ t.jsx(
+    n.Label,
+    {
+      "data-slot": "menubar-label",
+      "data-inset": a,
+      className: o(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        e
+      ),
+      ...r
+    }
+  );
+}
+function y({
+  className: e,
+  ...a
+}) {
+  return /* @__PURE__ */ t.jsx(
+    n.Separator,
+    {
+      "data-slot": "menubar-separator",
+      className: o("bg-border -mx-1 my-1 h-px", e),
+      ...a
+    }
+  );
+}
+function k({
+  className: e,
+  ...a
+}) {
+  return /* @__PURE__ */ t.jsx(
+    "span",
+    {
+      "data-slot": "menubar-shortcut",
+      className: o(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        e
+      ),
+      ...a
+    }
+  );
+}
+function _({
+  ...e
+}) {
+  return /* @__PURE__ */ t.jsx(n.Sub, { "data-slot": "menubar-sub", ...e });
+}
+function w({
+  className: e,
+  inset: a,
+  children: r,
+  ...s
+}) {
+  return /* @__PURE__ */ t.jsxs(
+    n.SubTrigger,
+    {
+      "data-slot": "menubar-sub-trigger",
+      "data-inset": a,
+      className: o(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8",
+        e
+      ),
+      ...s,
+      children: [
+        r,
+        /* @__PURE__ */ t.jsx(c, { className: "ml-auto h-4 w-4" })
+      ]
+    }
+  );
+}
+function C({
+  className: e,
+  ...a
+}) {
+  return /* @__PURE__ */ t.jsx(
+    n.SubContent,
+    {
+      "data-slot": "menubar-sub-content",
+      className: o(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        e
+      ),
+      ...a
+    }
+  );
+}
+export {
+  p as Menubar,
+  z as MenubarCheckboxItem,
+  j as MenubarContent,
+  g as MenubarGroup,
+  M as MenubarItem,
+  I as MenubarLabel,
+  x as MenubarMenu,
+  l as MenubarPortal,
+  v as MenubarRadioGroup,
+  N as MenubarRadioItem,
+  y as MenubarSeparator,
+  k as MenubarShortcut,
+  _ as MenubarSub,
+  C as MenubarSubContent,
+  w as MenubarSubTrigger,
+  h as MenubarTrigger
+};

package/dist/components/ui/message-input.js

@@ -0,0 +1,336 @@
+"use client";
+import { j as e } from "../../_virtual/jsx-runtime.js";
+import { useState as w, useEffect as S, useRef as X } from "react";
+import { AnimatePresence as y, motion as b } from "framer-motion";
+import { Paperclip as R, Mic as Y, Square as Z, ArrowUp as _, Info as $, Loader2 as K } from "lucide-react";
+import { omit as T } from "remeda";
+import { cn as C } from "../../lib/utils.js";
+import { useAudioRecording as G } from "../../hooks/use-audio-recording.js";
+import { useAutosizeTextArea as ee } from "../../hooks/use-autosize-textarea.js";
+import { AudioVisualizer as te } from "./audio-visualizer.js";
+import { Button as g } from "./button.js";
+import { FilePreview as ie } from "./file-preview.js";
+import { InterruptPrompt as re } from "./interrupt-prompt.js";
+function ae({
+  placeholder: a = "Ask AI...",
+  className: l,
+  onKeyDown: s,
+  submitOnEnter: o = !0,
+  stop: u,
+  isGenerating: d,
+  enableInterrupt: j = !0,
+  transcribeAudio: I,
+  ...i
+}) {
+  var D;
+  const [F, p] = w(!1), [v, f] = w(!1), {
+    isListening: P,
+    isSpeechSupported: L,
+    isRecording: A,
+    isTranscribing: M,
+    audioStream: O,
+    toggleListening: E,
+    stopRecording: N
+  } = G({
+    transcribeAudio: I,
+    onTranscriptionComplete: (t) => {
+      var r;
+      (r = i.onChange) == null || r.call(i, { target: { value: t } });
+    }
+  });
+  S(() => {
+    d || f(!1);
+  }, [d]);
+  const x = (t) => {
+    i.allowAttachments && i.setFiles((r) => r === null ? t : t === null ? r : [...r, ...t]);
+  }, q = (t) => {
+    i.allowAttachments === !0 && (t.preventDefault(), p(!0));
+  }, H = (t) => {
+    i.allowAttachments === !0 && (t.preventDefault(), p(!1));
+  }, U = (t) => {
+    if (p(!1), i.allowAttachments !== !0) return;
+    t.preventDefault();
+    const r = t.dataTransfer;
+    r.files.length && x(Array.from(r.files));
+  }, V = (t) => {
+    var z;
+    const r = (z = t.clipboardData) == null ? void 0 : z.items;
+    if (!r) return;
+    const n = t.clipboardData.getData("text");
+    if (n && n.length > 500 && i.allowAttachments) {
+      t.preventDefault();
+      const m = new Blob([n], { type: "text/plain" }), Q = new File([m], "Pasted text", {
+        type: "text/plain",
+        lastModified: Date.now()
+      });
+      x([Q]);
+      return;
+    }
+    const c = Array.from(r).map((m) => m.getAsFile()).filter((m) => m !== null);
+    i.allowAttachments && c.length > 0 && x(c);
+  }, B = (t) => {
+    var r, n, c;
+    if (o && t.key === "Enter" && !t.shiftKey) {
+      if (t.preventDefault(), d && u && j) {
+        if (v)
+          u(), f(!1), (r = t.currentTarget.form) == null || r.requestSubmit();
+        else if (i.value || i.allowAttachments && ((n = i.files) != null && n.length)) {
+          f(!0);
+          return;
+        }
+      }
+      (c = t.currentTarget.form) == null || c.requestSubmit();
+    }
+    s == null || s(t);
+  }, h = X(null), [W, J] = w(0);
+  S(() => {
+    h.current && J(h.current.offsetHeight);
+  }, [i.value]);
+  const k = i.allowAttachments && i.files && i.files.length > 0;
+  return ee({
+    ref: h,
+    maxHeight: 240,
+    borderWidth: 1,
+    dependencies: [i.value, k]
+  }), /* @__PURE__ */ e.jsxs(
+    "div",
+    {
+      className: "relative flex w-full",
+      onDragOver: q,
+      onDragLeave: H,
+      onDrop: U,
+      children: [
+        j && /* @__PURE__ */ e.jsx(
+          re,
+          {
+            isOpen: v,
+            close: () => f(!1)
+          }
+        ),
+        /* @__PURE__ */ e.jsx(
+          oe,
+          {
+            isVisible: A,
+            onStopRecording: N
+          }
+        ),
+        /* @__PURE__ */ e.jsx("div", { className: "relative flex w-full items-center space-x-2", children: /* @__PURE__ */ e.jsxs("div", { className: "relative flex-1", children: [
+          /* @__PURE__ */ e.jsx(
+            "textarea",
+            {
+              "aria-label": "Write your prompt here",
+              placeholder: a,
+              ref: h,
+              onPaste: V,
+              onKeyDown: B,
+              className: C(
+                "z-10 w-full grow resize-none rounded-xl border border-input bg-background p-3 pr-24 text-sm ring-offset-background transition-[border] placeholder:text-muted-foreground focus-visible:border-primary focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+                k && "pb-16",
+                l
+              ),
+              ...i.allowAttachments ? T(i, ["allowAttachments", "files", "setFiles"]) : T(i, ["allowAttachments"])
+            }
+          ),
+          i.allowAttachments && /* @__PURE__ */ e.jsx("div", { className: "absolute inset-x-3 bottom-2 z-20 overflow-x-scroll py-3 [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden", children: /* @__PURE__ */ e.jsx("div", { className: "flex space-x-3", children: /* @__PURE__ */ e.jsx(y, { mode: "popLayout", children: (D = i.files) == null ? void 0 : D.map((t) => /* @__PURE__ */ e.jsx(
+            ie,
+            {
+              file: t,
+              onRemove: () => {
+                i.setFiles((r) => {
+                  if (!r) return null;
+                  const n = Array.from(r).filter(
+                    (c) => c !== t
+                  );
+                  return n.length === 0 ? null : n;
+                });
+              }
+            },
+            t.name + String(t.lastModified)
+          )) }) }) })
+        ] }) }),
+        /* @__PURE__ */ e.jsxs("div", { className: "absolute right-3 top-3 z-20 flex gap-2", children: [
+          i.allowAttachments && /* @__PURE__ */ e.jsx(
+            g,
+            {
+              type: "button",
+              size: "icon",
+              variant: "outline",
+              className: "h-8 w-8",
+              "aria-label": "Attach a file",
+              onClick: async () => {
+                const t = await le();
+                x(t);
+              },
+              children: /* @__PURE__ */ e.jsx(R, { className: "h-4 w-4" })
+            }
+          ),
+          L && /* @__PURE__ */ e.jsx(
+            g,
+            {
+              type: "button",
+              variant: "outline",
+              className: C("h-8 w-8", P && "text-primary"),
+              "aria-label": "Voice input",
+              size: "icon",
+              onClick: E,
+              children: /* @__PURE__ */ e.jsx(Y, { className: "h-4 w-4" })
+            }
+          ),
+          d && u ? /* @__PURE__ */ e.jsx(
+            g,
+            {
+              type: "button",
+              size: "icon",
+              className: "h-8 w-8",
+              "aria-label": "Stop generating",
+              onClick: u,
+              children: /* @__PURE__ */ e.jsx(Z, { className: "h-3 w-3 animate-pulse", fill: "currentColor" })
+            }
+          ) : /* @__PURE__ */ e.jsx(
+            g,
+            {
+              type: "submit",
+              size: "icon",
+              className: "h-8 w-8 transition-opacity",
+              "aria-label": "Send message",
+              disabled: i.value === "" || d,
+              children: /* @__PURE__ */ e.jsx(_, { className: "h-5 w-5" })
+            }
+          )
+        ] }),
+        i.allowAttachments && /* @__PURE__ */ e.jsx(ne, { isDragging: F }),
+        /* @__PURE__ */ e.jsx(
+          ce,
+          {
+            isRecording: A,
+            isTranscribing: M,
+            audioStream: O,
+            textAreaHeight: W,
+            onStopRecording: N
+          }
+        )
+      ]
+    }
+  );
+}
+ae.displayName = "MessageInput";
+function ne({ isDragging: a }) {
+  return /* @__PURE__ */ e.jsx(y, { children: a && /* @__PURE__ */ e.jsxs(
+    b.div,
+    {
+      className: "pointer-events-none absolute inset-0 z-20 flex items-center justify-center space-x-2 rounded-xl border border-dashed border-border bg-background text-sm text-muted-foreground",
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      exit: { opacity: 0 },
+      transition: { duration: 0.2 },
+      "aria-hidden": !0,
+      children: [
+        /* @__PURE__ */ e.jsx(R, { className: "h-4 w-4" }),
+        /* @__PURE__ */ e.jsx("span", { children: "Drop your files here to attach them." })
+      ]
+    }
+  ) });
+}
+function le() {
+  if (typeof document > "u")
+    return Promise.resolve(null);
+  const a = document.createElement("input");
+  return a.type = "file", a.multiple = !0, a.accept = "*/*", a.click(), new Promise((l) => {
+    a.onchange = (s) => {
+      const o = s.currentTarget.files;
+      if (o) {
+        l(Array.from(o));
+        return;
+      }
+      l(null);
+    };
+  });
+}
+function se() {
+  return /* @__PURE__ */ e.jsxs(
+    b.div,
+    {
+      className: "flex h-full w-full flex-col items-center justify-center rounded-xl bg-background/80 backdrop-blur-sm",
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      exit: { opacity: 0 },
+      transition: { duration: 0.2 },
+      children: [
+        /* @__PURE__ */ e.jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ e.jsx(K, { className: "h-8 w-8 animate-spin text-primary" }),
+          /* @__PURE__ */ e.jsx(
+            b.div,
+            {
+              className: "absolute inset-0 h-8 w-8 animate-pulse rounded-full bg-primary/20",
+              initial: { scale: 0.8, opacity: 0 },
+              animate: { scale: 1.2, opacity: 1 },
+              transition: {
+                duration: 1,
+                repeat: 1 / 0,
+                repeatType: "reverse",
+                ease: "easeInOut"
+              }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e.jsx("p", { className: "mt-4 text-sm font-medium text-muted-foreground", children: "Transcribing audio..." })
+      ]
+    }
+  );
+}
+function oe({ isVisible: a, onStopRecording: l }) {
+  return /* @__PURE__ */ e.jsx(y, { children: a && /* @__PURE__ */ e.jsx(
+    b.div,
+    {
+      initial: { top: 0, filter: "blur(5px)" },
+      animate: {
+        top: -40,
+        filter: "blur(0px)",
+        transition: {
+          type: "spring",
+          filter: { type: "tween" }
+        }
+      },
+      exit: { top: 0, filter: "blur(5px)" },
+      className: "absolute left-1/2 flex -translate-x-1/2 cursor-pointer overflow-hidden whitespace-nowrap rounded-full border bg-background py-1 text-center text-sm text-muted-foreground",
+      onClick: l,
+      children: /* @__PURE__ */ e.jsxs("span", { className: "mx-2.5 flex items-center", children: [
+        /* @__PURE__ */ e.jsx($, { className: "mr-2 h-3 w-3" }),
+        "Click to finish recording"
+      ] })
+    }
+  ) });
+}
+function ce({
+  isRecording: a,
+  isTranscribing: l,
+  audioStream: s,
+  textAreaHeight: o,
+  onStopRecording: u
+}) {
+  return a ? /* @__PURE__ */ e.jsx(
+    "div",
+    {
+      className: "absolute inset-[1px] z-50 overflow-hidden rounded-xl",
+      style: { height: o - 2 },
+      children: /* @__PURE__ */ e.jsx(
+        te,
+        {
+          stream: s,
+          isRecording: a,
+          onClick: u
+        }
+      )
+    }
+  ) : l ? /* @__PURE__ */ e.jsx(
+    "div",
+    {
+      className: "absolute inset-[1px] z-50 overflow-hidden rounded-xl",
+      style: { height: o - 2 },
+      children: /* @__PURE__ */ e.jsx(se, {})
+    }
+  ) : null;
+}
+export {
+  ae as MessageInput
+};

package/dist/components/ui/message-list.js

@@ -0,0 +1,29 @@
+"use client";
+import { j as i } from "../../_virtual/jsx-runtime.js";
+import { ChatMessage as p } from "./chat-message.js";
+import { TypingIndicator as c } from "./typing-indicator.js";
+function u({
+  messages: r,
+  showTimeStamps: e = !0,
+  isTyping: s = !1,
+  messageOptions: t
+}) {
+  return /* @__PURE__ */ i.jsxs("div", { className: "space-y-4 overflow-visible", children: [
+    r.map((o, n) => {
+      const a = typeof t == "function" ? t(o) : t;
+      return /* @__PURE__ */ i.jsx(
+        p,
+        {
+          showTimeStamp: e,
+          ...o,
+          ...a
+        },
+        n
+      );
+    }),
+    s && /* @__PURE__ */ i.jsx(c, {})
+  ] });
+}
+export {
+  u as MessageList
+};