@vvedantb/native-ui 0.17.2 → 0.18.0

package/dist/ai/chat-text.js

@@ -0,0 +1,44 @@
+/** Type and copy shared by the AI chat parts. */
+import { Platform } from "react-native";
+/**
+ * `body` is message text: `text-sm` (14 / 20), as the web `MessageContent`.
+ * `small` is the secondary text of triggers, trace lines and sources: also
+ * `text-sm` (the web sources trigger is `text-xs`). `caption` is `text-xs`
+ * (12 / 16): step descriptions, file chips and code headers. Larger text
+ * steps each up, as `Textarea` does.
+ */
+export function chatTextSize(kind, largerText) {
+  if (kind === "body") return largerText ? "text-xl" : "text-sm";
+  if (kind === "small") return largerText ? "text-lg" : "text-sm";
+  return largerText ? "text-base" : "text-xs";
+}
+
+/**
+ * The web `text-2xs` token (11 / 16, tracking 0.01em) as a style, for
+ * `MessageMeta size="2xs"` and an app's own small labels. React Native has no
+ * `em`, so the tracking is in points.
+ */
+export const META_TEXT_STYLE = {
+  fontSize: 11,
+  lineHeight: 16,
+  letterSpacing: 0.11
+};
+
+/** The system monospace face, for code and reasoning text (web `font-mono`). */
+export const MONO_FONT = Platform.select({
+  ios: "Menlo",
+  default: "monospace"
+});
+
+/**
+ * Elapsed time for "Thought for 12s" and "Worked for 1m 5s": whole seconds
+ * under a minute, minutes and seconds above. Negative and fractional values
+ * round to whole seconds, from 0.
+ */
+export function formatElapsed(seconds) {
+  const total = Math.max(0, Math.round(seconds));
+  if (total < 60) return `${total}s`;
+  const minutes = Math.floor(total / 60);
+  const rest = total % 60;
+  return rest === 0 ? `${minutes}m` : `${minutes}m ${rest}s`;
+}

package/dist/ai/chat-thread.jsx

@@ -0,0 +1,135 @@
+import { c as _c } from "react/compiler-runtime";
+import { StyleSheet, View } from "react-native";
+import { cn } from "../cn";
+import { KeyboardAvoidingView, KeyboardLiftContext } from "../primitives/keyboard-parts";
+import { Conversation, ConversationContent, ConversationScrollButton } from "./conversation";
+
+/**
+ * The least `ChatThread` reads from a message: an id and a role. The `ai` SDK
+ * `UIMessage` fits it, so the package takes no `ai` dependency.
+ */
+
+/** Index of the last message with `role`, or -1. A loop, not `findLastIndex` (Hermes). */
+function lastIndexOfRole(messages, role) {
+  for (let index = messages.length - 1; index >= 0; index -= 1) {
+    if (messages[index].role === role) return index;
+  }
+  return -1;
+}
+
+/**
+ * The chat column as one piece: `Conversation`, `ConversationContent`, the
+ * messages, a `thinking` row right after the last user message while
+ * `working`, `ConversationScrollButton` and the `footer` last. The whole
+ * column sits in a `KeyboardAvoidingView` (`padding`, as `PromptInput`; frame
+ * by frame with `KeyboardControllerProvider`), which also lifts the footer on
+ * Android edge-to-edge, where the window does not resize. A `PromptInput`
+ * footer and the scroll button add no lift of their own (`KeyboardLiftContext`).
+ */
+export function ChatThread(t0) {
+  const $ = _c(29);
+  const {
+    messages,
+    working,
+    renderMessage,
+    thinking,
+    emptyState,
+    footer,
+    contentContainerClassName,
+    keyboardVerticalOffset: t1,
+    className,
+    testID
+  } = t0;
+  const keyboardVerticalOffset = t1 === undefined ? 0 : t1;
+  let t2;
+  if ($[0] !== messages || $[1] !== working) {
+    t2 = working ? lastIndexOfRole(messages, "user") : -1;
+    $[0] = messages;
+    $[1] = working;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  const lastUser = t2;
+  let t3;
+  if ($[3] !== messages || $[4] !== working) {
+    t3 = working ? lastIndexOfRole(messages, "assistant") : -1;
+    $[3] = messages;
+    $[4] = working;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  const streaming = t3;
+  let t4;
+  if ($[6] !== className) {
+    t4 = cn("flex-1", className);
+    $[6] = className;
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+  let t5;
+  if ($[8] !== emptyState || $[9] !== lastUser || $[10] !== messages || $[11] !== renderMessage || $[12] !== streaming || $[13] !== thinking) {
+    t5 = messages.length === 0 ? emptyState : messages.map((message, index) => <View key={message.id}>{renderMessage(message, index === streaming)}{index === lastUser && thinking != null ? <View className="mt-4">{thinking}</View> : null}</View>);
+    $[8] = emptyState;
+    $[9] = lastUser;
+    $[10] = messages;
+    $[11] = renderMessage;
+    $[12] = streaming;
+    $[13] = thinking;
+    $[14] = t5;
+  } else {
+    t5 = $[14];
+  }
+  let t6;
+  if ($[15] !== contentContainerClassName || $[16] !== t5) {
+    t6 = <ConversationContent contentContainerClassName={contentContainerClassName}>{t5}</ConversationContent>;
+    $[15] = contentContainerClassName;
+    $[16] = t5;
+    $[17] = t6;
+  } else {
+    t6 = $[17];
+  }
+  let t7;
+  if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+    t7 = <ConversationScrollButton testID="chat-thread-scroll-bottom" />;
+    $[18] = t7;
+  } else {
+    t7 = $[18];
+  }
+  let t8;
+  if ($[19] !== t6) {
+    t8 = <Conversation>{t6}{t7}</Conversation>;
+    $[19] = t6;
+    $[20] = t8;
+  } else {
+    t8 = $[20];
+  }
+  let t9;
+  if ($[21] !== footer || $[22] !== t4 || $[23] !== t8) {
+    t9 = <KeyboardLiftContext.Provider value={true}><View className={t4}>{t8}{footer}</View></KeyboardLiftContext.Provider>;
+    $[21] = footer;
+    $[22] = t4;
+    $[23] = t8;
+    $[24] = t9;
+  } else {
+    t9 = $[24];
+  }
+  let t10;
+  if ($[25] !== keyboardVerticalOffset || $[26] !== t9 || $[27] !== testID) {
+    t10 = <KeyboardAvoidingView testID={testID} keyboardVerticalOffset={keyboardVerticalOffset} style={styles.fill}>{t9}</KeyboardAvoidingView>;
+    $[25] = keyboardVerticalOffset;
+    $[26] = t9;
+    $[27] = testID;
+    $[28] = t10;
+  } else {
+    t10 = $[28];
+  }
+  return t10;
+}
+const styles = StyleSheet.create({
+  fill: {
+    flex: 1
+  }
+});