@anvia/react-ui 0.6.3 → 0.7.1

package/dist/index.d.ts

@@ -11,13 +11,29 @@ export { T as ThreadContextValue, u as useThread } from './thread-uEm8hH0s.js';
 export { T as ThreadListController, a as ThreadListItemContextValue, b as ThreadListProvider, c as ThreadListProviderProps, d as ThreadListRecord, u as useThreadList, e as useThreadListItem } from './thread-list-On8db4XL.js';
 export { Composer, ComposerSubmitMessage, ComposerSubmitMessageArgs, Thread } from './chat/index.js';
 export { Completion } from './completion/index.js';
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { UseChatResult } from '@anvia/react';
+import { P as PrimitiveProps } from './render-CRKWam2v.js';
+export { a as PrimitiveRef } from './render-CRKWam2v.js';
 export { HumanInput } from './human-input/index.js';
 export { Image } from './image/index.js';
 export { Message, MessageAttachmentPart, MessageEntityProps, MessagePartsFilter, MessageStreamOptions, MessageToolPart, MessageToolRenderWhen } from './message/index.js';
 export { SelectionToolbar } from './selection-toolbar/index.js';
-export { P as PrimitiveProps, a as PrimitiveRef } from './render-CRKWam2v.js';
 export { StreamMarkdown, StreamMarkdownProps } from './stream/index.js';
 export { ThreadList, ThreadListItem } from './thread-list/index.js';
-import '@anvia/react';
-import 'react';
 import 'react-markdown';
+
+type ContextUsage = NonNullable<UseChatResult["contextUsage"]>;
+type ContextMeterProps = Omit<PrimitiveProps<"div">, "children"> & {
+    usage?: ContextUsage;
+    display?: "remaining" | "used";
+    children?: ReactNode | ((usage: ContextUsage) => ReactNode);
+};
+declare const ContextMeter: react.ForwardRefExoticComponent<Omit<PrimitiveProps<"div">, "children"> & {
+    usage?: ContextUsage;
+    display?: "remaining" | "used";
+    children?: ReactNode | ((usage: ContextUsage) => ReactNode);
+} & react.RefAttributes<HTMLDivElement>>;
+
+export { ContextMeter, type ContextMeterProps, PrimitiveProps };

package/dist/index.js

@@ -27,7 +27,9 @@ import {
 import {
   Attachment
 } from "./chunk-SBYUKODG.js";
-import "./chunk-T3ZFZ3NP.js";
+import {
+  renderPrimitive
+} from "./chunk-T3ZFZ3NP.js";
 import {
   ChatProvider,
   CompletionProvider,
@@ -49,12 +51,50 @@ import {
   useThreadList,
   useThreadListItem
 } from "./chunk-43U2XQP2.js";
+
+// src/context-meter.tsx
+import { forwardRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var ContextMeter = forwardRef(function ContextMeter2({ usage, display = "remaining", children, ...props }, ref) {
+  if (usage === void 0) {
+    return null;
+  }
+  const percent = display === "remaining" ? usage.remainingPercent : usage.usedPercent;
+  const roundedPercent = Math.round(percent);
+  const label = `${roundedPercent}% context ${display === "remaining" ? "left" : "used"}`;
+  const content = typeof children === "function" ? children(usage) : children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { "data-anvia-context-meter-label": "", children: label }),
+    /* @__PURE__ */ jsx("span", { "aria-hidden": "true", "data-anvia-context-meter-track": "", children: /* @__PURE__ */ jsx(
+      "span",
+      {
+        "data-anvia-context-meter-value": "",
+        style: { width: `${Math.min(100, Math.max(0, percent))}%` }
+      }
+    ) })
+  ] });
+  return renderPrimitive(
+    "div",
+    {
+      ...props,
+      children: content,
+      "aria-label": props["aria-label"] ?? label,
+      "aria-valuemax": 100,
+      "aria-valuemin": 0,
+      "aria-valuenow": roundedPercent,
+      "data-anvia-context-meter": "",
+      "data-display": display,
+      role: props.role ?? "progressbar"
+    },
+    ref
+  );
+});
 export {
   Attachment,
   ChatProvider,
   Completion,
   CompletionProvider,
   Composer,
+  ContextMeter,
   HumanInput,
   Image,
   Message,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
+{"version":3,"sources":["../src/context-meter.tsx"],"sourcesContent":["import type { UseChatResult } from \"@anvia/react\";\nimport { forwardRef, type ReactNode } from \"react\";\n\nimport { type PrimitiveProps, renderPrimitive } from \"./primitives\";\n\ntype ContextUsage = NonNullable<UseChatResult[\"contextUsage\"]>;\n\nexport type ContextMeterProps = Omit<PrimitiveProps<\"div\">, \"children\"> & {\n  usage?: ContextUsage;\n  display?: \"remaining\" | \"used\";\n  children?: ReactNode | ((usage: ContextUsage) => ReactNode);\n};\n\nexport const ContextMeter = forwardRef<HTMLDivElement, ContextMeterProps>(function ContextMeter(\n  { usage, display = \"remaining\", children, ...props },\n  ref,\n) {\n  if (usage === undefined) {\n    return null;\n  }\n\n  const percent = display === \"remaining\" ? usage.remainingPercent : usage.usedPercent;\n  const roundedPercent = Math.round(percent);\n  const label = `${roundedPercent}% context ${display === \"remaining\" ? \"left\" : \"used\"}`;\n  const content =\n    typeof children === \"function\"\n      ? children(usage)\n      : (children ?? (\n          <>\n            <span data-anvia-context-meter-label=\"\">{label}</span>\n            <span aria-hidden=\"true\" data-anvia-context-meter-track=\"\">\n              <span\n                data-anvia-context-meter-value=\"\"\n                style={{ width: `${Math.min(100, Math.max(0, percent))}%` }}\n              />\n            </span>\n          </>\n        ));\n\n  return renderPrimitive(\n    \"div\",\n    {\n      ...props,\n      children: content,\n      \"aria-label\": props[\"aria-label\"] ?? label,\n      \"aria-valuemax\": 100,\n      \"aria-valuemin\": 0,\n      \"aria-valuenow\": roundedPercent,\n      \"data-anvia-context-meter\": \"\",\n      \"data-display\": display,\n      role: props.role ?? \"progressbar\",\n    } as PrimitiveProps<\"div\">,\n    ref,\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,SAAS,kBAAkC;AA2BjC,mBACE,KADF;AAfH,IAAM,eAAe,WAA8C,SAASA,cACjF,EAAE,OAAO,UAAU,aAAa,UAAU,GAAG,MAAM,GACnD,KACA;AACA,MAAI,UAAU,QAAW;AACvB,WAAO;AAAA,EACT;AAEA,QAAM,UAAU,YAAY,cAAc,MAAM,mBAAmB,MAAM;AACzE,QAAM,iBAAiB,KAAK,MAAM,OAAO;AACzC,QAAM,QAAQ,GAAG,cAAc,aAAa,YAAY,cAAc,SAAS,MAAM;AACrF,QAAM,UACJ,OAAO,aAAa,aAChB,SAAS,KAAK,IACb,YACC,iCACE;AAAA,wBAAC,UAAK,kCAA+B,IAAI,iBAAM;AAAA,IAC/C,oBAAC,UAAK,eAAY,QAAO,kCAA+B,IACtD;AAAA,MAAC;AAAA;AAAA,QACC,kCAA+B;AAAA,QAC/B,OAAO,EAAE,OAAO,GAAG,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,OAAO,CAAC,CAAC,IAAI;AAAA;AAAA,IAC5D,GACF;AAAA,KACF;AAGR,SAAO;AAAA,IACL;AAAA,IACA;AAAA,MACE,GAAG;AAAA,MACH,UAAU;AAAA,MACV,cAAc,MAAM,YAAY,KAAK;AAAA,MACrC,iBAAiB;AAAA,MACjB,iBAAiB;AAAA,MACjB,iBAAiB;AAAA,MACjB,4BAA4B;AAAA,MAC5B,gBAAgB;AAAA,MAChB,MAAM,MAAM,QAAQ;AAAA,IACtB;AAAA,IACA;AAAA,EACF;AACF,CAAC;","names":["ContextMeter"]}

package/dist/styles.css

@@ -85,6 +85,28 @@
   z-index: 60;
 }
 
+[data-anvia-context-meter] {
+  display: inline-grid;
+  min-width: 8rem;
+  gap: 0.375rem;
+  font-size: 0.75rem;
+}
+
+[data-anvia-context-meter-track] {
+  display: block;
+  height: 0.25rem;
+  overflow: hidden;
+  border-radius: 9999px;
+  background: color-mix(in srgb, currentcolor 20%, transparent);
+}
+
+[data-anvia-context-meter-value] {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+  background: currentcolor;
+}
+
 [data-state="disabled"] {
   opacity: 0.55;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anvia/react-ui",
-  "version": "0.6.3",
+  "version": "0.7.1",
   "description": "Composable React UI primitives for Anvia chat and completion experiences.",
   "author": "anvia",
   "maintainer": "Indra Zulfi",
@@ -69,17 +69,17 @@
   },
   "dependencies": {
     "@radix-ui/react-slot": "^1.3.3",
-    "@tiptap/core": "^3.28.0",
-    "@tiptap/extension-document": "^3.28.0",
-    "@tiptap/extension-hard-break": "^3.28.0",
-    "@tiptap/extension-mention": "^3.28.0",
-    "@tiptap/extension-paragraph": "^3.28.0",
-    "@tiptap/extension-placeholder": "^3.28.0",
-    "@tiptap/extension-text": "^3.28.0",
-    "@tiptap/pm": "^3.28.0",
-    "@tiptap/react": "^3.28.0",
-    "@tiptap/suggestion": "^3.28.0",
-    "marked": "^18.0.7",
+    "@tiptap/core": "^3.29.2",
+    "@tiptap/extension-document": "^3.29.2",
+    "@tiptap/extension-hard-break": "^3.29.2",
+    "@tiptap/extension-mention": "^3.29.2",
+    "@tiptap/extension-paragraph": "^3.29.2",
+    "@tiptap/extension-placeholder": "^3.29.2",
+    "@tiptap/extension-text": "^3.29.2",
+    "@tiptap/pm": "^3.29.2",
+    "@tiptap/react": "^3.29.2",
+    "@tiptap/suggestion": "^3.29.2",
+    "marked": "^18.0.9",
     "react-markdown": "^10.1.0",
     "remark-gfm": "^4.0.1"
   },
@@ -100,7 +100,7 @@
     "tsup": "^8.5.0",
     "typescript": "^5.9.3",
     "vitest": "^4.0.8",
-    "@anvia/react": "0.10.3"
+    "@anvia/react": "0.11.4"
   },
   "scripts": {
     "build": "tsup src/index.ts src/attachment/index.ts src/chat/index.ts src/completion/index.ts src/human-input/index.ts src/image/index.ts src/message/index.ts src/selection-toolbar/index.ts src/shared.ts src/stream/index.ts src/thread-list/index.ts --format esm --dts --sourcemap --clean --external react --external react-dom && cp src/styles.css dist/styles.css && cp src/stream/styles.css dist/stream/styles.css",