@unif/react-native-chat 2.0.0

package/package.json

@@ -0,0 +1,178 @@
+{
+  "name": "@unif/react-native-chat",
+  "version": "2.0.0",
+  "description": "基于 Unif Design 的独立 React Native 聊天组件",
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/src/index.d.ts",
+  "exports": {
+    ".": {
+      "unif-react-native-chat-source": "./src/index.tsx",
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/*.test.*",
+    "!**/*.spec.*",
+    "!**/.*"
+  ],
+  "scripts": {
+    "example": "yarn workspace @unif/react-native-chat-example",
+    "clean": "del-cli example/android/build example/android/app/build example/ios/build lib",
+    "prepare": "bob build",
+    "typecheck": "tsc --noEmit",
+    "test": "jest",
+    "release": "release-it --only-version",
+    "web": "yarn example web",
+    "build:web": "yarn example build:web",
+    "lint": "eslint \"**/*.{js,jsx,mjs,ts,tsx}\"",
+    "format:check": "prettier --check ."
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/unif-design/react-native-chat.git"
+  },
+  "author": "unif-design <382724935@qq.com> (https://github.com/unif-design)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/unif-design/react-native-chat/issues"
+  },
+  "homepage": "https://github.com/unif-design/react-native-chat#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.29.7",
+    "@commitlint/config-conventional": "^21.2.0",
+    "@eslint/compat": "^2.1.0",
+    "@eslint/eslintrc": "^3.3.6",
+    "@eslint/js": "^9.39.5",
+    "@jest/globals": "^30.3.0",
+    "@react-native/babel-preset": "0.86.3",
+    "@react-native/eslint-config": "0.86.3",
+    "@react-native/jest-preset": "0.86.3",
+    "@react-native/metro-config": "0.86.3",
+    "@release-it/conventional-changelog": "^12.0.0",
+    "@sbaiahmed1/react-native-blur": "6.0.1",
+    "@testing-library/react-native": "13.3.3",
+    "@types/react": "^19.2.0",
+    "@unif/react-native-design": "0.32.0",
+    "commitlint": "^21.2.1",
+    "del-cli": "^7.0.0",
+    "eslint": "^9.39.5",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-ft-flow": "^3.0.11",
+    "eslint-plugin-prettier": "^5.5.6",
+    "hermes-eslint": "0.37.0",
+    "jest": "^30.3.0",
+    "lefthook": "^2.1.10",
+    "prettier": "^3.9.6",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "react-native": "0.86.3",
+    "react-native-builder-bob": "^0.43.0",
+    "react-native-gesture-handler": "3.1.0",
+    "react-native-reanimated": "4.6.0",
+    "react-native-reanimated-carousel": "5.0.0",
+    "react-native-safe-area-context": "5.8.0",
+    "react-native-svg": "15.15.5",
+    "react-native-web": "~0.21.2",
+    "react-native-worklets": "0.12.1",
+    "react-test-renderer": "19.2.3",
+    "release-it": "^21.0.1",
+    "turbo": "^2.10.8",
+    "typescript": "^6.0.3"
+  },
+  "peerDependencies": {
+    "@unif/react-native-design": "^0.32.0",
+    "react": ">=19.2.3 <20.0.0",
+    "react-native": ">=0.86.0",
+    "react-native-svg": ">=15"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@4.11.0",
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version} [skip ci]",
+      "tagName": "v${version}",
+      "requireCommits": true
+    },
+    "npm": {
+      "publish": true,
+      "skipChecks": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": {
+          "name": "angular"
+        },
+        "infile": "CHANGELOG.md"
+      }
+    }
+  },
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "create-react-native-library": {
+    "type": "library",
+    "languages": "js",
+    "tools": [
+      "jest",
+      "lefthook",
+      "release-it",
+      "vite",
+      "eslint"
+    ],
+    "version": "0.63.1"
+  },
+  "engines": {
+    "node": "^20.19.4 || ^22.13.0 || ^24.3.0 || >=25.0.0"
+  },
+  "dependencies": {
+    "react-native-marked": "8.2.0"
+  }
+}

package/src/actions/index.ts

@@ -0,0 +1 @@
+export type { ChatAction } from './types';

package/src/actions/types.ts

@@ -0,0 +1,11 @@
+import type { IconName } from '@unif/react-native-design';
+
+export interface ChatAction {
+  id: string;
+  label: string;
+  icon?: IconName;
+  disabled?: boolean;
+  loading?: boolean;
+  accessibilityHint?: string;
+  onPress(): void;
+}

package/src/components/Attachments/AttachmentItem.tsx

@@ -0,0 +1,139 @@
+import { Text, View } from 'react-native';
+import {
+  BorderBeam,
+  Button,
+  CircularProgress,
+  Icon,
+  IconButton,
+  radius,
+  Spinner,
+  useThemedStyles,
+} from '@unif/react-native-design';
+import { ATTACHMENT_ICONS, STATUS_LABELS } from './constants';
+import { createStyles } from './styles';
+import { Thumbnail } from '@unif/react-native-design';
+import type { AttachmentItemProps } from './types';
+
+export function AttachmentItem({
+  item,
+  width,
+  imageSize,
+  row,
+  showProgressLabel = false,
+  onPreview,
+  onRemove,
+}: AttachmentItemProps) {
+  const styles = useThemedStyles(createStyles);
+  const name = item.name || '未命名附件';
+  const status = item.status ?? 'idle';
+  const loadingVisual = item.loadingVisual ?? 'center';
+  const busy = status === 'uploading' || status === 'processing';
+  const progress =
+    status === 'uploading' &&
+    typeof item.progress === 'number' &&
+    Number.isFinite(item.progress) &&
+    item.progress >= 0 &&
+    item.progress <= 1
+      ? item.progress
+      : undefined;
+  const statusText = item.statusText ?? STATUS_LABELS[status];
+  const icon = <Icon name={ATTACHMENT_ICONS[item.kind ?? 'file']} size={28} />;
+  const media = (
+    <View style={[styles.media, { minWidth: imageSize, minHeight: imageSize }]}>
+      <View pointerEvents="none" style={styles.imageLayer}>
+        {item.thumbnail ? (
+          <Thumbnail
+            source={item.thumbnail}
+            size={{
+              width: imageSize,
+              height: imageSize,
+              borderRadius: radius.sm,
+            }}
+            fallback={icon}
+          />
+        ) : (
+          <View
+            style={[
+              styles.media,
+              styles.placeholder,
+              { width: imageSize, height: imageSize },
+            ]}
+          >
+            {icon}
+          </View>
+        )}
+      </View>
+      {busy && loadingVisual === 'center' ? (
+        <View pointerEvents="none" style={styles.progress}>
+          {progress !== undefined ? (
+            <CircularProgress
+              value={progress}
+              showLabel={showProgressLabel}
+              accessibilityLabel={`${name}上传进度`}
+            />
+          ) : (
+            <Spinner />
+          )}
+        </View>
+      ) : null}
+    </View>
+  );
+
+  return (
+    <View style={[styles.item, row ? styles.row : { width }]}>
+      {busy && loadingVisual === 'border' ? (
+        <BorderBeam>{media}</BorderBeam>
+      ) : (
+        media
+      )}
+      <View style={[styles.content, row && styles.rowContent]}>
+        <Text style={styles.name}>{name}</Text>
+        {item.meta ? <Text style={styles.meta}>{item.meta}</Text> : null}
+        {statusText ? (
+          <Text
+            style={[styles.meta, status === 'failed' && styles.failed]}
+            accessibilityLiveRegion="polite"
+          >
+            {statusText}
+          </Text>
+        ) : null}
+        {busy &&
+        loadingVisual !== 'center' &&
+        showProgressLabel &&
+        progress !== undefined ? (
+          <Text style={styles.meta}>{`${Math.round(progress * 100)}%`}</Text>
+        ) : null}
+        <View style={styles.actions}>
+          {item.previewable && onPreview ? (
+            <IconButton
+              icon="eye"
+              accessibilityLabel={`预览${name}`}
+              onPress={() => onPreview(item)}
+            />
+          ) : null}
+          {item.removable && onRemove ? (
+            <IconButton
+              icon="close"
+              accessibilityLabel={`移除${name}`}
+              disabled={item.removeDisabled}
+              onPress={() => onRemove(item)}
+            />
+          ) : null}
+          {item.actions?.map((action) => (
+            <Button
+              key={action.id}
+              label={action.label}
+              leftIcon={action.icon}
+              variant="secondary"
+              style={styles.action}
+              disabled={action.disabled}
+              loading={action.loading}
+              accessibilityHint={action.accessibilityHint}
+              onPress={action.onPress}
+            />
+          ))}
+        </View>
+      </View>
+    </View>
+  );
+}

package/src/components/Attachments/Attachments.tsx

@@ -0,0 +1,72 @@
+import { useState } from 'react';
+import { ScrollView, View } from 'react-native';
+import { space, useThemedStyles } from '@unif/react-native-design';
+import { CARD_WIDTH, ROW_IMAGE_SIZE } from './constants';
+import { createStyles } from './styles';
+import { AttachmentItem } from './AttachmentItem';
+import type { AttachmentsProps } from './types';
+
+export function Attachments({
+  items,
+  layout = 'grid',
+  showProgressLabel = false,
+  onPreview,
+  onRemove,
+  style,
+  testID,
+}: AttachmentsProps) {
+  const styles = useThemedStyles(createStyles);
+  const [availableWidth, setAvailableWidth] = useState(0);
+  const columns = Math.max(
+    1,
+    Math.floor((availableWidth + space[2]) / (CARD_WIDTH + space[2]))
+  );
+  const cardWidth =
+    layout === 'grid' && availableWidth > 0
+      ? (availableWidth - space[2] * (columns - 1)) / columns
+      : Math.min(CARD_WIDTH, availableWidth || CARD_WIDTH);
+  const content = items.map((item) => {
+    const row =
+      layout === 'list' || (layout === 'mixed' && item.kind !== 'image');
+    return (
+      <AttachmentItem
+        key={item.id}
+        item={item}
+        row={row}
+        width={cardWidth}
+        imageSize={
+          row ? ROW_IMAGE_SIZE : Math.max(1, cardWidth - space[2] * 2 - 2)
+        }
+        showProgressLabel={showProgressLabel}
+        onPreview={onPreview}
+        onRemove={onRemove}
+      />
+    );
+  });
+  return (
+    <View style={[styles.root, style]} testID={testID}>
+      {layout === 'carousel' ? (
+        <ScrollView
+          horizontal
+          keyboardShouldPersistTaps="handled"
+          contentContainerStyle={styles.carousel}
+          onLayout={({ nativeEvent: { layout: measured } }) =>
+            setAvailableWidth(measured.width)
+          }
+        >
+          {content}
+        </ScrollView>
+      ) : (
+        <View
+          testID={testID ? `${testID}-content` : undefined}
+          style={styles.collection}
+          onLayout={({ nativeEvent: { layout: measured } }) =>
+            setAvailableWidth(measured.width)
+          }
+        >
+          {content}
+        </View>
+      )}
+    </View>
+  );
+}

package/src/components/Attachments/constants.ts

@@ -0,0 +1,21 @@
+import type { IconName } from '@unif/react-native-design';
+import type { ChatAttachmentItem } from './types';
+
+export const CARD_WIDTH = 144;
+export const ROW_IMAGE_SIZE = 56;
+export const ATTACHMENT_ICONS: Record<
+  NonNullable<ChatAttachmentItem['kind']>,
+  IconName
+> = {
+  image: 'image',
+  file: 'file',
+  audio: 'sound',
+  video: 'play',
+};
+export const STATUS_LABELS = {
+  idle: '',
+  uploading: '正在上传',
+  processing: '正在处理',
+  ready: '',
+  failed: '处理失败',
+} as const;

package/src/components/Attachments/index.ts

@@ -0,0 +1,6 @@
+export { Attachments } from './Attachments';
+export type {
+  AttachmentsProps,
+  ChatAttachmentItem,
+  ChatAttachmentStatus,
+} from './types';

package/src/components/Attachments/styles.ts

@@ -0,0 +1,54 @@
+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: { minWidth: 0 },
+    collection: {
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      alignItems: 'flex-start',
+      gap: space[2],
+    },
+    carousel: { gap: space[2], alignItems: 'flex-start' },
+    item: {
+      gap: space[2],
+      padding: space[2],
+      borderWidth: 1,
+      borderColor: colors.outline,
+      borderRadius: radius.md,
+      backgroundColor: colors.surface,
+    },
+    row: { width: '100%', flexDirection: 'row', alignItems: 'center' },
+    content: { minWidth: 0, flexShrink: 1, gap: space[1] },
+    rowContent: { flex: 1 },
+    media: {
+      alignItems: 'center',
+      justifyContent: 'center',
+      alignSelf: 'center',
+    },
+    imageLayer: {
+      position: 'absolute',
+      alignItems: 'center',
+      justifyContent: 'center',
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0,
+    },
+    placeholder: {
+      backgroundColor: colors.surfaceContainer,
+      borderRadius: radius.sm,
+    },
+    progress: {
+      padding: space[1],
+      borderRadius: radius.sm,
+      backgroundColor: colors.surface,
+    },
+    name: { color: colors.foreground, fontSize: type.body },
+    meta: { color: colors.foregroundMuted, fontSize: type.sm },
+    failed: { color: colors.error },
+    action: { maxWidth: '100%' },
+    actions: { flexDirection: 'row', flexWrap: 'wrap', gap: space[1] },
+  });

package/src/components/Attachments/types.ts

@@ -0,0 +1,38 @@
+import type { ImageSourcePropType, StyleProp, ViewStyle } from 'react-native';
+import type { ChatAction } from '../../actions';
+
+export type ChatAttachmentStatus =
+  'idle' | 'uploading' | 'processing' | 'ready' | 'failed';
+export interface ChatAttachmentItem {
+  id: string;
+  name?: string;
+  kind?: 'image' | 'file' | 'audio' | 'video';
+  thumbnail?: ImageSourcePropType;
+  meta?: string;
+  status?: ChatAttachmentStatus;
+  statusText?: string;
+  progress?: number;
+  loadingVisual?: 'center' | 'border' | 'caption';
+  previewable?: boolean;
+  removable?: boolean;
+  removeDisabled?: boolean;
+  actions?: readonly ChatAction[];
+}
+export interface AttachmentsProps {
+  items: readonly ChatAttachmentItem[];
+  layout?: 'grid' | 'mixed' | 'carousel' | 'list';
+  showProgressLabel?: boolean;
+  onPreview?(item: ChatAttachmentItem): void;
+  onRemove?(item: ChatAttachmentItem): void;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+export interface AttachmentItemProps extends Pick<
+  AttachmentsProps,
+  'showProgressLabel' | 'onPreview' | 'onRemove'
+> {
+  item: ChatAttachmentItem;
+  width?: number;
+  imageSize: number;
+  row: boolean;
+}

package/src/components/Chat/Chat.tsx

@@ -0,0 +1,26 @@
+import { View } from 'react-native';
+import { useThemedStyles } from '@unif/react-native-design';
+import { createStyles } from './styles';
+import type { ChatProps } from './types';
+export function Chat({
+  children,
+  composer,
+  header,
+  footer,
+  bottomInset = 0,
+  style,
+  testID,
+}: ChatProps) {
+  const styles = useThemedStyles(createStyles);
+  const paddingBottom = Number.isFinite(bottomInset)
+    ? Math.max(0, bottomInset)
+    : 0;
+  return (
+    <View style={[styles.root, { paddingBottom }, style]} testID={testID}>
+      {header}
+      <View style={styles.messages}>{children}</View>
+      {composer}
+      {footer}
+    </View>
+  );
+}

package/src/components/Chat/index.ts

@@ -0,0 +1,2 @@
+export { Chat } from './Chat';
+export type { ChatProps } from './types';

package/src/components/Chat/styles.ts

@@ -0,0 +1,12 @@
+import { StyleSheet } from 'react-native';
+import type { ColorTokens } from '@unif/react-native-design';
+export const createStyles = (colors: ColorTokens) =>
+  StyleSheet.create({
+    root: {
+      flex: 1,
+      minHeight: 0,
+      minWidth: 0,
+      backgroundColor: colors.background,
+    },
+    messages: { flex: 1, minHeight: 0, minWidth: 0 },
+  });

package/src/components/Chat/types.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+export interface ChatProps {
+  children: ReactNode;
+  composer?: ReactNode;
+  header?: ReactNode;
+  footer?: ReactNode;
+  bottomInset?: number;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}

package/src/components/Citation/Citation.tsx

@@ -0,0 +1,33 @@
+import { Text } from 'react-native';
+import type { GestureResponderEvent } from 'react-native';
+import { useThemedStyles } from '@unif/react-native-design';
+import { createStyles } from './styles';
+import type { CitationProps } from './types';
+
+export function Citation({
+  label,
+  onPress,
+  disabled = false,
+  accessibilityLabel = `引用${label}`,
+  testID,
+}: CitationProps): React.JSX.Element {
+  const styles = useThemedStyles(createStyles);
+  const handlePress = (event: GestureResponderEvent) => {
+    event.stopPropagation();
+    onPress?.();
+  };
+
+  return (
+    <Text
+      style={[styles.citation, disabled && styles.disabled]}
+      onPress={disabled || !onPress ? undefined : handlePress}
+      accessibilityRole={onPress ? 'link' : undefined}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityState={{ disabled }}
+      suppressHighlighting={disabled || !onPress}
+      testID={testID}
+    >
+      [{label}]
+    </Text>
+  );
+}

package/src/components/Citation/index.ts

@@ -0,0 +1,2 @@
+export { Citation } from './Citation';
+export type { CitationProps } from './types';

package/src/components/Citation/styles.ts

@@ -0,0 +1,15 @@
+import { StyleSheet } from 'react-native';
+import { fw, type } from '@unif/react-native-design';
+import type { ColorTokens } from '@unif/react-native-design';
+
+export const createStyles = (colors: ColorTokens) =>
+  StyleSheet.create({
+    citation: {
+      color: colors.primary,
+      fontSize: type.xxs,
+      fontWeight: fw.semi,
+    },
+    disabled: {
+      color: colors.foregroundSubtle,
+    },
+  });

package/src/components/Citation/types.ts

@@ -0,0 +1,7 @@
+export interface CitationProps {
+  label: string;
+  onPress?(): void;
+  disabled?: boolean;
+  accessibilityLabel?: string;
+  testID?: string;
+}