@cognite/aura 0.1.0

package/dist/components/ui/core/prompt-input/prompt-input.js

@@ -0,0 +1,402 @@
+import { jsx as o, jsxs as w } from "react/jsx-runtime";
+import { createContext as H, forwardRef as p, useContext as b, useState as N, useCallback as A, useMemo as E } from "react";
+import { IconSend as D, IconLoader2 as z, IconSquare as B, IconX as L, IconPlus as k, IconInfoCircle as G } from "@tabler/icons-react";
+import { cn as r } from "../../../../lib/utils.js";
+import { Command as F, CommandInput as j, CommandList as K, CommandEmpty as V, CommandGroup as q, CommandItem as R, CommandSeparator as O } from "../command/command.js";
+import { DropdownMenu as W, DropdownMenuTrigger as X, DropdownMenuContent as J, DropdownMenuItem as Q } from "../dropdown-menu/dropdown-menu.js";
+import { HelperText as C } from "../helper-text/helper-text.js";
+import { HoverCard as U, HoverCardTrigger as Y, HoverCardContent as Z } from "../hover-card/hover-card.js";
+import { InputGroupTextarea as _, InputGroupAddon as x, InputGroupButton as h, InputGroup as $ } from "../input-group/input-group.js";
+import { Select as tt, SelectTrigger as et, SelectContent as ot, SelectItem as nt, SelectValue as rt } from "../select/select.js";
+const g = H(
+  null
+), Jt = () => {
+  const t = b(g);
+  if (!t)
+    throw new Error(
+      "Wrap your component inside <PromptInputProvider> to use usePromptInputController()."
+    );
+  return t;
+}, v = () => b(g);
+function at({
+  initialInput: t = "",
+  children: e
+}) {
+  const [n, a] = N(t), l = A(() => a(""), []), s = E(
+    () => ({
+      textInput: {
+        value: n,
+        setInput: a,
+        clear: l
+      }
+    }),
+    [n, l]
+  );
+  return /* @__PURE__ */ o(g.Provider, { value: s, children: e });
+}
+at.displayName = "PromptInputProvider";
+const pt = ({
+  className: t,
+  onSubmit: e,
+  helperText: n,
+  errorMessage: a,
+  children: l,
+  ...s
+}) => {
+  const m = v(), [u, d] = N(null), P = (y) => {
+    y.preventDefault();
+    const f = y.currentTarget, M = m ? m.textInput.value : (() => {
+      const I = new FormData(f).get("message");
+      return typeof I == "string" ? I : "";
+    })();
+    m || f.reset();
+    try {
+      const c = e({ text: M }, y);
+      c instanceof Promise ? c.then(() => {
+        d(null), m?.textInput.clear();
+      }).catch((I) => {
+        console.error("PromptInput: Submission error:", I), d(
+          I instanceof Error ? I.message : "Failed to submit. Please try again."
+        );
+      }) : (d(null), m?.textInput.clear());
+    } catch (c) {
+      console.error("PromptInput: Submission error:", c), d(
+        c instanceof Error ? c.message : "Failed to submit. Please try again."
+      );
+    }
+  }, S = n === !1 ? null : n ?? /* @__PURE__ */ o(C, { size: "xs", icon: /* @__PURE__ */ o(G, {}), children: "AI doesn't always get it right. Be sure to check results" });
+  return /* @__PURE__ */ w("div", { className: "w-full flex flex-col gap-2", children: [
+    /* @__PURE__ */ o(
+      "form",
+      {
+        "data-slot": "prompt-input",
+        className: r("w-full", t),
+        onSubmit: P,
+        ...s,
+        children: /* @__PURE__ */ o($, { className: "shadow-none rounded-xl has-[[data-slot=input-group-control]:read-only]:border-input hover:has-[[data-slot=input-group-control]:read-only]:border-input hover:has-[[data-slot=input-group-control]:read-only]:bg-background hover:has-[[data-slot=input-group-control]:read-only]:text-current", children: l })
+      }
+    ),
+    a || u ? /* @__PURE__ */ o(C, { size: "xs", isError: !0, children: a || u }) : S
+  ] });
+};
+pt.displayName = "PromptInput";
+const st = p(
+  ({ className: t, ...e }, n) => /* @__PURE__ */ o(
+    "div",
+    {
+      ref: n,
+      "data-slot": "prompt-input-body",
+      className: r("contents", t),
+      ...e
+    }
+  )
+);
+st.displayName = "PromptInputBody";
+const mt = p(
+  ({ onChange: t, className: e, placeholder: n = "Type your message...", ...a }, l) => {
+    const s = v(), [m, u] = N(!1), d = (i) => {
+      if (i.key === "Enter") {
+        if (m || i.nativeEvent.isComposing || i.shiftKey)
+          return;
+        i.preventDefault(), i.currentTarget.form?.requestSubmit();
+      }
+    }, P = s ? {
+      value: s.textInput.value,
+      onChange: (i) => {
+        s.textInput.setInput(i.currentTarget.value), t?.(i);
+      }
+    } : {
+      onChange: t
+    };
+    return /* @__PURE__ */ o(
+      _,
+      {
+        ref: l,
+        className: r(
+          "field-sizing-content max-h-48 min-h-18 rounded-t-xl md:text-base tracking-tightest p-2.75 leading-5",
+          e
+        ),
+        name: "message",
+        onCompositionEnd: () => u(!1),
+        onCompositionStart: () => u(!0),
+        onKeyDown: d,
+        placeholder: n,
+        ...a,
+        ...P
+      }
+    );
+  }
+);
+mt.displayName = "PromptInputTextarea";
+const lt = p(({ className: t, ...e }, n) => /* @__PURE__ */ o(
+  x,
+  {
+    ref: n,
+    align: "block-end",
+    className: r("order-first flex-wrap gap-1", t),
+    ...e
+  }
+));
+lt.displayName = "PromptInputHeader";
+const ut = p(({ className: t, ...e }, n) => /* @__PURE__ */ o(
+  x,
+  {
+    ref: n,
+    align: "block-end",
+    className: r("justify-between gap-1 p-2.75", t),
+    ...e
+  }
+));
+ut.displayName = "PromptInputFooter";
+const it = p(
+  ({ className: t, ...e }, n) => /* @__PURE__ */ o(
+    "div",
+    {
+      ref: n,
+      "data-slot": "prompt-input-tools",
+      className: r("flex items-center gap-2", t),
+      ...e
+    }
+  )
+);
+it.displayName = "PromptInputTools";
+const T = p(({ variant: t = "ghost", className: e, size: n, ...a }, l) => {
+  const s = a.children === void 0 || a.children === null ? 0 : Array.isArray(a.children) ? a.children.length : 1, m = n ?? (s > 1 ? "sm" : "icon-sm");
+  return /* @__PURE__ */ o(
+    h,
+    {
+      ref: l,
+      className: r(e),
+      size: m,
+      type: "button",
+      variant: t,
+      ...a
+    }
+  );
+});
+T.displayName = "PromptInputButton";
+const ct = (t) => /* @__PURE__ */ o(W, { ...t });
+ct.displayName = "PromptInputActionMenu";
+const dt = ({
+  className: t,
+  children: e,
+  ...n
+}) => /* @__PURE__ */ o(
+  X,
+  {
+    render: /* @__PURE__ */ o(T, { className: t, ...n, children: e ?? /* @__PURE__ */ o(k, { className: "size-4" }) })
+  }
+);
+dt.displayName = "PromptInputActionMenuTrigger";
+const It = ({
+  className: t,
+  ...e
+}) => /* @__PURE__ */ o(J, { align: "start", className: r(t), ...e });
+It.displayName = "PromptInputActionMenuContent";
+const Pt = ({
+  className: t,
+  ...e
+}) => /* @__PURE__ */ o(Q, { className: r(t), ...e });
+Pt.displayName = "PromptInputActionMenuItem";
+const yt = p(
+  ({
+    className: t,
+    variant: e = "default",
+    size: n = "icon-sm",
+    status: a,
+    children: l,
+    ...s
+  }, m) => {
+    let u = /* @__PURE__ */ o(D, { className: "size-4" });
+    return a === "submitted" ? u = /* @__PURE__ */ o(z, { className: "size-4 animate-spin" }) : a === "streaming" ? u = /* @__PURE__ */ o(B, { className: "size-4" }) : a === "error" && (u = /* @__PURE__ */ o(L, { className: "size-4" })), /* @__PURE__ */ o(
+      h,
+      {
+        ref: m,
+        "aria-label": "Submit",
+        className: r(t),
+        "data-status": a,
+        size: n,
+        type: "submit",
+        variant: e,
+        ...s,
+        children: l ?? u
+      }
+    );
+  }
+);
+yt.displayName = "PromptInputSubmit";
+const Nt = (t) => /* @__PURE__ */ o(tt, { ...t });
+Nt.displayName = "PromptInputModelSelect";
+const gt = ({
+  className: t,
+  ...e
+}) => /* @__PURE__ */ o(
+  et,
+  {
+    className: r(
+      "border-none bg-transparent font-medium text-muted-foreground shadow-none transition-colors",
+      "hover:bg-accent hover:text-foreground aria-expanded:bg-accent aria-expanded:text-foreground",
+      t
+    ),
+    ...e
+  }
+);
+gt.displayName = "PromptInputModelSelectTrigger";
+const ft = ({
+  className: t,
+  ...e
+}) => /* @__PURE__ */ o(ot, { className: r(t), ...e });
+ft.displayName = "PromptInputModelSelectContent";
+const Ct = ({
+  className: t,
+  ...e
+}) => /* @__PURE__ */ o(nt, { className: r(t), ...e });
+Ct.displayName = "PromptInputModelSelectItem";
+const bt = ({
+  className: t,
+  ...e
+}) => /* @__PURE__ */ o(rt, { className: r(t), ...e });
+bt.displayName = "PromptInputModelSelectValue";
+const xt = ({
+  openDelay: t = 0,
+  closeDelay: e = 0,
+  ...n
+}) => /* @__PURE__ */ o(U, { closeDelay: e, openDelay: t, ...n });
+xt.displayName = "PromptInputHoverCard";
+const ht = (t) => /* @__PURE__ */ o(Y, { ...t });
+ht.displayName = "PromptInputHoverCardTrigger";
+const vt = ({
+  align: t = "start",
+  ...e
+}) => /* @__PURE__ */ o(Z, { align: t, ...e });
+vt.displayName = "PromptInputHoverCardContent";
+const Tt = p(({ className: t, ...e }, n) => /* @__PURE__ */ o(
+  "div",
+  {
+    ref: n,
+    "data-slot": "prompt-input-tabs-list",
+    className: r(t),
+    ...e
+  }
+));
+Tt.displayName = "PromptInputTabsList";
+const St = p(
+  ({ className: t, ...e }, n) => /* @__PURE__ */ o(
+    "div",
+    {
+      ref: n,
+      "data-slot": "prompt-input-tab",
+      className: r(t),
+      ...e
+    }
+  )
+);
+St.displayName = "PromptInputTab";
+const Mt = p(({ className: t, children: e, ...n }, a) => /* @__PURE__ */ o(
+  "h3",
+  {
+    ref: a,
+    "data-slot": "prompt-input-tab-label",
+    className: r(
+      "mb-2 px-3 font-medium text-muted-foreground text-xs",
+      t
+    ),
+    ...n,
+    children: e
+  }
+));
+Mt.displayName = "PromptInputTabLabel";
+const wt = p(({ className: t, ...e }, n) => /* @__PURE__ */ o(
+  "div",
+  {
+    ref: n,
+    "data-slot": "prompt-input-tab-body",
+    className: r("space-y-1", t),
+    ...e
+  }
+));
+wt.displayName = "PromptInputTabBody";
+const Ht = p(({ className: t, ...e }, n) => /* @__PURE__ */ o(
+  "div",
+  {
+    ref: n,
+    "data-slot": "prompt-input-tab-item",
+    className: r(
+      "flex items-center gap-2 px-3 py-2 text-xs hover:bg-accent",
+      t
+    ),
+    ...e
+  }
+));
+Ht.displayName = "PromptInputTabItem";
+const At = ({
+  className: t,
+  ...e
+}) => /* @__PURE__ */ o(F, { className: r(t), ...e });
+At.displayName = "PromptInputCommand";
+const Et = ({
+  className: t,
+  ...e
+}) => /* @__PURE__ */ o(j, { className: r(t), ...e });
+Et.displayName = "PromptInputCommandInput";
+const Dt = ({
+  className: t,
+  ...e
+}) => /* @__PURE__ */ o(K, { className: r(t), ...e });
+Dt.displayName = "PromptInputCommandList";
+const zt = ({
+  className: t,
+  ...e
+}) => /* @__PURE__ */ o(V, { className: r(t), ...e });
+zt.displayName = "PromptInputCommandEmpty";
+const Bt = ({
+  className: t,
+  ...e
+}) => /* @__PURE__ */ o(q, { className: r(t), ...e });
+Bt.displayName = "PromptInputCommandGroup";
+const Lt = ({
+  className: t,
+  ...e
+}) => /* @__PURE__ */ o(R, { className: r(t), ...e });
+Lt.displayName = "PromptInputCommandItem";
+const kt = ({
+  className: t,
+  ...e
+}) => /* @__PURE__ */ o(O, { className: r(t), ...e });
+kt.displayName = "PromptInputCommandSeparator";
+export {
+  pt as PromptInput,
+  ct as PromptInputActionMenu,
+  It as PromptInputActionMenuContent,
+  Pt as PromptInputActionMenuItem,
+  dt as PromptInputActionMenuTrigger,
+  st as PromptInputBody,
+  T as PromptInputButton,
+  At as PromptInputCommand,
+  zt as PromptInputCommandEmpty,
+  Bt as PromptInputCommandGroup,
+  Et as PromptInputCommandInput,
+  Lt as PromptInputCommandItem,
+  Dt as PromptInputCommandList,
+  kt as PromptInputCommandSeparator,
+  ut as PromptInputFooter,
+  lt as PromptInputHeader,
+  xt as PromptInputHoverCard,
+  vt as PromptInputHoverCardContent,
+  ht as PromptInputHoverCardTrigger,
+  Nt as PromptInputModelSelect,
+  ft as PromptInputModelSelectContent,
+  Ct as PromptInputModelSelectItem,
+  gt as PromptInputModelSelectTrigger,
+  bt as PromptInputModelSelectValue,
+  at as PromptInputProvider,
+  yt as PromptInputSubmit,
+  St as PromptInputTab,
+  wt as PromptInputTabBody,
+  Ht as PromptInputTabItem,
+  Mt as PromptInputTabLabel,
+  Tt as PromptInputTabsList,
+  mt as PromptInputTextarea,
+  it as PromptInputTools,
+  Jt as usePromptInputController
+};

package/dist/components/ui/core/prompt-input/prompt-input.metadata.d.ts

@@ -0,0 +1,2 @@
+import { ComponentMeta } from '../../../../lib/types';
+export declare const PromptInputMetadata: ComponentMeta;

package/dist/components/ui/core/prompt-input/prompt-input.metadata.js

@@ -0,0 +1,9 @@
+const t = {
+  name: "PromptInput",
+  status: "in-progress-code-review",
+  description: "A comprehensive AI chat input component with support for model selection, command palettes, and rich formatting.",
+  llmUsage: "Use `<PromptInputProvider>` to wrap the input, then compose with `<PromptInput>`, `<PromptInputTextarea>`, `<PromptInputSubmit>`, and other sub-components."
+};
+export {
+  t as PromptInputMetadata
+};

package/dist/components/ui/core/reasoning/reasoning.d.ts

@@ -0,0 +1,9 @@
+import { ComponentProps } from 'react';
+declare const Reasoning: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+type ReasoningHeaderProps = ComponentProps<'div'> & {
+    title?: string;
+};
+declare const ReasoningHeader: import('react').ForwardRefExoticComponent<Omit<ReasoningHeaderProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+declare const ReasoningContent: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+declare const ReasoningItem: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export { Reasoning, ReasoningContent, ReasoningHeader, ReasoningItem };

package/dist/components/ui/core/reasoning/reasoning.js

@@ -0,0 +1,85 @@
+import { jsx as n, jsxs as d } from "react/jsx-runtime";
+import { createContext as g, forwardRef as s, useContext as c } from "react";
+import { IconBrain as m } from "@tabler/icons-react";
+import { cn as i } from "../../../../lib/utils.js";
+const l = g(!0), p = () => c(l), b = s(
+  ({ className: t, children: e, ...o }, a) => /* @__PURE__ */ n(
+    "div",
+    {
+      ref: a,
+      "data-slot": "reasoning",
+      className: i("relative flex w-full flex-col gap-2 not-prose", t),
+      ...o,
+      children: e
+    }
+  )
+);
+b.displayName = "Reasoning";
+const u = s(
+  ({ className: t, title: e = "Reasoning", children: o, ...a }, r) => /* @__PURE__ */ d(
+    "div",
+    {
+      ref: r,
+      "data-slot": "reasoning-header",
+      className: i(
+        "flex items-center gap-2 text-base leading-5 tracking-tighter text-muted-foreground",
+        t
+      ),
+      ...a,
+      children: [
+        /* @__PURE__ */ n(m, { className: "size-4 shrink-0" }),
+        o ?? /* @__PURE__ */ n("span", { children: e })
+      ]
+    }
+  )
+);
+u.displayName = "ReasoningHeader";
+const x = s(
+  ({ className: t, children: e, ...o }, a) => {
+    const r = Array.isArray(e) && e.filter(Boolean).length > 1;
+    return /* @__PURE__ */ n(l.Provider, { value: r, children: /* @__PURE__ */ n(f, { ref: a, className: t, ...o, children: e }) });
+  }
+);
+x.displayName = "ReasoningContent";
+const f = s(({ className: t, children: e, ...o }, a) => /* @__PURE__ */ n(
+  "div",
+  {
+    ref: a,
+    "data-slot": "reasoning-content-inner",
+    className: i("relative flex flex-col gap-0 pl-4", t),
+    ...o,
+    children: e
+  }
+));
+f.displayName = "ReasoningContentInner";
+const R = s(
+  ({ className: t, children: e, ...o }, a) => {
+    const r = p();
+    return /* @__PURE__ */ n(
+      "div",
+      {
+        ref: a,
+        "data-slot": "reasoning-item",
+        className: i(
+          "relative",
+          r && [
+            "before:absolute before:-left-2.75 before:top-4 before:z-10 before:size-1.75 before:rounded-full before:bg-border",
+            "after:absolute after:-left-2 after:top-0 after:bottom-0 after:w-px after:bg-border",
+            "first:after:top-4",
+            "last:after:bottom-auto last:after:h-4"
+          ],
+          t
+        ),
+        ...o,
+        children: e
+      }
+    );
+  }
+);
+R.displayName = "ReasoningItem";
+export {
+  b as Reasoning,
+  x as ReasoningContent,
+  u as ReasoningHeader,
+  R as ReasoningItem
+};

package/dist/components/ui/core/reasoning/reasoning.metadata.d.ts

@@ -0,0 +1,2 @@
+import { ComponentMeta } from '../../../../lib/types';
+export declare const ReasoningMetadata: ComponentMeta;

package/dist/components/ui/core/reasoning/reasoning.metadata.js

@@ -0,0 +1,8 @@
+const e = {
+  name: "Reasoning",
+  status: "in-progress-code-review",
+  description: "Components for displaying AI reasoning and thought processes."
+};
+export {
+  e as ReasoningMetadata
+};

package/dist/components/ui/core/select/select.d.ts

@@ -0,0 +1,44 @@
+import { ReactNode } from 'react';
+import { Select as SelectPrimitive } from '@base-ui/react/select';
+type SelectPropsBase = Omit<SelectPrimitive.Root.Props<string>, 'open' | 'defaultOpen' | 'onOpenChange' | 'value' | 'defaultValue' | 'onValueChange' | 'multiple'> & {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+};
+type SelectPropsSingle = SelectPropsBase & {
+    multiple?: false;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+};
+type SelectPropsMultiple = SelectPropsBase & {
+    multiple: true;
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+};
+declare function Select(props: SelectPropsSingle): ReactNode;
+declare function Select(props: SelectPropsMultiple): ReactNode;
+declare function SelectGroup({ className, ...props }: SelectPrimitive.Group.Props): import("react/jsx-runtime").JSX.Element;
+declare function SelectValue({ icon, ...props }: SelectPrimitive.Value.Props & {
+    icon?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+declare function SelectTrigger({ className, size, children, errorMessage, ...props }: SelectPrimitive.Trigger.Props & {
+    size?: 'sm' | 'default';
+    errorMessage?: string;
+}): import("react/jsx-runtime").JSX.Element;
+declare function SelectContent({ className, children, position: _position, align, alignOffset, side, sideOffset, ...props }: SelectPrimitive.Popup.Props & {
+    position?: 'popper' | 'item-aligned';
+    align?: SelectPrimitive.Positioner.Props['align'];
+    alignOffset?: SelectPrimitive.Positioner.Props['alignOffset'];
+    side?: SelectPrimitive.Positioner.Props['side'];
+    sideOffset?: SelectPrimitive.Positioner.Props['sideOffset'];
+}): import("react/jsx-runtime").JSX.Element;
+declare function SelectLabel({ className, ...props }: SelectPrimitive.GroupLabel.Props): import("react/jsx-runtime").JSX.Element;
+declare function SelectItem({ className, children, icon, ...props }: SelectPrimitive.Item.Props & {
+    icon?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+declare function SelectSeparator({ className, ...props }: SelectPrimitive.Separator.Props): import("react/jsx-runtime").JSX.Element;
+declare function SelectScrollUpButton({ className, ...props }: SelectPrimitive.ScrollUpArrow.Props): import("react/jsx-runtime").JSX.Element;
+declare function SelectScrollDownButton({ className, ...props }: SelectPrimitive.ScrollDownArrow.Props): import("react/jsx-runtime").JSX.Element;
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };