@unif/react-native-chat 2.0.0 → 2.1.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@unif/react-native-chat",
-  "version": "2.0.0",
-  "description": "基于 Unif Design 的独立 React Native 聊天组件",
+  "version": "2.1.0",
+  "description": "Unif React Native 聊天组件：消息、输入、附件和交互展示",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
   "exports": {
@@ -29,10 +29,10 @@
     "typecheck": "tsc --noEmit",
     "test": "jest",
     "release": "release-it --only-version",
-    "web": "yarn example web",
-    "build:web": "yarn example build:web",
+    "web": "yarn workspace @unif/react-native-chat-website start",
     "lint": "eslint \"**/*.{js,jsx,mjs,ts,tsx}\"",
-    "format:check": "prettier --check ."
+    "format:check": "prettier --check .",
+    "website": "yarn workspace @unif/react-native-chat-website"
   },
   "keywords": [
     "react-native",
@@ -48,7 +48,7 @@
   "bugs": {
     "url": "https://github.com/unif-design/react-native-chat/issues"
   },
-  "homepage": "https://github.com/unif-design/react-native-chat#readme",
+  "homepage": "https://unif-design.github.io/react-native-chat/",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
@@ -68,7 +68,7 @@
     "@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",
+    "@unif/react-native-design": "0.33.0",
     "commitlint": "^21.2.1",
     "del-cli": "^7.0.0",
     "eslint": "^9.39.5",
@@ -96,13 +96,14 @@
     "typescript": "^6.0.3"
   },
   "peerDependencies": {
-    "@unif/react-native-design": "^0.32.0",
+    "@unif/react-native-design": "^0.33.0",
     "react": ">=19.2.3 <20.0.0",
     "react-native": ">=0.86.0",
     "react-native-svg": ">=15"
   },
   "workspaces": [
-    "example"
+    "example",
+    "website"
   ],
   "packageManager": "yarn@4.11.0",
   "react-native-builder-bob": {
@@ -164,7 +165,6 @@
       "jest",
       "lefthook",
       "release-it",
-      "vite",
       "eslint"
     ],
     "version": "0.63.1"

package/src/components/Composer/Composer.tsx

@@ -5,21 +5,23 @@ import {
   useRef,
   useState,
 } from 'react';
-import { Text, View } from 'react-native';
+import { Pressable, Text, View, useWindowDimensions } 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,
+  COMPOSER_INPUT_LINE_HEIGHT,
+  COMPOSER_INPUT_MAX_LINES,
+  COMPOSER_PLAIN_VERTICAL_INSET,
   PRIMARY_LABELS,
   VOICE_LABELS,
 } from './constants';
+import { ComposerIconAction } from './ComposerIconAction';
+import { ComposerMenuItem } from './ComposerMenuItem';
 import { createStyles } from './styles';
 import type { ComposerHandle, ComposerProps } from './types';
 
@@ -49,20 +51,35 @@ export const Composer = forwardRef<ComposerHandle, ComposerProps>(
   ) {
     const styles = useThemedStyles(createStyles);
     const { fontScale } = useTheme();
+    const { height: windowHeight } = useWindowDimensions();
     const inputRef = useRef<TextFieldHandle>(null);
     const lastHeight = useRef<number | undefined>(undefined);
     const [menuOpen, setMenuOpen] = useState(false);
+    const [focused, setFocused] = useState(false);
     const voiceActive = voice !== undefined && voice.status !== 'idle';
+    const expanded = focused || value.length > 0;
     const minHeight = Number.isFinite(minInputHeight)
       ? Math.max(fixed.hitTarget, minInputHeight!)
       : fixed.hitTarget;
     const defaultMaxHeight = Math.max(
       minHeight,
-      DEFAULT_MAX_INPUT_HEIGHT * fontScale
+      COMPOSER_INPUT_LINE_HEIGHT * COMPOSER_INPUT_MAX_LINES * fontScale +
+        COMPOSER_PLAIN_VERTICAL_INSET
     );
     const maxHeight = Number.isFinite(maxInputHeight)
       ? Math.max(minHeight, maxInputHeight!)
       : defaultMaxHeight;
+    const showPrimary =
+      primaryAction.kind !== 'send' ||
+      primaryAction.allowEmpty ||
+      value.trim().length > 0;
+    const primaryDisabled =
+      disabled || primaryAction.kind === 'busy' || primaryAction.disabled;
+    const showToolbar =
+      (expanded && actions.length > 0) || Boolean(voice) || showPrimary;
+    const primaryLabel = primaryAction.label?.trim()
+      ? primaryAction.label
+      : PRIMARY_LABELS[primaryAction.kind];
 
     useImperativeHandle(
       ref,
@@ -76,17 +93,23 @@ export const Composer = forwardRef<ComposerHandle, ComposerProps>(
     );
 
     useEffect(() => {
-      if (voiceActive) inputRef.current?.blur();
+      if (voiceActive) {
+        inputRef.current?.blur();
+        setFocused(false);
+      }
       if (voiceActive || disabled) setMenuOpen(false);
     }, [voiceActive, disabled]);
 
-    const primaryDisabled =
-      disabled ||
-      primaryAction.kind === 'busy' ||
-      primaryAction.disabled ||
-      (primaryAction.kind === 'send' &&
-        !primaryAction.allowEmpty &&
-        value.trim().length === 0);
+    const moreAction =
+      actions.length > 0 ? (
+        <ComposerIconAction
+          icon="plus"
+          label="更多操作"
+          expanded={menuOpen}
+          disabled={disabled}
+          onPress={() => setMenuOpen((open) => !open)}
+        />
+      ) : null;
 
     return (
       <View
@@ -99,109 +122,156 @@ export const Composer = forwardRef<ComposerHandle, ComposerProps>(
           }
         }}
       >
-        {header}
+        {header != null ? <View style={styles.accessory}>{header}</View> : null}
+        {menuOpen && !disabled && !voiceActive && actions.length > 0 ? (
+          <>
+            <Pressable
+              style={[styles.backdrop, { height: windowHeight }]}
+              accessibilityRole="button"
+              accessibilityLabel="收起更多操作"
+              onPress={() => setMenuOpen(false)}
+            />
+            <View style={styles.menu} testID="composer-menu">
+              <View style={styles.menuClip} testID="composer-menu-content">
+                {actions.map((action) => (
+                  <ComposerMenuItem
+                    key={action.id}
+                    action={action}
+                    disabled={disabled}
+                    onPress={() => {
+                      if (disabled || action.disabled || action.loading) return;
+                      setMenuOpen(false);
+                      action.onPress();
+                    }}
+                  />
+                ))}
+              </View>
+            </View>
+          </>
+        ) : null}
         <View
-          style={[styles.regular, voiceActive && styles.hidden]}
+          testID="composer-regular"
+          style={[
+            styles.regular,
+            expanded && styles.expanded,
+            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();
+          {moreAction ? (
+            <View
+              key="more"
+              style={[styles.more, expanded && styles.moreExpanded]}
+            >
+              {moreAction}
+            </View>
+          ) : null}
+          <View
+            key="input"
+            style={[styles.input, expanded && styles.inputExpanded]}
+          >
+            <Textarea
+              ref={inputRef}
+              surface="plain"
+              value={value}
+              onChangeText={onChangeText}
+              editable={editable}
+              disabled={disabled || voiceActive}
+              placeholder={placeholder}
+              accessibilityLabel={inputAccessibilityLabel}
+              minHeight={minHeight}
+              maxHeight={maxHeight}
+              submitBehavior="newline"
+              onPressIn={() => setMenuOpen(false)}
+              onFocus={() => {
+                setMenuOpen(false);
+                setFocused(true);
+                onFocusChange?.(true);
+              }}
+              onBlur={() => {
+                setFocused(false);
+                onFocusChange?.(false);
               }}
             />
           </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();
-                  }}
-                />
-              ))}
+          {showToolbar ? (
+            <View
+              key="toolbar"
+              style={[
+                styles.toolbar,
+                expanded && styles.toolbarExpanded,
+                expanded && moreAction != null && styles.toolbarWithMore,
+              ]}
+            >
+              <View style={styles.trailingActions}>
+                {voice ? (
+                  <ComposerIconAction
+                    icon="mic"
+                    label="开始语音输入"
+                    disabled={disabled || voice.disabled}
+                    onPress={() => {
+                      setMenuOpen(false);
+                      voice.onStart();
+                    }}
+                  />
+                ) : null}
+                {showPrimary ? (
+                  <ComposerIconAction
+                    icon={primaryAction.kind === 'send' ? 'send' : 'stop'}
+                    label={primaryLabel}
+                    visual="primary"
+                    disabled={primaryDisabled}
+                    busy={primaryAction.kind === 'busy'}
+                    onPress={() => {
+                      if (primaryDisabled) return;
+                      setMenuOpen(false);
+                      if (primaryAction.kind === 'send')
+                        primaryAction.onPress(value);
+                      else if (primaryAction.kind === 'stop')
+                        primaryAction.onPress();
+                    }}
+                  />
+                ) : null}
+              </View>
             </View>
           ) : null}
         </View>
         {voice && voice.status !== 'idle' ? (
           <View style={styles.voice}>
-            <Text style={styles.transcript} accessibilityLiveRegion="polite">
+            <ComposerIconAction
+              icon="close"
+              visual="cancel"
+              label="取消语音输入"
+              disabled={disabled || voice.disabled}
+              onPress={voice.onCancel}
+            />
+            <Text
+              numberOfLines={1}
+              ellipsizeMode="head"
+              style={[
+                styles.transcript,
+                !voice.transcript && styles.transcriptPlaceholder,
+              ]}
+              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"
+            {voice.status === 'listening' ? (
+              <ComposerIconAction
+                icon="stop"
+                visual="primary"
+                label="停止语音输入"
                 disabled={disabled || voice.disabled}
-                onPress={voice.onCancel}
+                onPress={voice.onStop}
               />
-            </View>
+            ) : null}
           </View>
         ) : null}
-        {footer}
+        {footer != null ? <View style={styles.accessory}>{footer}</View> : null}
       </View>
     );
   }

package/src/components/Composer/ComposerIconAction.tsx

@@ -0,0 +1,71 @@
+import { ActivityIndicator, Pressable, View } from 'react-native';
+import { Icon, useColors, useThemedStyles } from '@unif/react-native-design';
+import {
+  COMPOSER_ACTION_ICON_SIZE,
+  COMPOSER_PRIMARY_ICON_SIZE,
+} from './constants';
+import { createStyles } from './styles';
+import { useMousePress } from './useMousePress';
+import type { ComposerIconActionProps } from './types';
+
+export function ComposerIconAction({
+  icon,
+  label,
+  onPress,
+  disabled = false,
+  busy = false,
+  expanded,
+  visual = 'icon',
+}: ComposerIconActionProps) {
+  const colors = useColors();
+  const styles = useThemedStyles(createStyles);
+  const unavailable = disabled || busy;
+  const { mousePressed, ...mouseHandlers } = useMousePress(unavailable);
+  const primary = visual === 'primary';
+  const color = primary
+    ? disabled
+      ? colors.foregroundSubtle
+      : colors.onPrimary
+    : colors.foregroundMuted;
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={label}
+      accessibilityState={{ disabled: unavailable, busy, expanded }}
+      disabled={unavailable}
+      onPress={unavailable ? undefined : onPress}
+      {...mouseHandlers}
+      style={styles.action}
+    >
+      {({ pressed }) => (
+        <View
+          pointerEvents="none"
+          style={[
+            styles.actionVisual,
+            primary && styles.primary,
+            visual === 'cancel' && styles.cancel,
+            (pressed || mousePressed) &&
+              (primary ? styles.primaryPressed : styles.actionPressed),
+            disabled &&
+              (primary ? styles.primaryDisabled : styles.actionDisabled),
+          ]}
+        >
+          {busy ? (
+            <ActivityIndicator size="small" color={color} />
+          ) : (
+            <Icon
+              name={icon}
+              size={
+                primary ? COMPOSER_PRIMARY_ICON_SIZE : COMPOSER_ACTION_ICON_SIZE
+              }
+              color={color}
+              style={
+                expanded ? { transform: [{ rotate: '45deg' }] } : undefined
+              }
+            />
+          )}
+        </View>
+      )}
+    </Pressable>
+  );
+}

package/src/components/Composer/ComposerMenuItem.tsx

@@ -0,0 +1,56 @@
+import { ActivityIndicator, Pressable, Text, View } from 'react-native';
+import { Icon, useColors, useThemedStyles } from '@unif/react-native-design';
+import { COMPOSER_MENU_ICON_SIZE } from './constants';
+import { useMousePress } from './useMousePress';
+import { createStyles } from './styles';
+import type { ComposerMenuItemProps } from './types';
+
+export function ComposerMenuItem({
+  action,
+  disabled,
+  onPress,
+}: ComposerMenuItemProps) {
+  const styles = useThemedStyles(createStyles);
+  const colors = useColors();
+  const busy = action.loading === true;
+  const named = action.label.trim().length > 0;
+  const unavailable = disabled || action.disabled === true || busy || !named;
+  const { mousePressed, ...mouseHandlers } = useMousePress(unavailable);
+  return (
+    <Pressable
+      accessible={named}
+      accessibilityRole={named ? 'button' : undefined}
+      accessibilityLabel={named ? action.label : undefined}
+      accessibilityHint={action.accessibilityHint}
+      accessibilityState={{ disabled: unavailable, busy }}
+      disabled={unavailable}
+      onPress={unavailable ? undefined : onPress}
+      {...mouseHandlers}
+      style={({ pressed }) => [
+        styles.menuRow,
+        (pressed || mousePressed) && styles.menuRowPressed,
+        unavailable && styles.actionDisabled,
+      ]}
+    >
+      {action.icon || busy ? (
+        <View
+          testID={`composer-menu-icon-${action.id}`}
+          style={styles.menuIcon}
+          accessibilityElementsHidden
+          importantForAccessibility="no-hide-descendants"
+        >
+          {busy ? (
+            <ActivityIndicator size="small" color={colors.foregroundMuted} />
+          ) : action.icon ? (
+            <Icon
+              name={action.icon}
+              size={COMPOSER_MENU_ICON_SIZE}
+              color={colors.foreground}
+            />
+          ) : null}
+        </View>
+      ) : null}
+      <Text style={styles.menuLabel}>{action.label}</Text>
+    </Pressable>
+  );
+}

package/src/components/Composer/constants.ts

@@ -1,4 +1,13 @@
-export const DEFAULT_MAX_INPUT_HEIGHT = 120;
+import { space, type } from '@unif/react-native-design';
+
+export const COMPOSER_INPUT_LINE_HEIGHT = Math.round(type.body * 1.4);
+export const COMPOSER_INPUT_MAX_LINES = 4;
+export const COMPOSER_PLAIN_VERTICAL_INSET = 2 * space[4];
+export const COMPOSER_ACTION_VISUAL_SIZE = 34;
+export const COMPOSER_ACTION_ICON_SIZE = 22;
+export const COMPOSER_PRIMARY_ICON_SIZE = 18;
+export const COMPOSER_MENU_ICON_CONTAINER_SIZE = 40;
+export const COMPOSER_MENU_ICON_SIZE = 20;
 export const PRIMARY_LABELS = {
   send: '发送',
   stop: '停止回复',