@lotics/ui 2.3.2 → 2.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "2.3.2",
+  "version": "2.4.1",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",
@@ -55,6 +55,7 @@
     "./button": "./src/button.tsx",
     "./checkbox": "./src/checkbox.tsx",
     "./combobox": "./src/combobox.tsx",
+    "./composer": "./src/composer.tsx",
     "./portal": "./src/portal.tsx",
     "./popover_nav": "./src/popover_nav.tsx",
     "./popover": "./src/popover.tsx",

package/src/avatar.web.tsx

@@ -0,0 +1,102 @@
+import type { ImageContentFit, ImageSource } from "expo-image";
+import { Image, View, StyleSheet, StyleProp, ViewStyle, ImageStyle } from "react-native";
+import { Text } from "./text";
+import { colors } from "./colors";
+
+interface AvatarProps {
+  size?: number;
+  source?: ImageSource;
+  name?: string;
+  style?: StyleProp<ViewStyle | ImageStyle>;
+  contentFit?: ImageContentFit;
+  /**
+   * When true, the avatar announces its `name` to assistive tech. Default
+   * false because avatars almost always appear adjacent to the name text —
+   * announcing the image as well would double-read. Pass `announce` when the
+   * avatar is standalone (with no visible name nearby).
+   */
+  announce?: boolean;
+}
+
+/**
+ * Web Avatar. The native `avatar.tsx` renders through `expo-image`, a native
+ * module that pulls expo's runtime into the graph and fails to load under
+ * pure-web bundlers (Vite dev throws on its CJS interop; vitest can't resolve
+ * expo's winter runtime). On web, `react-native`'s `Image` (→ react-native-web
+ * → `<img>`) renders the same circular avatar with none of that cost. The prop
+ * surface is identical — `ImageSource`/`ImageContentFit` are kept as erased
+ * type-only imports so no expo-image module is ever loaded.
+ */
+export function Avatar(props: AvatarProps) {
+  const { source, size = 32, name = "Unknown", style, contentFit, announce } = props;
+  const decorative = !announce;
+
+  if (!source || !source.uri) {
+    return (
+      <View
+        accessible={!decorative}
+        accessibilityLabel={decorative ? undefined : name}
+        accessibilityElementsHidden={decorative}
+        importantForAccessibility={decorative ? "no-hide-descendants" : undefined}
+        aria-hidden={decorative || undefined}
+        style={[
+          styles.base,
+          { backgroundColor: colors.blue["600"], width: size, height: size },
+          style,
+        ]}
+      >
+        {/* Initials are a visual shorthand for the name; the accessible name is
+            on the container so the SR does not read "HM" in addition. */}
+        <Text
+          userSelect="none"
+          size="xs"
+          weight="medium"
+          color="inverted"
+          accessibilityElementsHidden
+          importantForAccessibility="no-hide-descendants"
+          aria-hidden
+        >
+          {getInitials(name, size)}
+        </Text>
+      </View>
+    );
+  }
+
+  return (
+    <Image
+      accessibilityLabel={decorative ? undefined : name}
+      accessibilityElementsHidden={decorative}
+      importantForAccessibility={decorative ? "no-hide-descendants" : undefined}
+      style={[styles.base, { width: size, height: size }, style as ImageStyle]}
+      source={{ uri: source.uri }}
+      resizeMode={contentFit === "contain" ? "contain" : "cover"}
+    />
+  );
+}
+
+function getInitials(name: string, size?: number): string {
+  let initials = 2;
+
+  if (size && size <= 32) {
+    initials = 1;
+
+    if (name.length <= 2) {
+      return name;
+    }
+  }
+
+  return name
+    .split(" ")
+    .map((c) => c.charAt(0).toUpperCase())
+    .slice(0, initials)
+    .join("");
+}
+
+const styles = StyleSheet.create({
+  base: {
+    borderRadius: 999,
+    justifyContent: "center",
+    alignItems: "center",
+    userSelect: "none",
+  },
+});

package/src/composer.tsx

@@ -0,0 +1,231 @@
+import React, { type ReactNode, type Ref, useCallback, useState } from "react";
+import { View, TextInput as RNTextInput, ScrollView, StyleSheet, type TextInputProps } from "react-native";
+import { Button } from "./button";
+import { colors } from "./colors";
+import { fontFamilyRegular, getInputTextStyle } from "./text_utils";
+import { useAutoGrowHeight } from "./use_auto_grow_height";
+
+/**
+ * The pure composer *chrome* — a bordered, auto-growing multiline text input
+ * with Enter-to-send, a send/stop button, and a footer. Everything domain- or
+ * Lotics-specific is injected: labels (no i18n), and `pills` / `files` /
+ * `children` slots the consumer fills (the product's chat wraps this and fills
+ * them with skill/knowledge pills + an upload grid; a custom-code app fills
+ * `files` with its own attachment region, or leaves it empty).
+ *
+ * Pure by the package contract: no i18n, no domain types, no upload machinery.
+ * Compose those above it.
+ */
+export interface ComposerProps {
+  onSend: (text: string) => void;
+  onStop?: () => void;
+  disabled?: boolean;
+  /** Override the default "block on empty text" send-disable (e.g. allow send with attachments only). */
+  sendDisabled?: boolean;
+  placeholder?: string;
+  autoFocus?: boolean;
+  testID?: string;
+  /** Control text externally; omit to let the composer manage its own state. */
+  value?: string;
+  onChangeText?: (text: string) => void;
+  /** Extra TextInput props (ref, onKeyPress, …). `onKeyPress` runs before the
+   *  built-in Enter-to-send and can `preventDefault()` to suppress it. */
+  textInputProps?: Partial<TextInputProps> & { ref?: Ref<RNTextInput> };
+
+  // Slots, rendered top-to-bottom above the input:
+  /** A row of context pills (skills, mentions, …). */
+  pills?: ReactNode;
+  /** An attachment region (an upload grid, a thumbnail row, …). */
+  files?: ReactNode;
+  /** Arbitrary content between the slots and the input. */
+  children?: ReactNode;
+  /** Footer left — typically an attach / actions button. */
+  actionsButton?: ReactNode;
+  /** Footer right, before the send button — e.g. a model picker. */
+  footerRight?: ReactNode;
+
+  /** Accessible/tooltip label for the send button. */
+  sendLabel?: string;
+  /** Accessible/tooltip label for the stop button (shown while `disabled` + `onStop`). */
+  stopLabel?: string;
+}
+
+export function Composer(props: ComposerProps) {
+  const {
+    onSend,
+    onStop,
+    disabled,
+    sendDisabled,
+    placeholder,
+    autoFocus,
+    testID,
+    textInputProps,
+    pills,
+    files,
+    children,
+    actionsButton,
+    footerRight,
+    sendLabel = "Send",
+    stopLabel = "Stop",
+  } = props;
+
+  const [internalText, setInternalText] = useState("");
+  const isControlled = props.value !== undefined;
+  const text = isControlled ? props.value! : internalText;
+  const setText = isControlled ? (props.onChangeText ?? setInternalText) : setInternalText;
+
+  const [focused, setFocused] = useState(false);
+  const { containerHeight, scrollEnabled, inputRef, measure, onContentSizeChange } = useAutoGrowHeight({ maxLines: 12 });
+  const emptyText = text.trim().length === 0;
+
+  const { ref: externalRef, ...spreadInputProps } = textInputProps ?? {};
+  const mergedInputRef = useCallback(
+    (node: RNTextInput | null) => {
+      inputRef(node);
+      if (typeof externalRef === "function") (externalRef as (node: RNTextInput | null) => void)(node);
+      else if (externalRef) (externalRef as React.MutableRefObject<RNTextInput | null>).current = node;
+    },
+    [inputRef, externalRef],
+  );
+
+  const effectiveSendDisabled = sendDisabled !== undefined ? sendDisabled : emptyText;
+
+  const handleSend = useCallback(() => {
+    if (disabled || effectiveSendDisabled) return;
+    onSend(text);
+    setText("");
+    requestAnimationFrame(measure);
+  }, [disabled, effectiveSendDisabled, onSend, text, setText, measure]);
+
+  const handleChangeText = useCallback(
+    (t: string) => {
+      setText(t);
+      measure();
+    },
+    [setText, measure],
+  );
+
+  const handleKeyPress = useCallback(
+    (e: unknown) => {
+      // The consumer's handler runs first and may suppress send (e.g. to remove
+      // a pill on Backspace, or run a mention selection on Enter).
+      if (spreadInputProps.onKeyPress) {
+        (spreadInputProps.onKeyPress as (e: unknown) => void)(e);
+      }
+      const webEvent = e as { key: string; shiftKey: boolean; preventDefault: () => void; defaultPrevented?: boolean };
+      if (webEvent.defaultPrevented) return;
+      if (webEvent.key === "Enter" && !webEvent.shiftKey) {
+        webEvent.preventDefault();
+        handleSend();
+      }
+    },
+    [handleSend, spreadInputProps],
+  );
+
+  const hasContentAboveInput = pills != null || files != null || children != null;
+
+  return (
+    <View testID={testID} style={[styles.container, focused && styles.focused]}>
+      <View style={[styles.inputContainer, hasContentAboveInput && styles.inputContainerWithContent]}>
+        {pills != null && <View style={styles.pillRow}>{pills}</View>}
+        {files != null && (
+          <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ gap: 8 }}>
+            {files}
+          </ScrollView>
+        )}
+        {children}
+        <View style={{ justifyContent: "center" }}>
+          <View style={{ height: containerHeight }}>
+            <RNTextInput
+              ref={mergedInputRef}
+              autoFocus={autoFocus}
+              onChangeText={handleChangeText}
+              onSubmitEditing={handleSend}
+              placeholder={placeholder}
+              placeholderTextColor={colors.zinc[500]}
+              value={text}
+              onFocus={() => setFocused(true)}
+              onBlur={() => setFocused(false)}
+              multiline
+              scrollEnabled={scrollEnabled}
+              onContentSizeChange={onContentSizeChange}
+              {...spreadInputProps}
+              onKeyPress={handleKeyPress}
+              style={[
+                styles.textInput,
+                getInputTextStyle(),
+                { outlineStyle: "none" },
+                !scrollEnabled && { overflow: "hidden" as const },
+                spreadInputProps?.style,
+              ]}
+            />
+          </View>
+        </View>
+      </View>
+
+      <View style={styles.footer}>
+        <View style={styles.footerLeft}>{actionsButton}</View>
+        <View style={styles.footerRight}>
+          {footerRight}
+          {disabled && onStop ? (
+            <Button onPress={onStop} color="primary" icon="square" tooltip={stopLabel} />
+          ) : (
+            <Button
+              onPress={handleSend}
+              color="primary"
+              disabled={disabled || effectiveSendDisabled}
+              icon="arrow-up"
+              tooltip={sendLabel}
+            />
+          )}
+        </View>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 8,
+    borderRadius: 16,
+    borderWidth: 2,
+    borderColor: colors.border,
+    backgroundColor: colors.background,
+  },
+  focused: {
+    borderColor: colors.black,
+  },
+  footer: {
+    flex: 1,
+    flexDirection: "row",
+    gap: 8,
+    justifyContent: "space-between",
+    zIndex: 1,
+    paddingTop: 8,
+  },
+  footerLeft: {
+    flexDirection: "row",
+    gap: 8,
+  },
+  footerRight: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+  },
+  inputContainer: {
+    padding: 4,
+  },
+  inputContainerWithContent: {
+    gap: 8,
+  },
+  pillRow: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 4,
+  },
+  textInput: {
+    flex: 1,
+    fontFamily: fontFamilyRegular,
+    letterSpacing: -0.4,
+  },
+});