@unif/react-native-chat 2.0.0

package/src/components/Composer/Composer.tsx

@@ -0,0 +1,208 @@
+import {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
+import { Text, View } from 'react-native';
+import {
+  Button,
+  fixed,
+  IconButton,
+  Textarea,
+  useTheme,
+  useThemedStyles,
+} from '@unif/react-native-design';
+import type { TextFieldHandle } from '@unif/react-native-design';
+import {
+  DEFAULT_MAX_INPUT_HEIGHT,
+  PRIMARY_LABELS,
+  VOICE_LABELS,
+} from './constants';
+import { createStyles } from './styles';
+import type { ComposerHandle, ComposerProps } from './types';
+
+export const Composer = forwardRef<ComposerHandle, ComposerProps>(
+  function ComposerInput(
+    {
+      value,
+      onChangeText,
+      primaryAction,
+      editable = true,
+      disabled = false,
+      placeholder = '输入消息…',
+      inputAccessibilityLabel = '消息输入框',
+      actions = [],
+      voice,
+      header,
+      footer,
+      surface = 'card',
+      minInputHeight,
+      maxInputHeight,
+      onFocusChange,
+      onHeightChange,
+      style,
+      testID,
+    },
+    ref
+  ) {
+    const styles = useThemedStyles(createStyles);
+    const { fontScale } = useTheme();
+    const inputRef = useRef<TextFieldHandle>(null);
+    const lastHeight = useRef<number | undefined>(undefined);
+    const [menuOpen, setMenuOpen] = useState(false);
+    const voiceActive = voice !== undefined && voice.status !== 'idle';
+    const minHeight = Number.isFinite(minInputHeight)
+      ? Math.max(fixed.hitTarget, minInputHeight!)
+      : fixed.hitTarget;
+    const defaultMaxHeight = Math.max(
+      minHeight,
+      DEFAULT_MAX_INPUT_HEIGHT * fontScale
+    );
+    const maxHeight = Number.isFinite(maxInputHeight)
+      ? Math.max(minHeight, maxInputHeight!)
+      : defaultMaxHeight;
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        focus: () => {
+          if (!disabled && !voiceActive) inputRef.current?.focus();
+        },
+        blur: () => inputRef.current?.blur(),
+      }),
+      [disabled, voiceActive]
+    );
+
+    useEffect(() => {
+      if (voiceActive) inputRef.current?.blur();
+      if (voiceActive || disabled) setMenuOpen(false);
+    }, [voiceActive, disabled]);
+
+    const primaryDisabled =
+      disabled ||
+      primaryAction.kind === 'busy' ||
+      primaryAction.disabled ||
+      (primaryAction.kind === 'send' &&
+        !primaryAction.allowEmpty &&
+        value.trim().length === 0);
+
+    return (
+      <View
+        testID={testID}
+        style={[styles.root, surface === 'card' && styles.card, style]}
+        onLayout={({ nativeEvent: { layout } }) => {
+          if (layout.height !== lastHeight.current) {
+            lastHeight.current = layout.height;
+            onHeightChange?.(layout.height);
+          }
+        }}
+      >
+        {header}
+        <View
+          style={[styles.regular, voiceActive && styles.hidden]}
+          importantForAccessibility={
+            voiceActive ? 'no-hide-descendants' : 'auto'
+          }
+        >
+          <Textarea
+            ref={inputRef}
+            value={value}
+            onChangeText={onChangeText}
+            editable={editable}
+            disabled={disabled || voiceActive}
+            placeholder={placeholder}
+            accessibilityLabel={inputAccessibilityLabel}
+            minHeight={minHeight}
+            maxHeight={maxHeight}
+            submitBehavior="newline"
+            onFocus={() => {
+              setMenuOpen(false);
+              onFocusChange?.(true);
+            }}
+            onBlur={() => onFocusChange?.(false)}
+          />
+          <View style={styles.toolbar}>
+            {actions.length > 0 ? (
+              <IconButton
+                icon="more-h"
+                size="lg"
+                accessibilityLabel="更多操作"
+                accessibilityState={{ expanded: menuOpen }}
+                disabled={disabled}
+                onPress={() => setMenuOpen((open) => !open)}
+              />
+            ) : null}
+            {voice ? (
+              <IconButton
+                icon="mic"
+                size="lg"
+                accessibilityLabel="开始语音输入"
+                disabled={disabled || voice.disabled}
+                onPress={voice.onStart}
+              />
+            ) : null}
+            <Button
+              label={primaryAction.label ?? PRIMARY_LABELS[primaryAction.kind]}
+              size="lg"
+              style={styles.primary}
+              disabled={primaryDisabled}
+              loading={primaryAction.kind === 'busy'}
+              onPress={() => {
+                if (primaryDisabled) return;
+                if (primaryAction.kind === 'send') primaryAction.onPress(value);
+                else if (primaryAction.kind === 'stop') primaryAction.onPress();
+              }}
+            />
+          </View>
+          {menuOpen && actions.length > 0 ? (
+            <View style={styles.menu}>
+              {actions.map((action) => (
+                <Button
+                  key={action.id}
+                  label={action.label}
+                  leftIcon={action.icon}
+                  disabled={disabled || action.disabled}
+                  loading={action.loading}
+                  variant="secondary"
+                  accessibilityHint={action.accessibilityHint}
+                  onPress={() => {
+                    if (disabled || action.disabled || action.loading) return;
+                    setMenuOpen(false);
+                    action.onPress();
+                  }}
+                />
+              ))}
+            </View>
+          ) : null}
+        </View>
+        {voice && voice.status !== 'idle' ? (
+          <View style={styles.voice}>
+            <Text style={styles.transcript} accessibilityLiveRegion="polite">
+              {voice.status === 'starting'
+                ? VOICE_LABELS.starting
+                : voice.transcript || VOICE_LABELS[voice.status]}
+            </Text>
+            <View style={styles.toolbar}>
+              {voice.status === 'listening' ? (
+                <Button
+                  label="停止语音输入"
+                  disabled={disabled || voice.disabled}
+                  onPress={voice.onStop}
+                />
+              ) : null}
+              <Button
+                label="取消语音输入"
+                variant="secondary"
+                disabled={disabled || voice.disabled}
+                onPress={voice.onCancel}
+              />
+            </View>
+          </View>
+        ) : null}
+        {footer}
+      </View>
+    );
+  }
+);

package/src/components/Composer/constants.ts

@@ -0,0 +1,11 @@
+export const DEFAULT_MAX_INPUT_HEIGHT = 120;
+export const PRIMARY_LABELS = {
+  send: '发送',
+  stop: '停止回复',
+  busy: '正在处理…',
+} as const;
+export const VOICE_LABELS = {
+  starting: '正在准备语音输入…',
+  listening: '正在听取…',
+  finishing: '正在完成识别…',
+} as const;

package/src/components/Composer/index.ts

@@ -0,0 +1,11 @@
+export { Composer } from './Composer';
+export type {
+  ComposerBusyAction,
+  ComposerHandle,
+  ComposerPrimaryAction,
+  ComposerProps,
+  ComposerSendAction,
+  ComposerStopAction,
+  ComposerVoiceControl,
+  ComposerVoiceStatus,
+} from './types';

package/src/components/Composer/styles.ts

@@ -0,0 +1,25 @@
+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: { gap: space[2], minWidth: 0 },
+    card: {
+      padding: space[3],
+      borderRadius: radius.lg,
+      backgroundColor: colors.surface,
+    },
+    regular: { gap: space[2] },
+    hidden: { display: 'none' },
+    toolbar: {
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      alignItems: 'center',
+      gap: space[2],
+    },
+    primary: { marginStart: 'auto' },
+    menu: { flexDirection: 'row', flexWrap: 'wrap', gap: space[2] },
+    voice: { gap: space[3] },
+    transcript: { color: colors.foreground, fontSize: type.body },
+  });

package/src/components/Composer/types.ts

@@ -0,0 +1,61 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { TextFieldHandle } from '@unif/react-native-design';
+import type { ChatAction } from '../../actions';
+
+export interface ComposerSendAction {
+  kind: 'send';
+  onPress(value: string): void;
+  allowEmpty?: boolean;
+  disabled?: boolean;
+  label?: string;
+}
+
+export interface ComposerStopAction {
+  kind: 'stop';
+  onPress(): void;
+  disabled?: boolean;
+  label?: string;
+}
+
+export interface ComposerBusyAction {
+  kind: 'busy';
+  label?: string;
+}
+
+export type ComposerPrimaryAction =
+  ComposerSendAction | ComposerStopAction | ComposerBusyAction;
+export type ComposerVoiceStatus =
+  'idle' | 'starting' | 'listening' | 'finishing';
+
+export interface ComposerVoiceControl {
+  status: ComposerVoiceStatus;
+  transcript?: string;
+  disabled?: boolean;
+  onStart(): void;
+  onStop(): void;
+  onCancel(): void;
+}
+
+export interface ComposerProps {
+  value: string;
+  onChangeText(value: string): void;
+  primaryAction: ComposerPrimaryAction;
+  editable?: boolean;
+  disabled?: boolean;
+  placeholder?: string;
+  inputAccessibilityLabel?: string;
+  actions?: readonly ChatAction[];
+  voice?: ComposerVoiceControl;
+  header?: ReactNode;
+  footer?: ReactNode;
+  surface?: 'card' | 'plain';
+  minInputHeight?: number;
+  maxInputHeight?: number;
+  onFocusChange?(focused: boolean): void;
+  onHeightChange?(height: number): void;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+export type ComposerHandle = TextFieldHandle;

package/src/components/Confirmation/Confirmation.tsx

@@ -0,0 +1,63 @@
+import { Text, View } from 'react-native';
+import { Button, useThemedStyles } from '@unif/react-native-design';
+import {
+  CONFIRMATION_STATUS_TEXT,
+  DEFAULT_CANCEL_LABEL,
+  DEFAULT_CONFIRM_LABEL,
+} from './constants';
+import { createStyles } from './styles';
+import type { ConfirmationProps } from './types';
+
+export function Confirmation({
+  title,
+  children,
+  status,
+  onConfirm,
+  onCancel,
+  confirmLabel = DEFAULT_CONFIRM_LABEL,
+  cancelLabel = DEFAULT_CANCEL_LABEL,
+  confirmDisabled = false,
+  cancelDisabled = false,
+  statusText,
+  footer,
+  style,
+  testID,
+}: ConfirmationProps): React.JSX.Element {
+  const styles = useThemedStyles(createStyles);
+  const resolvedStatusText =
+    status === 'pending'
+      ? statusText
+      : (statusText ?? CONFIRMATION_STATUS_TEXT[status]);
+
+  return (
+    <View style={[styles.root, style]} testID={testID}>
+      <Text style={styles.title}>{title}</Text>
+      <View>{children}</View>
+      {resolvedStatusText ? (
+        <Text style={styles.status}>{resolvedStatusText}</Text>
+      ) : null}
+      {status === 'pending' && (onConfirm || onCancel) ? (
+        <View style={styles.actions}>
+          {onConfirm ? (
+            <Button
+              label={confirmLabel}
+              onPress={onConfirm}
+              disabled={confirmDisabled}
+              size="sm"
+            />
+          ) : null}
+          {onCancel ? (
+            <Button
+              label={cancelLabel}
+              onPress={onCancel}
+              disabled={cancelDisabled}
+              size="sm"
+              variant="outline"
+            />
+          ) : null}
+        </View>
+      ) : null}
+      {footer ? <View style={styles.footer}>{footer}</View> : null}
+    </View>
+  );
+}

package/src/components/Confirmation/constants.ts

@@ -0,0 +1,12 @@
+import type { ConfirmationStatus } from './types';
+
+export const DEFAULT_CONFIRM_LABEL = '确认';
+export const DEFAULT_CANCEL_LABEL = '取消';
+
+export const CONFIRMATION_STATUS_TEXT: Readonly<
+  Record<Exclude<ConfirmationStatus, 'pending'>, string>
+> = {
+  processing: '正在处理…',
+  confirmed: '已确认',
+  cancelled: '已取消',
+};

package/src/components/Confirmation/index.ts

@@ -0,0 +1,2 @@
+export { Confirmation } from './Confirmation';
+export type { ConfirmationProps, ConfirmationStatus } from './types';

package/src/components/Confirmation/styles.ts

@@ -0,0 +1,39 @@
+import { StyleSheet } from 'react-native';
+import {
+  fw,
+  radius,
+  space,
+  type,
+  type ColorTokens,
+} from '@unif/react-native-design';
+
+export const createStyles = (colors: ColorTokens) =>
+  StyleSheet.create({
+    root: {
+      gap: space[4],
+      padding: space[5],
+      borderWidth: 1,
+      borderColor: colors.outline,
+      borderRadius: radius.xl,
+      backgroundColor: colors.surface,
+    },
+    title: {
+      color: colors.foreground,
+      fontSize: type.h3,
+      fontWeight: fw.semi,
+    },
+    status: {
+      color: colors.foregroundMuted,
+      fontSize: type.sm,
+    },
+    actions: {
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      gap: space[3],
+    },
+    footer: {
+      paddingTop: space[2],
+      borderTopWidth: StyleSheet.hairlineWidth,
+      borderTopColor: colors.outline,
+    },
+  });

package/src/components/Confirmation/types.ts

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+export type ConfirmationStatus =
+  'pending' | 'processing' | 'confirmed' | 'cancelled';
+
+export interface ConfirmationProps {
+  title: string;
+  children: ReactNode;
+  status: ConfirmationStatus;
+  onConfirm?(): void;
+  onCancel?(): void;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  confirmDisabled?: boolean;
+  cancelDisabled?: boolean;
+  statusText?: string;
+  footer?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}

package/src/components/Feedback/Feedback.tsx

@@ -0,0 +1,87 @@
+import { Text, View } from 'react-native';
+import {
+  Button,
+  Icon,
+  useColors,
+  useThemedStyles,
+} from '@unif/react-native-design';
+import { FEEDBACK_TONE_ICONS, FEEDBACK_TONE_LABELS } from './constants';
+import { createStyles } from './styles';
+import type { FeedbackProps, FeedbackTone } from './types';
+
+function colorsForTone(
+  tone: FeedbackTone,
+  colors: ReturnType<typeof useColors>
+) {
+  switch (tone) {
+    case 'success':
+      return {
+        backgroundColor: colors.successContainer,
+        iconColor: colors.success,
+      };
+    case 'warning':
+      return {
+        backgroundColor: colors.primaryContainer,
+        iconColor: colors.primary,
+      };
+    case 'error':
+      return {
+        backgroundColor: colors.errorContainer,
+        iconColor: colors.error,
+      };
+    case 'info':
+      return { backgroundColor: colors.infoContainer, iconColor: colors.info };
+  }
+}
+
+export function Feedback({
+  message,
+  title,
+  tone = 'info',
+  action,
+  style,
+  testID,
+}: FeedbackProps): React.JSX.Element {
+  const styles = useThemedStyles(createStyles);
+  const colors = useColors();
+  const toneColors = colorsForTone(tone, colors);
+  const toneLabel = FEEDBACK_TONE_LABELS[tone];
+  const accessibilityLabel = `${toneLabel}：${title ? `${title}。` : ''}${message}`;
+
+  return (
+    <View
+      style={[
+        styles.root,
+        { backgroundColor: toneColors.backgroundColor },
+        style,
+      ]}
+      testID={testID}
+    >
+      <Icon name={FEEDBACK_TONE_ICONS[tone]} color={toneColors.iconColor} />
+      <View style={styles.content}>
+        <View accessible accessibilityLabel={accessibilityLabel}>
+          {title ? (
+            <Text style={styles.title} testID="feedback-title">
+              {title}
+            </Text>
+          ) : null}
+          <Text style={styles.message}>{message}</Text>
+        </View>
+        {action ? (
+          <View style={styles.action}>
+            <Button
+              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>
+  );
+}

package/src/components/Feedback/constants.ts

@@ -0,0 +1,16 @@
+import type { IconName } from '@unif/react-native-design';
+import type { FeedbackTone } from './types';
+
+export const FEEDBACK_TONE_LABELS: Readonly<Record<FeedbackTone, string>> = {
+  info: '信息',
+  success: '成功',
+  warning: '警告',
+  error: '错误',
+};
+
+export const FEEDBACK_TONE_ICONS: Readonly<Record<FeedbackTone, IconName>> = {
+  info: 'info',
+  success: 'success',
+  warning: 'warning',
+  error: 'error',
+};

package/src/components/Feedback/index.ts

@@ -0,0 +1,2 @@
+export { Feedback } from './Feedback';
+export type { FeedbackProps, FeedbackTone } from './types';

package/src/components/Feedback/styles.ts

@@ -0,0 +1,30 @@
+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: {
+      flexDirection: 'row',
+      alignItems: 'flex-start',
+      gap: space[3],
+      padding: space[4],
+      borderRadius: radius.lg,
+    },
+    content: {
+      flex: 1,
+      gap: space[1],
+    },
+    title: {
+      color: colors.foreground,
+      fontSize: type.sm,
+      fontWeight: fw.semi,
+    },
+    message: {
+      color: colors.foregroundMuted,
+      fontSize: type.sm,
+    },
+    action: {
+      paddingTop: space[3],
+    },
+  });

package/src/components/Feedback/types.ts

@@ -0,0 +1,13 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { ChatAction } from '../../actions';
+
+export type FeedbackTone = 'info' | 'success' | 'warning' | 'error';
+
+export interface FeedbackProps {
+  message: string;
+  title?: string;
+  tone?: FeedbackTone;
+  action?: ChatAction;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}

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

@@ -0,0 +1,70 @@
+import { Children, Fragment, useMemo } from 'react';
+import { Pressable, Text } from 'react-native';
+import { Renderer, useMarkdown } from 'react-native-marked';
+import { useTheme, useThemedStyles } from '@unif/react-native-design';
+import { createStyles } from './styles';
+import type { MarkdownContentProps } from './types';
+import { MarkdownImage } from './MarkdownImage/MarkdownImage';
+
+export function MarkdownContent({ text, onLinkPress }: MarkdownContentProps) {
+  const { scheme } = useTheme();
+  const styles = useThemedStyles(createStyles);
+  const markdown = useMemo(() => {
+    const instance = new Renderer();
+    // 上游 table 节点未提供 key，保留其渲染并补齐稳定的节点身份。
+    const renderTable = instance.table.bind(instance);
+    instance.table = (...args) => (
+      <Fragment key={instance.getKey()}>{renderTable(...args)}</Fragment>
+    );
+    instance.image = (uri, alt, _imageStyle, title) => (
+      <MarkdownImage key={instance.getKey()} uri={uri} label={alt || title} />
+    );
+    instance.link = (children, href, linkStyle, title) => (
+      <Text
+        key={instance.getKey()}
+        selectable
+        style={linkStyle}
+        accessibilityRole={onLinkPress ? 'link' : undefined}
+        accessibilityLabel={
+          title || (typeof children === 'string' ? children : undefined)
+        }
+        onPress={
+          onLinkPress
+            ? (event) => {
+                event.stopPropagation();
+                onLinkPress(href);
+              }
+            : undefined
+        }
+      >
+        {children}
+      </Text>
+    );
+    instance.linkImage = (href, uri, alt, imageStyle, title) => {
+      const content = instance.image(uri, alt, imageStyle, title);
+      return onLinkPress ? (
+        <Pressable
+          key={instance.getKey()}
+          accessibilityRole="link"
+          accessibilityLabel={alt || title || '图片链接'}
+          onPress={(event) => {
+            event.stopPropagation();
+            onLinkPress(href);
+          }}
+        >
+          {content}
+        </Pressable>
+      ) : (
+        content
+      );
+    };
+    return { renderer: instance, text, styles };
+    // Renderer 的 key 计数按每次解析重新开始，流式正文保留已有图片节点。
+  }, [onLinkPress, text, styles]);
+  const nodes = useMarkdown(markdown.text, {
+    renderer: markdown.renderer,
+    colorScheme: scheme,
+    styles: markdown.styles,
+  });
+  return <>{Children.toArray(nodes)}</>;
+}