@unif/react-native-chat 3.6.1 → 4.0.0

package/src/components/Composer/Composer.tsx

@@ -1,3 +1,10 @@
+import {
+  CloseOutlined,
+  MicOutlined,
+  PlusOutlined,
+  SendOutlined,
+  StopFilled,
+} from '@unif/react-native-icons';
 import {
   forwardRef,
   useEffect,
@@ -14,6 +21,7 @@ import {
 } from 'react-native';
 import {
   ActionMenuContent,
+  GlassLayer,
   fixed,
   Textarea,
   useTheme,
@@ -118,7 +126,7 @@ export const Composer = forwardRef<ComposerHandle, ComposerProps>(
     const moreAction =
       actions.length > 0 ? (
         <ComposerIconAction
-          icon="plus"
+          icon={PlusOutlined}
           label="更多操作"
           expanded={menuOpen}
           disabled={moreDisabled}
@@ -137,6 +145,7 @@ export const Composer = forwardRef<ComposerHandle, ComposerProps>(
           }
         }}
       >
+        {surface === 'card' ? <GlassLayer style={styles.glass} /> : null}
         {header != null ? (
           <View
             style={[
@@ -241,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={() => {
@@ -252,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}
@@ -274,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}
@@ -298,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/styles.ts

@@ -9,10 +9,11 @@ export const createStyles = (colors: ColorTokens, shadows: ShadowTokens) =>
     card: {
       borderRadius: r(20),
       borderWidth: 0.5,
-      borderColor: colors.outline,
-      backgroundColor: colors.surface,
+      borderColor: colors.glassBorder,
       ...shadows.card,
     },
+    // 仅材质层定义圆角，根容器保留浮菜单的溢出空间。
+    glass: { borderRadius: r(20) },
     accessory: { padding: space[3] },
     header: {
       padding: space[2],

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 {
@@ -50,7 +52,7 @@ export interface ComposerProps {
   voice?: ComposerVoiceControl;
   header?: ReactNode;
   footer?: ReactNode;
-  /** card 提供统一表面；plain 由外层提供表面，内部 Textarea 均不单独绘制表面。 */
+  /** card 提供统一玻璃表面；plain 由外层提供表面，内部 Textarea 均不单独绘制表面。 */
   surface?: 'card' | 'plain';
   /** Textarea 整体最小高度（含内间距），默认 44，不低于最小触达高度。 */
   minInputHeight?: number;
@@ -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/MarkdownContent.tsx

@@ -16,6 +16,7 @@ export function MarkdownContent({
   text,
   onLinkPress,
   outgoing = false,
+  style,
 }: MarkdownContentProps) {
   const { scheme } = useTheme();
   const styles = useThemedStyles(
@@ -96,5 +97,5 @@ export function MarkdownContent({
     styles: markdown.styles,
   });
   const content = Children.toArray(nodes);
-  return content.length ? <View>{content}</View> : null;
+  return content.length ? <View style={style}>{content}</View> : null;
 }

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/MarkdownContent/types.ts

@@ -1,7 +1,10 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+
 export interface MarkdownContentProps {
   text: string;
   onLinkPress?(url: string): void;
   outgoing?: boolean;
+  style?: StyleProp<ViewStyle>;
 }
 
 export interface MarkdownSvgLabelProps {

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,
@@ -49,7 +50,6 @@ export function Message(props: MessageProps) {
       placement === 'end' && styles.outgoing,
     ],
     surface === 'outlined' && styles.outlined,
-    status === 'failed' && styles.failed,
     waiting &&
       surface === 'bubble' &&
       placement === 'start' &&
@@ -66,6 +66,7 @@ export function Message(props: MessageProps) {
             text={props.text}
             onLinkPress={props.onLinkPress}
             outgoing={surface === 'bubble' && placement === 'end'}
+            style={status === 'failed' ? styles.failed : undefined}
           />
         ) : (
           <Text
@@ -75,6 +76,7 @@ export function Message(props: MessageProps) {
               surface === 'bubble' &&
                 placement === 'end' &&
                 styles.outgoingText,
+              status === 'failed' && styles.failed,
             ]}
             numberOfLines={props.numberOfLines}
           >
@@ -86,7 +88,12 @@ export function Message(props: MessageProps) {
       )}
       {waiting ? <MessageWaiting label={statusText} /> : null}
       {statusText && !waiting ? (
-        <Text style={[styles.status, status === 'failed' && styles.errorText]}>
+        <Text
+          style={[
+            styles.status,
+            status === 'failed' && [styles.errorText, styles.failed],
+          ]}
+        >
           {statusText}
         </Text>
       ) : null}
@@ -136,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,8 +1,8 @@
+import { ArrowDownOutlined } from '@unif/react-native-icons';
 import { useEffect, useRef } from 'react';
 import { Animated, View } from 'react-native';
 import {
   IconButton,
-  Reveal,
   Spinner,
   usePrefersReducedMotion,
   useThemedStyles,
@@ -33,29 +33,23 @@ export function MessageListEndButton({
   }, [reducedMotion, scale]);
   return (
     <View style={styles.returnToEnd} pointerEvents="box-none">
-      <Reveal>
-        <Animated.View
-          style={[styles.returnVisual, { transform: [{ scale }] }]}
-        >
-          {busy ? (
-            <View style={styles.returnProgress} pointerEvents="none">
-              <Spinner size={44} thickness={2} />
-            </View>
-          ) : null}
-          <IconButton
-            icon="arrow-down"
-            accessibilityLabel={
-              busy ? '回到最新消息，正在处理' : '回到最新消息'
-            }
-            variant="ghost"
-            size="md"
-            surfaceSize={36}
-            iconSize={18}
-            style={styles.returnButton}
-            onPress={onPress}
-          />
-        </Animated.View>
-      </Reveal>
+      <Animated.View style={[styles.returnVisual, { transform: [{ scale }] }]}>
+        {busy ? (
+          <View style={styles.returnProgress} pointerEvents="none">
+            <Spinner size={44} thickness={2} />
+          </View>
+        ) : null}
+        <IconButton
+          icon={ArrowDownOutlined}
+          accessibilityLabel={busy ? '回到最新消息，正在处理' : '回到最新消息'}
+          variant="glass"
+          size="md"
+          surfaceSize={36}
+          iconSize={18}
+          style={styles.returnButton}
+          onPress={onPress}
+        />
+      </Animated.View>
     </View>
   );
 }

package/src/components/MessageList/styles.ts

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native';
 import type { ColorTokens, ShadowTokens } from '@unif/react-native-design';
-export const createStyles = (colors: ColorTokens, shadows: ShadowTokens) =>
+export const createStyles = (_colors: ColorTokens, shadows: ShadowTokens) =>
   StyleSheet.create({
     root: { flex: 1, minHeight: 0, minWidth: 0 },
     list: { flex: 1 },
@@ -23,7 +23,6 @@ export const createStyles = (colors: ColorTokens, shadows: ShadowTokens) =>
     returnButton: {
       alignSelf: 'center',
       borderRadius: 18,
-      backgroundColor: colors.surface,
       ...shadows.card,
     },
   });

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;