@unif/react-native-chat 2.0.0

package/src/components/MessageList/webPrependAnchor/constants.ts

@@ -0,0 +1,6 @@
+export const USER_INTERACTION_EVENTS = [
+  'wheel',
+  'touchstart',
+  'pointerdown',
+  'keydown',
+] as const;

package/src/components/MessageList/webPrependAnchor/index.ts

@@ -0,0 +1,7 @@
+export { useWebPrependAnchor } from './useWebPrependAnchor';
+export type {
+  UseWebPrependAnchorOptions,
+  WebPrependAnchorHandle,
+  WebPrependAnchorListHandle,
+  WebPrependScrollToOffsetOptions,
+} from './types';

package/src/components/MessageList/webPrependAnchor/types.ts

@@ -0,0 +1,92 @@
+import type { RefObject } from 'react';
+
+export interface WebRectLike {
+  top: number;
+  bottom: number;
+}
+
+export interface WebEventListenerOptions {
+  capture?: boolean;
+  passive?: boolean;
+}
+
+export interface WebElementLike {
+  id: string;
+  scrollTop: number;
+  scrollHeight: number;
+  getBoundingClientRect(): WebRectLike;
+  querySelectorAll(selector: string): ArrayLike<unknown>;
+  contains(candidate: unknown): boolean;
+  addEventListener(
+    type: string,
+    listener: () => void,
+    options?: WebEventListenerOptions
+  ): void;
+  removeEventListener(
+    type: string,
+    listener: () => void,
+    options?: WebEventListenerOptions
+  ): void;
+}
+
+export interface WebObserverLike {
+  observe(target: unknown, options?: unknown): void;
+  unobserve?(target: unknown): void;
+  disconnect(): void;
+}
+
+export interface WebObserverConstructor {
+  new (callback: () => void): WebObserverLike;
+}
+
+export interface WebDocumentLike {
+  getElementById(id: string): unknown;
+}
+
+export interface WebGlobals {
+  document?: WebDocumentLike;
+  MutationObserver?: WebObserverConstructor;
+  ResizeObserver?: WebObserverConstructor;
+  requestAnimationFrame?(callback: () => void): number;
+  cancelAnimationFrame?(frame: number): void;
+}
+
+export interface WebAnchorSnapshot {
+  id: string;
+  top: number;
+  scrollHeight: number;
+  scrollTop: number;
+}
+
+export interface WebPrependScrollToOffsetOptions {
+  offset: number;
+  animated?: boolean;
+}
+
+export interface WebPrependAnchorListHandle {
+  getScrollableNode(): unknown;
+  scrollToOffset(options: WebPrependScrollToOffsetOptions): void;
+}
+
+export interface WebPrependAnchorConnection {
+  list: WebPrependAnchorListHandle;
+  scroller: WebElementLike;
+  mutationObserver?: WebObserverLike;
+  resizeObserver?: WebObserverLike;
+  resizeTargets: Set<WebElementLike>;
+  userInteraction(): void;
+  scroll(): void;
+}
+
+export interface UseWebPrependAnchorOptions {
+  listRef: RefObject<WebPrependAnchorListHandle | null>;
+  itemsIdentity: unknown;
+  keys: readonly string[];
+}
+
+export interface WebPrependAnchorHandle {
+  rowNativeIDPrefix: string;
+  getRowNativeID(key: string): string;
+  preservingPrependRef: RefObject<boolean>;
+  cancelPrependPreservation(): void;
+}

package/src/components/MessageList/webPrependAnchor/useWebPrependAnchor.ts

@@ -0,0 +1,27 @@
+import { useCallback, useId, useRef } from 'react';
+import type {
+  UseWebPrependAnchorOptions,
+  WebPrependAnchorHandle,
+} from './types';
+
+export function useWebPrependAnchor(
+  _options: UseWebPrependAnchorOptions
+): WebPrependAnchorHandle {
+  const instanceId = useId();
+  const rowNativeIDPrefix = `unif-message-row-${encodeURIComponent(instanceId)}`;
+  const preservingPrependRef = useRef(false);
+  const getRowNativeID = useCallback(
+    (key: string) => `${rowNativeIDPrefix}-${encodeURIComponent(key)}`,
+    [rowNativeIDPrefix]
+  );
+  const cancelPrependPreservation = useCallback(() => {
+    preservingPrependRef.current = false;
+  }, []);
+
+  return {
+    rowNativeIDPrefix,
+    getRowNativeID,
+    preservingPrependRef,
+    cancelPrependPreservation,
+  };
+}

package/src/components/MessageList/webPrependAnchor/useWebPrependAnchor.web.ts

@@ -0,0 +1,293 @@
+import { useId, useLayoutEffect, useRef } from 'react';
+import { Platform } from 'react-native';
+import { USER_INTERACTION_EVENTS } from './constants';
+import type {
+  UseWebPrependAnchorOptions,
+  WebAnchorSnapshot,
+  WebElementLike,
+  WebGlobals,
+  WebPrependAnchorHandle,
+  WebPrependAnchorConnection,
+} from './types';
+
+function isWebElementLike(value: unknown): value is WebElementLike {
+  if (!value || typeof value !== 'object') return false;
+  const candidate = value as Partial<WebElementLike>;
+  return (
+    typeof candidate.scrollTop === 'number' &&
+    typeof candidate.scrollHeight === 'number' &&
+    typeof candidate.getBoundingClientRect === 'function' &&
+    typeof candidate.querySelectorAll === 'function' &&
+    typeof candidate.contains === 'function' &&
+    typeof candidate.addEventListener === 'function' &&
+    typeof candidate.removeEventListener === 'function'
+  );
+}
+
+function sameKeys(left: readonly string[], right: readonly string[]): boolean {
+  return (
+    left.length === right.length &&
+    left.every((key, index) => key === right[index])
+  );
+}
+
+function isPurePrepend(
+  previous: readonly string[],
+  current: readonly string[]
+): boolean {
+  const added = current.length - previous.length;
+  return (
+    previous.length > 0 &&
+    added > 0 &&
+    previous.every((key, index) => current[index + added] === key)
+  );
+}
+
+function disconnectConnection(
+  connection: WebPrependAnchorConnection | undefined
+) {
+  if (!connection) return;
+  connection.mutationObserver?.disconnect();
+  connection.resizeObserver?.disconnect();
+  connection.resizeTargets.clear();
+  USER_INTERACTION_EVENTS.forEach((eventName) =>
+    connection.scroller.removeEventListener(
+      eventName,
+      connection.userInteraction,
+      { capture: true }
+    )
+  );
+  connection.scroller.removeEventListener('scroll', connection.scroll);
+}
+
+export function useWebPrependAnchor({
+  listRef,
+  itemsIdentity,
+  keys,
+}: UseWebPrependAnchorOptions): WebPrependAnchorHandle {
+  const instanceId = useId();
+  const rowNativeIDPrefix = `unif-message-row-${encodeURIComponent(instanceId)}`;
+  const preservingPrependRef = useRef(false);
+  const previousIdentityRef = useRef<unknown>(itemsIdentity);
+  const previousKeysRef = useRef<readonly string[] | undefined>(undefined);
+  const lastAnchorRef = useRef<WebAnchorSnapshot | undefined>(undefined);
+  const preservationRef = useRef<WebAnchorSnapshot | undefined>(undefined);
+  const connectionRef = useRef<WebPrependAnchorConnection | undefined>(
+    undefined
+  );
+  const frameRef = useRef<number | undefined>(undefined);
+
+  const globals = globalThis as unknown as WebGlobals;
+
+  const getRowNativeID = (key: string) =>
+    `${rowNativeIDPrefix}-${encodeURIComponent(key)}`;
+
+  const getRows = (scroller: WebElementLike): WebElementLike[] =>
+    Array.from(scroller.querySelectorAll('[id]')).filter(
+      (candidate): candidate is WebElementLike =>
+        isWebElementLike(candidate) &&
+        candidate.id.startsWith(`${rowNativeIDPrefix}-`)
+    );
+
+  const findRow = (
+    scroller: WebElementLike,
+    id: string
+  ): WebElementLike | undefined => {
+    const candidate = globals.document?.getElementById(id);
+    return isWebElementLike(candidate) && scroller.contains(candidate)
+      ? candidate
+      : undefined;
+  };
+
+  const captureAnchor = (connection: WebPrependAnchorConnection) => {
+    const viewport = connection.scroller.getBoundingClientRect();
+    const firstVisible = getRows(connection.scroller).find((row) => {
+      const rect = row.getBoundingClientRect();
+      return rect.bottom > viewport.top && rect.top < viewport.bottom;
+    });
+    if (!firstVisible) return;
+    lastAnchorRef.current = {
+      id: firstVisible.id,
+      top: firstVisible.getBoundingClientRect().top - viewport.top,
+      scrollHeight: connection.scroller.scrollHeight,
+      scrollTop: connection.scroller.scrollTop,
+    };
+  };
+
+  const refreshResizeTargets = (connection: WebPrependAnchorConnection) => {
+    const resizeObserver = connection.resizeObserver;
+    if (!resizeObserver) return;
+    const nextTargets = new Set([
+      connection.scroller,
+      ...getRows(connection.scroller),
+    ]);
+    connection.resizeTargets.forEach((target) => {
+      if (!nextTargets.has(target)) resizeObserver.unobserve?.(target);
+    });
+    nextTargets.forEach((target) => {
+      if (!connection.resizeTargets.has(target)) resizeObserver.observe(target);
+    });
+    connection.resizeTargets = nextTargets;
+  };
+
+  const correctPrepend = (connection: WebPrependAnchorConnection) => {
+    const preservation = preservationRef.current;
+    if (!preservation) return;
+    const anchor = findRow(connection.scroller, preservation.id);
+    if (anchor) {
+      const viewport = connection.scroller.getBoundingClientRect();
+      const currentTop = anchor.getBoundingClientRect().top - viewport.top;
+      const delta = currentTop - preservation.top;
+      if (Math.abs(delta) > 0.5) {
+        connection.list.scrollToOffset({
+          offset: Math.max(0, connection.scroller.scrollTop + delta),
+          animated: false,
+        });
+      }
+      return;
+    }
+
+    const heightDelta = Math.max(
+      0,
+      connection.scroller.scrollHeight - preservation.scrollHeight
+    );
+    if (heightDelta > 0) {
+      connection.list.scrollToOffset({
+        offset: Math.max(0, preservation.scrollTop + heightDelta),
+        animated: false,
+      });
+    }
+  };
+
+  const runFrame = () => {
+    frameRef.current = undefined;
+    const connection = connectionRef.current;
+    if (!connection) return;
+    refreshResizeTargets(connection);
+    if (preservingPrependRef.current) correctPrepend(connection);
+    else captureAnchor(connection);
+  };
+
+  const scheduleFrame = () => {
+    if (frameRef.current !== undefined) return;
+    if (globals.requestAnimationFrame) {
+      frameRef.current = globals.requestAnimationFrame(runFrame);
+    } else {
+      runFrame();
+    }
+  };
+
+  const stopPreserving = () => {
+    preservingPrependRef.current = false;
+    preservationRef.current = undefined;
+    lastAnchorRef.current = undefined;
+  };
+
+  const disconnect = () => {
+    const connection = connectionRef.current;
+    disconnectConnection(connection);
+    connectionRef.current = undefined;
+    if (frameRef.current !== undefined) {
+      globals.cancelAnimationFrame?.(frameRef.current);
+      frameRef.current = undefined;
+    }
+  };
+
+  const ensureConnected = () => {
+    if (Platform.OS !== 'web') return;
+    const list = listRef.current;
+    const scroller = list ? list.getScrollableNode() : undefined;
+    if (!list || !isWebElementLike(scroller)) {
+      disconnect();
+      return;
+    }
+    if (connectionRef.current?.scroller === scroller) return;
+    disconnect();
+    stopPreserving();
+
+    const userInteraction = () => {
+      stopPreserving();
+      const currentConnection = connectionRef.current;
+      if (currentConnection) captureAnchor(currentConnection);
+      scheduleFrame();
+    };
+    const scroll = () => scheduleFrame();
+    const mutationObserver = globals.MutationObserver
+      ? new globals.MutationObserver(scheduleFrame)
+      : undefined;
+    const resizeObserver = globals.ResizeObserver
+      ? new globals.ResizeObserver(scheduleFrame)
+      : undefined;
+    const connection: WebPrependAnchorConnection = {
+      list,
+      scroller,
+      mutationObserver,
+      resizeObserver,
+      resizeTargets: new Set(),
+      userInteraction,
+      scroll,
+    };
+    connectionRef.current = connection;
+    mutationObserver?.observe(scroller, {
+      childList: true,
+      subtree: true,
+    });
+    USER_INTERACTION_EVENTS.forEach((eventName) =>
+      scroller.addEventListener(eventName, userInteraction, {
+        capture: true,
+        passive: eventName === 'wheel' || eventName === 'touchstart',
+      })
+    );
+    scroller.addEventListener('scroll', scroll, { passive: true });
+    refreshResizeTargets(connection);
+    scheduleFrame();
+  };
+
+  const cancelPrependPreservation = () => {
+    stopPreserving();
+    scheduleFrame();
+  };
+
+  useLayoutEffect(() => {
+    ensureConnected();
+    const previousKeys = previousKeysRef.current;
+    const identityChanged = previousIdentityRef.current !== itemsIdentity;
+    if (previousKeys) {
+      const keysChanged = !sameKeys(previousKeys, keys);
+      if (
+        keysChanged &&
+        isPurePrepend(previousKeys, keys) &&
+        lastAnchorRef.current
+      ) {
+        preservationRef.current = lastAnchorRef.current;
+        preservingPrependRef.current = true;
+      } else if (keysChanged || identityChanged) {
+        stopPreserving();
+      }
+    }
+    previousIdentityRef.current = itemsIdentity;
+    previousKeysRef.current = [...keys];
+    scheduleFrame();
+  });
+
+  useLayoutEffect(
+    () => () => {
+      disconnectConnection(connectionRef.current);
+      connectionRef.current = undefined;
+      if (frameRef.current !== undefined) {
+        (globalThis as unknown as WebGlobals).cancelAnimationFrame?.(
+          frameRef.current
+        );
+        frameRef.current = undefined;
+      }
+    },
+    []
+  );
+
+  return {
+    rowNativeIDPrefix,
+    getRowNativeID,
+    preservingPrependRef,
+    cancelPrependPreservation,
+  };
+}

package/src/components/Process/Process.tsx

@@ -0,0 +1,160 @@
+import { useEffect, useState } from 'react';
+import { Text, View } from 'react-native';
+import {
+  Button,
+  Icon,
+  useColors,
+  useThemedStyles,
+} from '@unif/react-native-design';
+import { PROCESS_STATUS_ICONS, PROCESS_STATUS_LABELS } from './constants';
+import { createStyles } from './styles';
+import type { ProcessProps, ProcessStep } from './types';
+
+function idsWithDetails(
+  ids: readonly string[],
+  steps: readonly ProcessStep[]
+): readonly string[] {
+  const availableIds = new Set(
+    steps.filter((step) => step.details != null).map((step) => step.id)
+  );
+  return ids.filter((id) => availableIds.has(id));
+}
+
+function formatElapsedMs(elapsedMs: number | undefined): string | undefined {
+  if (elapsedMs === undefined || !Number.isFinite(elapsedMs) || elapsedMs < 0) {
+    return undefined;
+  }
+  if (elapsedMs < 1000) return `${Math.round(elapsedMs)} 毫秒`;
+
+  const roundedSeconds = Math.round(elapsedMs / 100) / 10;
+  if (roundedSeconds < 60) {
+    const formatted = Number.isInteger(roundedSeconds)
+      ? String(roundedSeconds)
+      : roundedSeconds.toFixed(1);
+    return `${formatted} 秒`;
+  }
+
+  const totalSeconds = Math.round(elapsedMs / 1000);
+  const minutes = Math.floor(totalSeconds / 60);
+  const remainingSeconds = totalSeconds % 60;
+  return remainingSeconds === 0
+    ? `${minutes} 分钟`
+    : `${minutes} 分 ${remainingSeconds} 秒`;
+}
+
+export function Process(props: ProcessProps): React.JSX.Element {
+  const { steps, title, identity, style, testID } = props;
+  const styles = useThemedStyles(createStyles);
+  const colors = useColors();
+  const isControlled = props.expandedIds !== undefined;
+  const [localExpandedIds, setLocalExpandedIds] = useState<readonly string[]>(
+    () => idsWithDetails(props.defaultExpandedIds ?? [], steps)
+  );
+
+  useEffect(() => {
+    if (!isControlled) {
+      setLocalExpandedIds((current) => idsWithDetails(current, steps));
+    }
+  }, [isControlled, steps]);
+
+  const expandedIds = idsWithDetails(
+    isControlled ? props.expandedIds : localExpandedIds,
+    steps
+  );
+
+  const toggleDetails = (stepId: string) => {
+    const nextIds = expandedIds.includes(stepId)
+      ? expandedIds.filter((id) => id !== stepId)
+      : [...expandedIds, stepId];
+    if (!isControlled) setLocalExpandedIds(nextIds);
+    props.onExpandedChange?.(nextIds);
+  };
+
+  return (
+    <View style={[styles.root, style]} testID={testID}>
+      {title || identity ? (
+        <View style={styles.heading}>
+          {identity}
+          {title ? <Text style={styles.headingTitle}>{title}</Text> : null}
+        </View>
+      ) : null}
+      <View style={styles.steps}>
+        {steps.map((step, index) => {
+          const statusLabel = PROCESS_STATUS_LABELS[step.status];
+          const elapsed = formatElapsedMs(step.elapsedMs);
+          const isExpanded = expandedIds.includes(step.id);
+          return (
+            <View
+              key={step.id}
+              style={[
+                styles.step,
+                index === steps.length - 1 && styles.stepLast,
+              ]}
+            >
+              <View style={styles.stepHeader}>
+                <Text
+                  style={styles.stepTitle}
+                  testID={`process-step-title-${step.id}`}
+                >
+                  {step.title}
+                </Text>
+                <View
+                  style={styles.status}
+                  accessible
+                  accessibilityLabel={`${step.title}，${statusLabel}`}
+                >
+                  <Icon
+                    name={PROCESS_STATUS_ICONS[step.status]}
+                    color={
+                      step.status === 'failed'
+                        ? colors.error
+                        : step.status === 'completed'
+                          ? colors.success
+                          : colors.foregroundMuted
+                    }
+                  />
+                  <Text style={styles.statusText}>{statusLabel}</Text>
+                </View>
+              </View>
+              {step.description ? (
+                <Text style={styles.description}>{step.description}</Text>
+              ) : null}
+              {elapsed ? <Text style={styles.elapsed}>{elapsed}</Text> : null}
+              {step.details != null ? (
+                <>
+                  <Button
+                    label={isExpanded ? '收起详情' : '展开详情'}
+                    onPress={() => toggleDetails(step.id)}
+                    size="sm"
+                    variant="text"
+                    testID={`process-step-${step.id}-toggle`}
+                  />
+                  {isExpanded ? (
+                    <View style={styles.details}>{step.details}</View>
+                  ) : null}
+                </>
+              ) : null}
+              {step.actions && step.actions.length > 0 ? (
+                <View style={styles.actions}>
+                  {step.actions.map((action) => (
+                    <Button
+                      key={action.id}
+                      label={action.label}
+                      leftIcon={action.icon}
+                      onPress={action.onPress}
+                      disabled={action.disabled}
+                      loading={action.loading}
+                      accessibilityHint={action.accessibilityHint}
+                      size="sm"
+                      variant="outline"
+                    />
+                  ))}
+                </View>
+              ) : null}
+            </View>
+          );
+        })}
+      </View>
+    </View>
+  );
+}

package/src/components/Process/constants.ts

@@ -0,0 +1,22 @@
+import type { IconName } from '@unif/react-native-design';
+import type { ProcessStepStatus } from './types';
+
+export const PROCESS_STATUS_LABELS: Readonly<
+  Record<ProcessStepStatus, string>
+> = {
+  pending: '待处理',
+  running: '处理中',
+  completed: '已完成',
+  failed: '失败',
+  cancelled: '已取消',
+};
+
+export const PROCESS_STATUS_ICONS: Readonly<
+  Record<ProcessStepStatus, IconName>
+> = {
+  pending: 'circle-minus',
+  running: 'thinking',
+  completed: 'success',
+  failed: 'error',
+  cancelled: 'close',
+};

package/src/components/Process/index.ts

@@ -0,0 +1,9 @@
+export { Process } from './Process';
+export type {
+  ProcessBaseProps,
+  ProcessControlledExpansion,
+  ProcessLocalExpansion,
+  ProcessProps,
+  ProcessStep,
+  ProcessStepStatus,
+} from './types';

package/src/components/Process/styles.ts

@@ -0,0 +1,77 @@
+import { StyleSheet } from 'react-native';
+import { fw, radius, space, type } from '@unif/react-native-design';
+import type { ColorTokens } from '@unif/react-native-design';
+
+export const createStyles = (colors: ColorTokens) =>
+  StyleSheet.create({
+    root: {
+      gap: space[4],
+      padding: space[5],
+      borderRadius: radius.xl,
+      borderWidth: 1,
+      borderColor: colors.outline,
+      backgroundColor: colors.surface,
+    },
+    heading: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: space[3],
+    },
+    headingTitle: {
+      flex: 1,
+      color: colors.foreground,
+      fontSize: type.h3,
+      fontWeight: fw.semi,
+    },
+    steps: {
+      gap: space[4],
+    },
+    step: {
+      gap: space[2],
+      paddingBottom: space[4],
+      borderBottomWidth: StyleSheet.hairlineWidth,
+      borderBottomColor: colors.outline,
+    },
+    stepLast: {
+      paddingBottom: 0,
+      borderBottomWidth: 0,
+    },
+    stepHeader: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: space[3],
+    },
+    stepTitle: {
+      flex: 1,
+      color: colors.foreground,
+      fontSize: type.sm,
+      fontWeight: fw.medium,
+    },
+    status: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: space[1],
+    },
+    statusText: {
+      color: colors.foregroundMuted,
+      fontSize: type.xxs,
+    },
+    description: {
+      color: colors.foregroundMuted,
+      fontSize: type.sm,
+    },
+    elapsed: {
+      color: colors.foregroundSubtle,
+      fontSize: type.xxs,
+    },
+    details: {
+      padding: space[4],
+      borderRadius: radius.md,
+      backgroundColor: colors.surfaceContainer,
+    },
+    actions: {
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      gap: space[3],
+    },
+  });