@unif/react-native-chat 3.7.0 → 4.0.0

package/src/actions/types.ts

@@ -1,9 +1,10 @@
-import type { IconName } from '@unif/react-native-design';
+import type { ComponentType } from 'react';
+import type { IconProps } from '@unif/react-native-icons';
 
 export interface ChatAction {
   id: string;
   label: string;
-  icon?: IconName;
+  icon?: ComponentType<IconProps>;
   disabled?: boolean;
   loading?: boolean;
   accessibilityHint?: string;

package/src/components/Attachments/AttachmentItem.tsx

@@ -1,9 +1,13 @@
+import {
+  CloseOutlined,
+  EyeOutlined,
+  RefreshOutlined,
+} from '@unif/react-native-icons';
 import { Pressable, Text, View } from 'react-native';
 import {
   Button,
   CircularProgress,
   GlassLayer,
-  Icon,
   IconButton,
   radius,
   Spinner,
@@ -55,12 +59,7 @@ export function AttachmentItem({
   const removable = item.removable && onRemove;
   const singleAction = item.actions?.length === 1 ? item.actions[0] : undefined;
   const retry =
-    failed &&
-    !caption &&
-    singleAction &&
-    (singleAction.id === 'retry' ||
-      singleAction.icon === 'retry' ||
-      singleAction.icon === 'refresh')
+    failed && !caption && singleAction?.id === 'retry'
       ? singleAction
       : undefined;
   const statusLeft = (imageSize - ATTACHMENT_STATUS_OWNER_SIZE) / 2;
@@ -73,9 +72,8 @@ export function AttachmentItem({
             ATTACHMENT_STATUS_OWNER_SIZE
         )
       : statusLeft;
-  const icon = (
-    <Icon name={ATTACHMENT_ICONS[item.kind ?? 'file']} size={ROW_IMAGE_SIZE} />
-  );
+  const Glyph = ATTACHMENT_ICONS[item.kind ?? 'file'];
+  const icon = <Glyph size={ROW_IMAGE_SIZE} color={colors.foregroundMuted} />;
   const thumbnail = item.thumbnail ? (
     <Thumbnail
       source={item.thumbnail}
@@ -91,16 +89,13 @@ export function AttachmentItem({
       {icon}
     </View>
   );
+  const Glyph2 = retry?.icon ?? RefreshOutlined;
   const statusVisual =
     busy || failed ? (
       <View style={styles.statusVisual}>
         <GlassLayer colorScheme="dark" style={styles.circleGlass} />
         {failed ? (
-          <Icon
-            name={retry?.icon ?? 'refresh'}
-            size={16}
-            color={colors.onPrimary}
-          />
+          <Glyph2 size={16} color={colors.onPrimary} />
         ) : progress !== undefined ? (
           <CircularProgress
             value={progress}
@@ -225,7 +220,7 @@ export function AttachmentItem({
         <View style={styles.actions}>
           {previewable && retry ? (
             <IconButton
-              icon="eye"
+              icon={EyeOutlined}
               size="sm"
               accessibilityLabel={`预览${name}`}
               onPress={() => onPreview?.(item)}
@@ -233,7 +228,7 @@ export function AttachmentItem({
           ) : null}
           {removable ? (
             <IconButton
-              icon="close"
+              icon={CloseOutlined}
               size="sm"
               accessibilityLabel={`移除${name}`}
               disabled={item.removeDisabled}
@@ -332,8 +327,7 @@ export function AttachmentItem({
             {!failed ? (
               <GlassLayer colorScheme="dark" style={styles.circleGlass} />
             ) : null}
-            <Icon
-              name="close"
+            <CloseOutlined
               size={preview ? 12 : 10}
               color={colors.onPrimary}
               strokeWidth={2.5}
@@ -363,7 +357,7 @@ export function AttachmentItem({
       {separatePreview ? (
         <View style={[styles.previewAction, { width: imageSize }]}>
           <IconButton
-            icon="eye"
+            icon={EyeOutlined}
             size="sm"
             accessibilityLabel={`预览${name}`}
             onPress={() => onPreview?.(item)}

package/src/components/Attachments/constants.ts

@@ -1,5 +1,13 @@
+import {
+  FileOutlined,
+  ImageOutlined,
+  PlayOutlined,
+  SoundOutlined,
+} from '@unif/react-native-icons';
+import type { ComponentType } from 'react';
+import type { IconProps } from '@unif/react-native-icons';
 import { icon, r } from '@unif/react-native-design';
-import type { IconName } from '@unif/react-native-design';
+
 import type { ChatAttachmentItem } from './types';
 
 export const CARD_WIDTH = r(76);
@@ -15,12 +23,12 @@ export const ATTACHMENT_STATUS_OWNER_SIZE = Math.max(
 export const ATTACHMENT_REMOVE_OWNER_SIZE = 44;
 export const ATTACHMENT_ICONS: Record<
   NonNullable<ChatAttachmentItem['kind']>,
-  IconName
+  ComponentType<IconProps>
 > = {
-  image: 'image',
-  file: 'file',
-  audio: 'sound',
-  video: 'play',
+  image: ImageOutlined,
+  file: FileOutlined,
+  audio: SoundOutlined,
+  video: PlayOutlined,
 };
 export const STATUS_LABELS = {
   idle: '',

package/src/components/Composer/Composer.tsx

@@ -1,3 +1,10 @@
+import {
+  CloseOutlined,
+  MicOutlined,
+  PlusOutlined,
+  SendOutlined,
+  StopFilled,
+} from '@unif/react-native-icons';
 import {
   forwardRef,
   useEffect,
@@ -119,7 +126,7 @@ export const Composer = forwardRef<ComposerHandle, ComposerProps>(
     const moreAction =
       actions.length > 0 ? (
         <ComposerIconAction
-          icon="plus"
+          icon={PlusOutlined}
           label="更多操作"
           expanded={menuOpen}
           disabled={moreDisabled}
@@ -243,7 +250,7 @@ export const Composer = forwardRef<ComposerHandle, ComposerProps>(
               <View style={styles.trailingActions}>
                 {voice ? (
                   <ComposerIconAction
-                    icon="mic"
+                    icon={MicOutlined}
                     label="开始语音输入"
                     disabled={disabled || voice.disabled}
                     onPress={() => {
@@ -254,7 +261,9 @@ export const Composer = forwardRef<ComposerHandle, ComposerProps>(
                 ) : null}
                 {showPrimary ? (
                   <ComposerIconAction
-                    icon={primaryAction.kind === 'send' ? 'send' : 'stop'}
+                    icon={
+                      primaryAction.kind === 'send' ? SendOutlined : StopFilled
+                    }
                     label={primaryLabel}
                     visual="primary"
                     disabled={primaryDisabled}
@@ -276,7 +285,7 @@ export const Composer = forwardRef<ComposerHandle, ComposerProps>(
         {voice && voice.status !== 'idle' ? (
           <View style={styles.voice}>
             <ComposerIconAction
-              icon="close"
+              icon={CloseOutlined}
               visual="cancel"
               label="取消语音输入"
               disabled={disabled || voice.disabled}
@@ -300,7 +309,7 @@ export const Composer = forwardRef<ComposerHandle, ComposerProps>(
             </View>
             {voice.status === 'listening' || voice.status === 'finishing' ? (
               <ComposerIconAction
-                icon="stop"
+                icon={StopFilled}
                 visual="primary"
                 label="停止语音输入"
                 disabled={

package/src/components/Composer/ComposerIconAction.tsx

@@ -1,5 +1,5 @@
 import { ActivityIndicator, Pressable, View } from 'react-native';
-import { Icon, useColors, useThemedStyles } from '@unif/react-native-design';
+import { useColors, useThemedStyles } from '@unif/react-native-design';
 import {
   COMPOSER_ACTION_ICON_SIZE,
   COMPOSER_PRIMARY_ICON_SIZE,
@@ -28,6 +28,7 @@ export function ComposerIconAction({
       ? colors.foregroundSubtle
       : colors.onPrimary
     : colors.foregroundMuted;
+  const Glyph = icon;
   return (
     <Pressable
       accessibilityRole="button"
@@ -54,8 +55,7 @@ export function ComposerIconAction({
           {busy ? (
             <ActivityIndicator size="small" color={color} />
           ) : (
-            <Icon
-              name={icon}
+            <Glyph
               size={
                 primary
                   ? COMPOSER_PRIMARY_ICON_SIZE

package/src/components/Composer/types.ts

@@ -1,6 +1,8 @@
+import type { ComponentType } from 'react';
+import type { IconProps } from '@unif/react-native-icons';
 import type { ReactNode } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
-import type { IconName, TextFieldHandle } from '@unif/react-native-design';
+import type { TextFieldHandle } from '@unif/react-native-design';
 import type { ChatAction } from '../../actions';
 
 export interface ComposerSendAction {
@@ -65,7 +67,7 @@ export interface ComposerProps {
 export type ComposerHandle = TextFieldHandle;
 
 export interface ComposerIconActionProps {
-  icon: IconName;
+  icon: ComponentType<IconProps>;
   label: string;
   onPress?(): void;
   disabled?: boolean;

package/src/components/Confirmation/Confirmation.tsx

@@ -1,7 +1,11 @@
+import {
+  CheckOutlined,
+  CloseOutlined,
+  WarningOutlined,
+} from '@unif/react-native-icons';
 import { Text, View } from 'react-native';
 import {
   Button,
-  Icon,
   Spinner,
   useColors,
   useThemedStyles,
@@ -44,23 +48,19 @@ export function Confirmation({
       ? statusText
       : (statusText ?? CONFIRMATION_STATUS_TEXT[status]);
 
+  const Glyph =
+    status === 'confirmed'
+      ? CheckOutlined
+      : status === 'cancelled'
+        ? CloseOutlined
+        : WarningOutlined;
   return (
     <View style={[styles.root, { borderColor }, style]} testID={testID}>
       <View style={styles.heading}>
         {status === 'processing' ? (
           <Spinner size={14} color={tint} />
         ) : (
-          <Icon
-            name={
-              status === 'confirmed'
-                ? 'check'
-                : status === 'cancelled'
-                  ? 'close'
-                  : 'warning'
-            }
-            size={14}
-            color={tint}
-          />
+          <Glyph size={14} color={tint} />
         )}
         <Text
           style={[styles.title, status === 'cancelled' && styles.cancelled]}

package/src/components/Feedback/Feedback.tsx

@@ -1,7 +1,7 @@
 import { Text, View } from 'react-native';
 import {
   Button,
-  Icon,
+  r,
   useColors,
   useThemedStyles,
 } from '@unif/react-native-design';
@@ -48,6 +48,7 @@ export function Feedback({
   const toneLabel = FEEDBACK_TONE_LABELS[tone];
   const accessibilityLabel = `${toneLabel}：${title ? `${title}。` : ''}${message}`;
 
+  const Glyph = FEEDBACK_TONE_ICONS[tone];
   return (
     <View
       style={[
@@ -57,7 +58,7 @@ export function Feedback({
       ]}
       testID={testID}
     >
-      <Icon name={FEEDBACK_TONE_ICONS[tone]} color={toneColors.iconColor} />
+      <Glyph size={r(18)} color={toneColors.iconColor} />
       <View style={styles.content}>
         <View accessible accessibilityLabel={accessibilityLabel}>
           {title ? (

package/src/components/Feedback/constants.ts

@@ -1,4 +1,12 @@
-import type { IconName } from '@unif/react-native-design';
+import {
+  ErrorOutlined,
+  InfoOutlined,
+  SuccessOutlined,
+  WarningOutlined,
+} from '@unif/react-native-icons';
+import type { ComponentType } from 'react';
+import type { IconProps } from '@unif/react-native-icons';
+
 import type { FeedbackTone } from './types';
 
 export const FEEDBACK_TONE_LABELS: Readonly<Record<FeedbackTone, string>> = {
@@ -8,9 +16,11 @@ export const FEEDBACK_TONE_LABELS: Readonly<Record<FeedbackTone, string>> = {
   error: '错误',
 };
 
-export const FEEDBACK_TONE_ICONS: Readonly<Record<FeedbackTone, IconName>> = {
-  info: 'info',
-  success: 'success',
-  warning: 'warning',
-  error: 'error',
+export const FEEDBACK_TONE_ICONS: Readonly<
+  Record<FeedbackTone, ComponentType<IconProps>>
+> = {
+  info: InfoOutlined,
+  success: SuccessOutlined,
+  warning: WarningOutlined,
+  error: ErrorOutlined,
 };

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

@@ -1,10 +1,12 @@
+import { ImageOutlined } from '@unif/react-native-icons';
 import { useEffect, useState } from 'react';
 import { Image, View } from 'react-native';
-import { Icon, Thumbnail } from '@unif/react-native-design';
+import { Thumbnail, r, useColors } from '@unif/react-native-design';
 import { styles } from './styles';
 import type { ImageRatio, MarkdownImageProps } from './types';
 
 export function MarkdownImage({ uri, label }: MarkdownImageProps) {
+  const colors = useColors();
   const [width, setWidth] = useState(1);
   const [ratio, setRatio] = useState<ImageRatio | undefined>(undefined);
   useEffect(() => {
@@ -44,7 +46,7 @@ export function MarkdownImage({ uri, label }: MarkdownImageProps) {
           borderRadius: 0,
         }}
         resizeMode="contain"
-        fallback={<Icon name="image" />}
+        fallback={<ImageOutlined size={r(18)} color={colors.foregroundMuted} />}
         accessibilityLabel={label || '图片'}
       />
     </View>

package/src/components/Message/Message.tsx

@@ -1,3 +1,4 @@
+import { AlertOutlined } from '@unif/react-native-icons';
 import { Pressable, Text, View } from 'react-native';
 import {
   Button,
@@ -142,7 +143,7 @@ export function Message(props: MessageProps) {
           <View style={[styles.failureRow, placement === 'end' && styles.end]}>
             {bubble}
             <IconButton
-              icon="alert"
+              icon={AlertOutlined}
               size="sm"
               variant="ghost"
               color={colors.error}

package/src/components/MessageList/MessageListEndButton.tsx

@@ -1,3 +1,4 @@
+import { ArrowDownOutlined } from '@unif/react-native-icons';
 import { useEffect, useRef } from 'react';
 import { Animated, View } from 'react-native';
 import {
@@ -39,7 +40,7 @@ export function MessageListEndButton({
           </View>
         ) : null}
         <IconButton
-          icon="arrow-down"
+          icon={ArrowDownOutlined}
           accessibilityLabel={busy ? '回到最新消息，正在处理' : '回到最新消息'}
           variant="glass"
           size="md"

package/src/components/Process/Process.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { Text, View } from 'react-native';
 import {
   Button,
-  Icon,
+  r,
   useColors,
   useThemedStyles,
 } from '@unif/react-native-design';
@@ -130,6 +130,7 @@ export function Process(props: ProcessProps): React.JSX.Element {
                 onToggle={() => toggleDetails(step.id)}
               />
             );
+          const Glyph = PROCESS_STATUS_ICONS[step.status];
           return (
             <View
               key={step.id}
@@ -150,8 +151,8 @@ export function Process(props: ProcessProps): React.JSX.Element {
                   accessible
                   accessibilityLabel={`${step.title}，${statusLabel}`}
                 >
-                  <Icon
-                    name={PROCESS_STATUS_ICONS[step.status]}
+                  <Glyph
+                    size={r(18)}
                     color={
                       step.status === 'failed'
                         ? colors.error

package/src/components/Process/ProcessCompactStep.tsx

@@ -1,7 +1,11 @@
+import {
+  ChevronDownOutlined,
+  ChevronUpOutlined,
+  SparkOutlined,
+} from '@unif/react-native-icons';
 import { Pressable, ScrollView, Text, View } from 'react-native';
 import {
   Button,
-  Icon,
   Pulse,
   Reveal,
   motion,
@@ -32,24 +36,28 @@ export function ProcessCompactStep({
       : step.status === 'failed'
         ? colors.error
         : colors.foregroundMuted;
-  const icon = (
-    <Icon
-      name={
-        running || step.status === 'completed'
-          ? 'spark'
-          : PROCESS_STATUS_ICONS[step.status]
-      }
-      size={14}
-      color={color}
-    />
-  );
+  const Glyph =
+    step.icon ??
+    (running || step.status === 'completed'
+      ? SparkOutlined
+      : PROCESS_STATUS_ICONS[step.status]);
+  const icon =
+    step.icon === null ? null : (
+      <Glyph
+        size={14}
+        color={step.icon === undefined ? color : colors.foregroundMuted}
+      />
+    );
+  const Glyph2 = expanded ? ChevronUpOutlined : ChevronDownOutlined;
   return (
     <View>
       <Pressable
         testID={`process-step-${step.id}-toggle`}
         accessible
         accessibilityRole={hasDetails ? 'button' : undefined}
-        accessibilityLabel={`${step.title}，${statusText}${elapsed ? `，${elapsed}` : ''}`}
+        accessibilityLabel={[step.title, statusText, elapsed]
+          .filter(Boolean)
+          .join('，')}
         accessibilityState={hasDetails ? { expanded } : undefined}
         disabled={!hasDetails}
         hitSlop={10}
@@ -65,7 +73,7 @@ export function ProcessCompactStep({
             <View style={styles.spacer} />
           </>
         ) : null}
-        {running ? (
+        {running && icon ? (
           <Pulse from={0.4} duration={motion.pulse / 2}>
             {icon}
           </Pulse>
@@ -81,14 +89,12 @@ export function ProcessCompactStep({
             {step.title}
           </Text>
         ) : null}
-        <Text style={styles.compactStatus}>{statusText}</Text>
+        {statusText ? (
+          <Text style={styles.compactStatus}>{statusText}</Text>
+        ) : null}
         {elapsed ? <Text style={styles.elapsed}>{elapsed}</Text> : null}
         {hasDetails ? (
-          <Icon
-            name={expanded ? 'chevron-up' : 'chevron-down'}
-            size={14}
-            color={colors.foregroundSubtle}
-          />
+          <Glyph2 size={14} color={colors.foregroundSubtle} />
         ) : null}
       </Pressable>
       {step.description ? (

package/src/components/Process/ProcessTimelineStep.tsx

@@ -1,7 +1,7 @@
+import { CloseOutlined } from '@unif/react-native-icons';
 import { Text, View } from 'react-native';
 import {
   Button,
-  Icon,
   StatusDot,
   icon,
   useColors,
@@ -35,7 +35,7 @@ export function ProcessTimelineStep({
     >
       <View style={styles.timelineGutter}>
         {step.status === 'cancelled' ? (
-          <Icon name="close" size={icon.xs} color={colors.foregroundSubtle} />
+          <CloseOutlined size={icon.xs} color={colors.foregroundSubtle} />
         ) : (
           <StatusDot
             status={status}

package/src/components/Process/constants.ts

@@ -1,4 +1,13 @@
-import type { IconName } from '@unif/react-native-design';
+import {
+  CircleMinusOutlined,
+  CloseOutlined,
+  ErrorOutlined,
+  SuccessOutlined,
+  ThinkingOutlined,
+} from '@unif/react-native-icons';
+import type { ComponentType } from 'react';
+import type { IconProps } from '@unif/react-native-icons';
+
 import type { ProcessStepStatus } from './types';
 
 export const PROCESS_STATUS_LABELS: Readonly<
@@ -12,11 +21,11 @@ export const PROCESS_STATUS_LABELS: Readonly<
 };
 
 export const PROCESS_STATUS_ICONS: Readonly<
-  Record<ProcessStepStatus, IconName>
+  Record<ProcessStepStatus, ComponentType<IconProps>>
 > = {
-  pending: 'circle-minus',
-  running: 'thinking',
-  completed: 'success',
-  failed: 'error',
-  cancelled: 'close',
+  pending: CircleMinusOutlined,
+  running: ThinkingOutlined,
+  completed: SuccessOutlined,
+  failed: ErrorOutlined,
+  cancelled: CloseOutlined,
 };

package/src/components/Process/types.ts

@@ -1,4 +1,7 @@
+import type { ComponentType } from 'react';
+import type { IconProps } from '@unif/react-native-icons';
 import type { ReactNode } from 'react';
+
 import type { StyleProp, ViewStyle } from 'react-native';
 import type { ChatAction } from '../../actions';
 
@@ -9,6 +12,8 @@ export interface ProcessStep {
   id: string;
   title: string;
   status: ProcessStepStatus;
+  /** compact 的活动图标；null 不显示，省略时沿状态呈现。 */
+  icon?: ComponentType<IconProps> | null;
   /** 调用者提供的状态显示文案；不改变 status 的语义。 */
   statusText?: string;
   description?: string;

package/src/components/Sources/Sources.tsx

@@ -1,5 +1,6 @@
+import { ChevronRightOutlined } from '@unif/react-native-icons';
 import { Pressable, Text, View } from 'react-native';
-import { Icon, useThemedStyles } from '@unif/react-native-design';
+import { r, useColors, useThemedStyles } from '@unif/react-native-design';
 import { DEFAULT_SOURCES_TITLE } from './constants';
 import { createStyles } from './styles';
 import type { SourceItem, SourcesProps } from './types';
@@ -12,6 +13,7 @@ export function Sources({
   testID,
 }: SourcesProps): React.JSX.Element | null {
   const styles = useThemedStyles(createStyles);
+  const colors = useColors();
 
   if (items.length === 0) return null;
 
@@ -26,7 +28,9 @@ export function Sources({
           <Text style={styles.description}>{item.description}</Text>
         ) : null}
       </View>
-      {showChevron ? <Icon name="chevron-right" /> : null}
+      {showChevron ? (
+        <ChevronRightOutlined size={r(18)} color={colors.foregroundMuted} />
+      ) : null}
     </>
   );
 

package/src/components/Suggestions/Suggestions.tsx

@@ -1,5 +1,5 @@
 import { View } from 'react-native';
-import { Chip, Icon, useColors } from '@unif/react-native-design';
+import { Chip, useColors } from '@unif/react-native-design';
 import { SUGGESTION_ICON_SIZE } from './constants';
 import { styles } from './styles';
 import type { SuggestionsProps } from './types';
@@ -29,11 +29,7 @@ export function Suggestions({
           disabled={item.disabled}
           leading={
             item.icon ? (
-              <Icon
-                name={item.icon}
-                size={SUGGESTION_ICON_SIZE}
-                color={colors.primary}
-              />
+              <item.icon size={SUGGESTION_ICON_SIZE} color={colors.primary} />
             ) : undefined
           }
           onPress={onSelect ? () => onSelect(item) : undefined}

package/src/components/Suggestions/types.ts

@@ -1,11 +1,13 @@
-import type { IconName } from '@unif/react-native-design';
+import type { ComponentType } from 'react';
+import type { IconProps } from '@unif/react-native-icons';
+
 import type { StyleProp, ViewStyle } from 'react-native';
 
 export interface SuggestionItem {
   id: string;
   label: string;
   /** 14 布局单位的主题主色图标，普通与选中状态保持相同图标样式。 */
-  icon?: IconName;
+  icon?: ComponentType<IconProps>;
   selected?: boolean;
   loading?: boolean;
   disabled?: boolean;