@unif/react-native-chat 2.0.0

package/src/components/Message/MarkdownContent/MarkdownImage/MarkdownImage.tsx

@@ -0,0 +1,52 @@
+import { useEffect, useState } from 'react';
+import { Image, View } from 'react-native';
+import { Icon, Thumbnail } from '@unif/react-native-design';
+import { styles } from './styles';
+import type { ImageRatio, MarkdownImageProps } from './types';
+
+export function MarkdownImage({ uri, label }: MarkdownImageProps) {
+  const [width, setWidth] = useState(1);
+  const [ratio, setRatio] = useState<ImageRatio | undefined>(undefined);
+  useEffect(() => {
+    let active = true;
+    // 只取资源几何；加载与失败占位仍由 Design Thumbnail 持有。
+    Image.getSize(
+      uri,
+      (imageWidth, imageHeight) => {
+        if (
+          active &&
+          Number.isFinite(imageWidth) &&
+          Number.isFinite(imageHeight) &&
+          imageWidth > 0 &&
+          imageHeight > 0
+        ) {
+          setRatio({ uri, value: imageWidth / imageHeight });
+        }
+      },
+      () => {}
+    );
+    return () => {
+      active = false;
+    };
+  }, [uri]);
+  return (
+    <View
+      style={styles.root}
+      onLayout={({ nativeEvent: { layout } }) =>
+        setWidth(Math.max(1, layout.width))
+      }
+    >
+      <Thumbnail
+        source={{ uri }}
+        size={{
+          width,
+          height: width / (ratio?.uri === uri ? ratio.value : 1),
+          borderRadius: 0,
+        }}
+        resizeMode="contain"
+        fallback={<Icon name="image" />}
+        accessibilityLabel={label || '图片'}
+      />
+    </View>
+  );
+}

package/src/components/Message/MarkdownContent/MarkdownImage/styles.ts

@@ -0,0 +1,4 @@
+import { StyleSheet } from 'react-native';
+export const styles = StyleSheet.create({
+  root: { width: '100%', minWidth: 1 },
+});

package/src/components/Message/MarkdownContent/MarkdownImage/types.ts

@@ -0,0 +1,8 @@
+export interface MarkdownImageProps {
+  uri: string;
+  label?: string;
+}
+export interface ImageRatio {
+  uri: string;
+  value: number;
+}

package/src/components/Message/MarkdownContent/styles.ts

@@ -0,0 +1,61 @@
+import { StyleSheet } from 'react-native';
+import { type, space, fontMono } from '@unif/react-native-design';
+import type { ColorTokens } from '@unif/react-native-design';
+
+export const createStyles = (colors: ColorTokens) => {
+  const body = {
+    fontSize: type.body,
+    lineHeight: type.body * 1.5,
+    color: colors.foreground,
+  };
+  return StyleSheet.create({
+    text: body,
+    em: { ...body, fontStyle: 'italic' },
+    strong: { ...body, fontWeight: 'bold' },
+    strikethrough: { ...body, textDecorationLine: 'line-through' },
+    link: { ...body, color: colors.primary },
+    li: body,
+    codespan: {
+      ...body,
+      fontFamily: fontMono,
+      backgroundColor: colors.surfaceContainer,
+    },
+    h1: {
+      fontSize: type.h1,
+      lineHeight: type.h1 * 1.4,
+      color: colors.foreground,
+      borderBottomColor: colors.outline,
+    },
+    h2: {
+      fontSize: type.h2,
+      lineHeight: type.h2 * 1.4,
+      color: colors.foreground,
+      borderBottomColor: colors.outline,
+    },
+    h3: {
+      fontSize: type.h3,
+      lineHeight: type.h3 * 1.4,
+      color: colors.foreground,
+    },
+    h4: {
+      fontSize: type.body,
+      lineHeight: type.body * 1.4,
+      color: colors.foreground,
+    },
+    h5: {
+      fontSize: type.sm,
+      lineHeight: type.sm * 1.4,
+      color: colors.foreground,
+    },
+    h6: {
+      fontSize: type.xs,
+      lineHeight: type.xs * 1.4,
+      color: colors.foreground,
+    },
+    paragraph: { paddingVertical: space[1] },
+    code: { padding: space[2], backgroundColor: colors.surfaceContainer },
+    blockquote: { borderLeftColor: colors.outline },
+    hr: { borderBottomColor: colors.outline },
+    table: { borderColor: colors.outline },
+  });
+};

package/src/components/Message/MarkdownContent/types.ts

@@ -0,0 +1,4 @@
+export interface MarkdownContentProps {
+  text: string;
+  onLinkPress?(url: string): void;
+}

package/src/components/Message/Message.tsx

@@ -0,0 +1,137 @@
+import { Pressable, Text, View } from 'react-native';
+import { Button, Spinner, useThemedStyles } from '@unif/react-native-design';
+import { MarkdownContent } from './MarkdownContent/MarkdownContent';
+import { createStyles } from './styles';
+import { isNestedAction } from './isNestedAction';
+import type { MessageProps } from './types';
+
+export function Message(props: MessageProps) {
+  const {
+    placement = 'start',
+    avatar,
+    name,
+    surface = 'bubble',
+    fullWidth = false,
+    status = 'idle',
+    statusText,
+    header,
+    footer,
+    actions = [],
+    onPress,
+    onLongPress,
+    style,
+    testID,
+  } = props;
+  const styles = useThemedStyles(createStyles);
+  const hasContent =
+    Boolean(props.text?.length) ||
+    (props.children !== undefined &&
+      props.children !== null &&
+      props.children !== false) ||
+    (header !== undefined && header !== null && header !== false) ||
+    (footer !== undefined && footer !== null && footer !== false);
+  const waiting =
+    (status === 'pending' || status === 'streaming') && !hasContent;
+  const contentStyle = [
+    styles.content,
+    fullWidth && styles.fullWidth,
+    surface === 'bubble' && [
+      styles.bubble,
+      placement === 'end' && styles.outgoing,
+    ],
+    surface === 'outlined' && styles.outlined,
+    status === 'failed' && styles.failed,
+  ];
+  const content = (
+    <>
+      {header}
+      {props.text !== undefined ? (
+        props.format === 'markdown' ? (
+          <MarkdownContent text={props.text} onLinkPress={props.onLinkPress} />
+        ) : (
+          <Text
+            selectable
+            style={styles.text}
+            numberOfLines={props.numberOfLines}
+          >
+            {props.text}
+          </Text>
+        )
+      ) : (
+        props.children
+      )}
+      {waiting ? (
+        <View
+          accessible
+          accessibilityLabel="正在等待回复"
+          accessibilityState={{ busy: true }}
+        >
+          <Spinner />
+        </View>
+      ) : null}
+      {statusText ? (
+        <Text style={[styles.status, status === 'failed' && styles.errorText]}>
+          {statusText}
+        </Text>
+      ) : null}
+      {footer}
+    </>
+  );
+  return (
+    <View
+      style={[styles.root, placement === 'end' && styles.end, style]}
+      testID={testID}
+    >
+      {avatar}
+      <View
+        style={[
+          styles.column,
+          placement === 'end' && styles.columnEnd,
+          fullWidth && styles.fullWidth,
+        ]}
+      >
+        {name ? <Text style={styles.name}>{name}</Text> : null}
+        {onPress || onLongPress ? (
+          <Pressable
+            style={contentStyle}
+            onPress={
+              onPress
+                ? (event) => {
+                    if (!isNestedAction(event)) onPress();
+                  }
+                : undefined
+            }
+            onLongPress={
+              onLongPress
+                ? (event) => {
+                    if (!isNestedAction(event)) onLongPress();
+                  }
+                : undefined
+            }
+            accessible={false}
+          >
+            {content}
+          </Pressable>
+        ) : (
+          <View style={contentStyle}>{content}</View>
+        )}
+        {actions.length ? (
+          <View style={styles.actions}>
+            {actions.map((action) => (
+              <Button
+                key={action.id}
+                label={action.label}
+                leftIcon={action.icon}
+                disabled={action.disabled}
+                loading={action.loading}
+                accessibilityHint={action.accessibilityHint}
+                variant="text"
+                onPress={action.onPress}
+              />
+            ))}
+          </View>
+        ) : null}
+      </View>
+    </View>
+  );
+}

package/src/components/Message/constants.ts

@@ -0,0 +1,2 @@
+export const INTERACTIVE_CONTENT_SELECTOR =
+  'button,a,input,textarea,select,[role="button"],[role="link"],[role="checkbox"],[role="switch"],[role="menuitem"],[role="tab"]';

package/src/components/Message/index.ts

@@ -0,0 +1,10 @@
+export { Message } from './Message';
+export type {
+  MessageBaseProps,
+  MessageCustomContent,
+  MessageMarkdownContent,
+  MessagePlainContent,
+  MessagePlacement,
+  MessageProps,
+  MessageStatus,
+} from './types';

package/src/components/Message/isNestedAction.ts

@@ -0,0 +1,22 @@
+import type { GestureResponderEvent } from 'react-native';
+import { INTERACTIVE_CONTENT_SELECTOR } from './constants';
+
+export function isNestedAction(event: GestureResponderEvent): boolean {
+  const { target, currentTarget } = event;
+  // 原生由 responder 交付实际目标；Web 的 RNGH 按钮仍可能冒泡到 RN Pressable。
+  if (
+    typeof target !== 'object' ||
+    target === null ||
+    !('closest' in target) ||
+    typeof target.closest !== 'function' ||
+    typeof currentTarget !== 'object' ||
+    currentTarget === null ||
+    !('contains' in currentTarget) ||
+    typeof currentTarget.contains !== 'function'
+  )
+    return false;
+  const action = target.closest(INTERACTIVE_CONTENT_SELECTOR);
+  return Boolean(
+    action && action !== currentTarget && currentTarget.contains(action)
+  );
+}

package/src/components/Message/styles.ts

@@ -0,0 +1,42 @@
+import { StyleSheet } from 'react-native';
+import { radius, space, type } from '@unif/react-native-design';
+import type { ColorTokens } from '@unif/react-native-design';
+
+export const createStyles = (colors: ColorTokens) =>
+  StyleSheet.create({
+    root: {
+      flexDirection: 'row',
+      alignItems: 'flex-start',
+      gap: space[2],
+      minWidth: 0,
+      paddingVertical: space[2],
+    },
+    end: { flexDirection: 'row-reverse' },
+    column: {
+      flexShrink: 1,
+      maxWidth: '100%',
+      gap: space[1],
+      alignItems: 'flex-start',
+    },
+    columnEnd: { alignItems: 'flex-end' },
+    fullWidth: { flex: 1, alignSelf: 'stretch' },
+    content: { minWidth: 0, maxWidth: '100%', gap: space[2] },
+    bubble: {
+      padding: space[3],
+      borderRadius: radius.lg,
+      backgroundColor: colors.surface,
+    },
+    outgoing: { backgroundColor: colors.primaryContainer },
+    outlined: {
+      padding: space[3],
+      borderRadius: radius.lg,
+      borderWidth: 1,
+      borderColor: colors.outline,
+    },
+    failed: { borderWidth: 1, borderColor: colors.error },
+    text: { fontSize: type.body, color: colors.foreground },
+    name: { fontSize: type.sm, color: colors.foregroundMuted },
+    status: { fontSize: type.sm, color: colors.foregroundMuted },
+    errorText: { color: colors.error },
+    actions: { flexDirection: 'row', flexWrap: 'wrap', gap: space[2] },
+  });

package/src/components/Message/types.ts

@@ -0,0 +1,45 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { ChatAction } from '../../actions';
+
+export type MessagePlacement = 'start' | 'end';
+export type MessageStatus = 'idle' | 'pending' | 'streaming' | 'failed';
+export interface MessageBaseProps {
+  placement?: MessagePlacement;
+  avatar?: ReactNode;
+  name?: string;
+  surface?: 'bubble' | 'outlined' | 'plain';
+  fullWidth?: boolean;
+  status?: MessageStatus;
+  statusText?: string;
+  header?: ReactNode;
+  footer?: ReactNode;
+  actions?: readonly ChatAction[];
+  onPress?(): void;
+  onLongPress?(): void;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+export interface MessagePlainContent {
+  text: string;
+  format?: 'text';
+  numberOfLines?: number;
+  children?: never;
+  onLinkPress?: never;
+}
+export interface MessageMarkdownContent {
+  text: string;
+  format: 'markdown';
+  onLinkPress?(url: string): void;
+  numberOfLines?: never;
+  children?: never;
+}
+export interface MessageCustomContent {
+  children?: ReactNode;
+  text?: never;
+  format?: never;
+  numberOfLines?: never;
+  onLinkPress?: never;
+}
+export type MessageProps = MessageBaseProps &
+  (MessagePlainContent | MessageMarkdownContent | MessageCustomContent);

package/src/components/MessageList/MessageList.tsx

@@ -0,0 +1,238 @@
+import { useImperativeHandle, useLayoutEffect, useRef, useState } from 'react';
+import type { RefAttributes } from 'react';
+import { FlatList, View } from 'react-native';
+import type { NativeScrollEvent, NativeSyntheticEvent } from 'react-native';
+import { Button } from '@unif/react-native-design';
+import { DEFAULT_END_THRESHOLD } from './constants';
+import { styles } from './styles';
+import { useWebPrependAnchor } from './webPrependAnchor';
+import type {
+  ListMeasurements,
+  MessageListHandle,
+  MessageListProps,
+  MessageListScrollOptions,
+} from './types';
+
+export function MessageList<T>({
+  items,
+  keyExtractor,
+  renderItem,
+  extraData,
+  header,
+  footer,
+  empty,
+  renderSeparator,
+  initialPosition = 'end',
+  followOutput = 'whenAtEnd',
+  endThreshold = DEFAULT_END_THRESHOLD,
+  showScrollToEnd = true,
+  onAtEndChange,
+  hasEarlier = false,
+  loadingEarlier = false,
+  onRequestEarlier,
+  keyboardDismissMode = 'on-drag',
+  style,
+  testID,
+  ref,
+}: MessageListProps<T> & RefAttributes<MessageListHandle>) {
+  const listRef = useRef<FlatList<T>>(null);
+  const measurements = useRef<ListMeasurements>({
+    viewport: 0,
+    content: 0,
+    offset: 0,
+    hasContentSize: false,
+  });
+  const initial = useRef(initialPosition);
+  const initialized = useRef(false);
+  const previousKeys = useRef<readonly string[]>([]);
+  const prependPending = useRef(false);
+  const pendingScroll = useRef<MessageListScrollOptions | undefined>(undefined);
+  const userScrolling = useRef(false);
+  const atEndRef = useRef<boolean | undefined>(undefined);
+  const [atEnd, setAtEnd] = useState(true);
+  const threshold = Number.isFinite(endThreshold)
+    ? Math.max(0, endThreshold)
+    : DEFAULT_END_THRESHOLD;
+  const keys = items.map(keyExtractor);
+  const { getRowNativeID, preservingPrependRef, cancelPrependPreservation } =
+    useWebPrependAnchor({ listRef, itemsIdentity: items, keys });
+
+  useLayoutEffect(() => {
+    const previous = previousKeys.current;
+    const added = keys.length - previous.length;
+    const onlyPrepended =
+      previous.length > 0 &&
+      added > 0 &&
+      previous.every((key, index) => keys[index + added] === key);
+    const changed =
+      keys.length !== previous.length ||
+      keys.some((key, index) => key !== previous[index]);
+    if (changed) prependPending.current = onlyPrepended;
+    previousKeys.current = keys;
+  });
+
+  function ready() {
+    const current = measurements.current;
+    return current.viewport > 0 && current.hasContentSize;
+  }
+
+  function publishPosition() {
+    if (!ready()) return;
+    const { viewport, content, offset } = measurements.current;
+    const next = content - viewport - Math.max(0, offset) <= threshold;
+    if (next !== atEndRef.current) {
+      atEndRef.current = next;
+      setAtEnd(next);
+      onAtEndChange?.(next);
+    }
+  }
+
+  function scrollToEnd(options: MessageListScrollOptions = {}) {
+    cancelPrependPreservation();
+    const request = { animated: options.animated ?? true };
+    if (!ready()) {
+      pendingScroll.current = request;
+      return;
+    }
+    pendingScroll.current = undefined;
+    listRef.current?.scrollToOffset({
+      offset: Math.max(
+        0,
+        measurements.current.content - measurements.current.viewport
+      ),
+      animated: request.animated,
+    });
+    if (measurements.current.content <= measurements.current.viewport)
+      publishPosition();
+  }
+
+  useImperativeHandle(ref, () => ({ scrollToEnd }));
+
+  function reconcileLayout(contentChanged: boolean) {
+    if (!ready()) return;
+    const request = pendingScroll.current;
+    if (items.length > 0 && !initialized.current) {
+      initialized.current = true;
+      if (request || initial.current === 'end') {
+        scrollToEnd(request ?? { animated: false });
+        return;
+      }
+      publishPosition();
+      return;
+    }
+    if (request) {
+      scrollToEnd(request);
+      return;
+    }
+    const prepended = prependPending.current;
+    if (contentChanged) prependPending.current = false;
+    const shouldFollow =
+      initialized.current &&
+      followOutput === 'whenAtEnd' &&
+      !userScrolling.current &&
+      !prepended &&
+      !preservingPrependRef.current &&
+      atEndRef.current;
+    if (shouldFollow) scrollToEnd({ animated: false });
+    else publishPosition();
+  }
+
+  function onScroll(event: NativeSyntheticEvent<NativeScrollEvent>) {
+    const { contentOffset, contentSize, layoutMeasurement } = event.nativeEvent;
+    const movedUp = contentOffset.y < measurements.current.offset;
+    const resizingAtEnd =
+      atEndRef.current &&
+      !movedUp &&
+      !userScrolling.current &&
+      followOutput === 'whenAtEnd' &&
+      (measurements.current.content !== contentSize.height ||
+        measurements.current.viewport !== layoutMeasurement.height);
+    measurements.current = {
+      offset: contentOffset.y,
+      content: contentSize.height,
+      viewport: layoutMeasurement.height,
+      hasContentSize: true,
+    };
+    if (!resizingAtEnd) publishPosition();
+  }
+
+  const history = hasEarlier && onRequestEarlier;
+  const hasHeader = Boolean(header || history);
+  return (
+    <View style={[styles.root, style]} testID={testID}>
+      <FlatList
+        ref={listRef}
+        testID={testID ? `${testID}-list` : undefined}
+        style={styles.list}
+        data={items}
+        keyExtractor={keyExtractor}
+        extraData={extraData}
+        renderItem={({ item, index }) => (
+          <View nativeID={getRowNativeID(keyExtractor(item))}>
+            {index > 0 && renderSeparator
+              ? renderSeparator(items[index - 1]!, item)
+              : null}
+            {renderItem(item, index)}
+          </View>
+        )}
+        ListHeaderComponent={
+          hasHeader ? (
+            <View>
+              {header}
+              {history ? (
+                <Button
+                  label={loadingEarlier ? '正在加载…' : '查看更早消息'}
+                  variant="text"
+                  loading={loadingEarlier}
+                  onPress={onRequestEarlier}
+                />
+              ) : null}
+            </View>
+          ) : undefined
+        }
+        ListFooterComponent={footer ? <View>{footer}</View> : undefined}
+        ListEmptyComponent={empty ? <View>{empty}</View> : undefined}
+        maintainVisibleContentPosition={{ minIndexForVisible: 0 }}
+        keyboardDismissMode={keyboardDismissMode}
+        keyboardShouldPersistTaps="handled"
+        scrollEventThrottle={16}
+        onLayout={({ nativeEvent: { layout } }) => {
+          measurements.current.viewport = layout.height;
+          reconcileLayout(false);
+        }}
+        onContentSizeChange={(_width, height) => {
+          measurements.current.content = height;
+          measurements.current.hasContentSize = true;
+          reconcileLayout(true);
+        }}
+        onScroll={onScroll}
+        onScrollBeginDrag={() => {
+          userScrolling.current = true;
+        }}
+        onMomentumScrollBegin={() => {
+          userScrolling.current = true;
+        }}
+        onScrollEndDrag={(event) => {
+          onScroll(event);
+          if (!event.nativeEvent.velocity?.y) {
+            userScrolling.current = false;
+            publishPosition();
+          }
+        }}
+        onMomentumScrollEnd={(event) => {
+          onScroll(event);
+          userScrolling.current = false;
+          publishPosition();
+        }}
+      />
+      {showScrollToEnd && items.length > 0 && !atEnd ? (
+        <Button
+          label="回到最新消息"
+          variant="secondary"
+          style={styles.returnToEnd}
+          onPress={() => scrollToEnd()}
+        />
+      ) : null}
+    </View>
+  );
+}

package/src/components/MessageList/constants.ts

@@ -0,0 +1 @@
+export const DEFAULT_END_THRESHOLD = 24;

package/src/components/MessageList/index.ts

@@ -0,0 +1,6 @@
+export { MessageList } from './MessageList';
+export type {
+  MessageListHandle,
+  MessageListProps,
+  MessageListScrollOptions,
+} from './types';

package/src/components/MessageList/styles.ts

@@ -0,0 +1,7 @@
+import { StyleSheet } from 'react-native';
+import { space } from '@unif/react-native-design';
+export const styles = StyleSheet.create({
+  root: { flex: 1, minHeight: 0, minWidth: 0 },
+  list: { flex: 1 },
+  returnToEnd: { position: 'absolute', bottom: space[3], alignSelf: 'center' },
+});

package/src/components/MessageList/types.ts

@@ -0,0 +1,36 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+export interface MessageListScrollOptions {
+  animated?: boolean;
+}
+export interface MessageListHandle {
+  scrollToEnd(options?: MessageListScrollOptions): void;
+}
+export interface MessageListProps<T> {
+  items: readonly T[];
+  keyExtractor(item: T): string;
+  renderItem(item: T, index: number): ReactNode;
+  extraData?: unknown;
+  header?: ReactNode;
+  footer?: ReactNode;
+  empty?: ReactNode;
+  renderSeparator?(previous: T, next: T): ReactNode;
+  initialPosition?: 'start' | 'end';
+  followOutput?: 'whenAtEnd' | 'never';
+  endThreshold?: number;
+  showScrollToEnd?: boolean;
+  onAtEndChange?(atEnd: boolean): void;
+  hasEarlier?: boolean;
+  loadingEarlier?: boolean;
+  onRequestEarlier?(): void;
+  keyboardDismissMode?: 'none' | 'on-drag';
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+export interface ListMeasurements {
+  viewport: number;
+  content: number;
+  offset: number;
+  hasContentSize: boolean;
+}