@unif/react-native-chat 3.0.0 → 3.2.0

package/src/components/Composer/styles.ts

@@ -17,6 +17,10 @@ export const createStyles = (colors: ColorTokens, shadows: ShadowTokens) =>
       ...shadows.card,
     },
     accessory: { padding: space[3] },
+    header: {
+      borderBottomWidth: 0.5,
+      borderBottomColor: colors.outlineVariant,
+    },
     regular: {
       flexDirection: 'row',
       alignItems: 'flex-end',
@@ -26,7 +30,12 @@ export const createStyles = (colors: ColorTokens, shadows: ShadowTokens) =>
     },
     expanded: { flexDirection: 'column', alignItems: 'stretch', gap: 0 },
     hidden: { display: 'none' },
-    input: { flex: 1, minWidth: 0 },
+    input: {
+      flex: 1,
+      minWidth: 0,
+      alignSelf: 'stretch',
+      justifyContent: 'center',
+    },
     inputExpanded: { flex: 0, width: '100%' },
     // 保持原生堆叠特征稳定，避免聚焦展开时重排输入所在的原生视图树。
     more: { width: fixed.hitTarget, height: fixed.hitTarget, zIndex: 1 },
@@ -119,11 +128,13 @@ export const createStyles = (colors: ColorTokens, shadows: ShadowTokens) =>
     voice: {
       flexDirection: 'row',
       alignItems: 'center',
-      gap: space[2],
+      gap: space[3],
       paddingVertical: space[1],
       paddingHorizontal: space[2],
       borderRadius: radius['3xl'],
       backgroundColor: colors.primaryContainerSubtle,
+      borderWidth: 0.5,
+      borderColor: colors.brandTint14,
     },
     transcript: {
       flex: 1,
@@ -131,5 +142,15 @@ export const createStyles = (colors: ColorTokens, shadows: ShadowTokens) =>
       color: colors.foreground,
       fontSize: type.body,
     },
+    voiceBody: {
+      flex: 1,
+      minWidth: 0,
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: space[4],
+      minHeight: r(34),
+    },
+    wave: { flexDirection: 'row', alignItems: 'center', gap: 3, height: r(20) },
+    waveBar: { width: 2.5, borderRadius: 1.5, backgroundColor: colors.primary },
     transcriptPlaceholder: { color: colors.foregroundSubtle },
   });

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

@@ -8,15 +8,27 @@ import {
 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 { createStyles, createOutgoingStyles } from './styles';
 import type { MarkdownContentProps, MarkdownSvgLabelProps } from './types';
 import { MarkdownImage } from './MarkdownImage/MarkdownImage';
 
-export function MarkdownContent({ text, onLinkPress }: MarkdownContentProps) {
+export function MarkdownContent({
+  text,
+  onLinkPress,
+  outgoing = false,
+}: MarkdownContentProps) {
   const { scheme } = useTheme();
-  const styles = useThemedStyles(createStyles);
+  const styles = useThemedStyles(
+    outgoing ? createOutgoingStyles : createStyles
+  );
   const markdown = useMemo(() => {
     const instance = new Renderer();
+    const renderCode = instance.code.bind(instance);
+    instance.code = (value, language, containerStyle, textStyle) =>
+      renderCode(value, language, containerStyle, {
+        ...textStyle,
+        ...styles.codeText,
+      });
     // 上游 table 节点未提供 key，保留其渲染并补齐稳定的节点身份。
     const renderTable = instance.table.bind(instance);
     instance.table = (...args) => (

package/src/components/Message/MarkdownContent/styles.ts

@@ -2,60 +2,72 @@ import { StyleSheet } from 'react-native';
 import { type, space, fontMono } from '@unif/react-native-design';
 import type { ColorTokens } from '@unif/react-native-design';
 
-export const createStyles = (colors: ColorTokens) => {
+const makeMarkdownStyles = (colors: ColorTokens, outgoing: boolean) => {
+  const textColor = outgoing ? colors.onPrimary : colors.foreground;
   const body = {
-    fontSize: type.body,
-    lineHeight: type.body * 1.5,
-    color: colors.foreground,
+    fontSize: type.sm,
+    lineHeight: type.sm * 1.5,
+    color: textColor,
   };
   return StyleSheet.create({
     text: body,
     em: { ...body, fontStyle: 'italic' },
     strong: { ...body, fontWeight: 'bold' },
     strikethrough: { ...body, textDecorationLine: 'line-through' },
-    link: { ...body, color: colors.primary },
+    link: {
+      ...body,
+      color: outgoing ? colors.onPrimary : colors.primary,
+      textDecorationLine: 'underline',
+    },
     li: body,
     codespan: {
       ...body,
       fontFamily: fontMono,
+      color: colors.foreground,
       backgroundColor: colors.surfaceContainer,
     },
     h1: {
       fontSize: type.h1,
       lineHeight: type.h1 * 1.4,
-      color: colors.foreground,
+      color: textColor,
       borderBottomColor: colors.outline,
     },
     h2: {
       fontSize: type.h2,
       lineHeight: type.h2 * 1.4,
-      color: colors.foreground,
+      color: textColor,
       borderBottomColor: colors.outline,
     },
     h3: {
       fontSize: type.h3,
       lineHeight: type.h3 * 1.4,
-      color: colors.foreground,
+      color: textColor,
     },
     h4: {
       fontSize: type.body,
       lineHeight: type.body * 1.4,
-      color: colors.foreground,
+      color: textColor,
     },
     h5: {
       fontSize: type.sm,
       lineHeight: type.sm * 1.4,
-      color: colors.foreground,
+      color: textColor,
     },
     h6: {
       fontSize: type.xs,
       lineHeight: type.xs * 1.4,
-      color: colors.foreground,
+      color: textColor,
     },
     paragraph: { paddingVertical: space[1] },
     code: { padding: space[2], backgroundColor: colors.surfaceContainer },
+    codeText: { ...body, color: colors.foreground, fontFamily: fontMono },
     blockquote: { borderLeftColor: colors.outline },
     hr: { borderBottomColor: colors.outline },
     table: { borderColor: colors.outline },
   });
 };
+
+export const createStyles = (colors: ColorTokens) =>
+  makeMarkdownStyles(colors, false);
+export const createOutgoingStyles = (colors: ColorTokens) =>
+  makeMarkdownStyles(colors, true);

package/src/components/Message/MarkdownContent/types.ts

@@ -1,6 +1,7 @@
 export interface MarkdownContentProps {
   text: string;
   onLinkPress?(url: string): void;
+  outgoing?: boolean;
 }
 
 export interface MarkdownSvgLabelProps {

package/src/components/Message/Message.tsx

@@ -1,5 +1,11 @@
 import { Pressable, Text, View } from 'react-native';
-import { Button, Spinner, useThemedStyles } from '@unif/react-native-design';
+import {
+  Button,
+  IconButton,
+  Spinner,
+  useThemedStyles,
+  useColors,
+} from '@unif/react-native-design';
 import { MarkdownContent } from './MarkdownContent/MarkdownContent';
 import { createStyles } from './styles';
 import { isNestedAction } from './isNestedAction';
@@ -23,6 +29,7 @@ export function Message(props: MessageProps) {
     testID,
   } = props;
   const styles = useThemedStyles(createStyles);
+  const colors = useColors();
   const hasContent =
     Boolean(props.text?.length) ||
     (props.children !== undefined &&
@@ -47,11 +54,20 @@ export function Message(props: MessageProps) {
       {header}
       {props.text !== undefined ? (
         props.format === 'markdown' ? (
-          <MarkdownContent text={props.text} onLinkPress={props.onLinkPress} />
+          <MarkdownContent
+            text={props.text}
+            onLinkPress={props.onLinkPress}
+            outgoing={surface === 'bubble' && placement === 'end'}
+          />
         ) : (
           <Text
             selectable
-            style={styles.text}
+            style={[
+              styles.text,
+              surface === 'bubble' &&
+                placement === 'end' &&
+                styles.outgoingText,
+            ]}
             numberOfLines={props.numberOfLines}
           >
             {props.text}
@@ -117,18 +133,33 @@ export function Message(props: MessageProps) {
         )}
         {actions.length ? (
           <View style={styles.actions}>
-            {actions.map((action) => (
-              <Button
-                key={action.id}
-                label={action.label}
-                leftIcon={action.icon}
-                disabled={action.disabled}
-                loading={action.loading}
-                accessibilityHint={action.accessibilityHint}
-                variant="text"
-                onPress={action.onPress}
-              />
-            ))}
+            {actions.map((action) =>
+              action.icon ? (
+                <IconButton
+                  key={action.id}
+                  icon={action.icon}
+                  size="sm"
+                  variant="ghost"
+                  color={colors.foregroundSubtle}
+                  accessibilityLabel={action.label}
+                  accessibilityHint={action.accessibilityHint}
+                  disabled={action.disabled}
+                  loading={action.loading}
+                  onPress={action.onPress}
+                />
+              ) : (
+                <Button
+                  key={action.id}
+                  label={action.label}
+                  leftIcon={action.icon}
+                  disabled={action.disabled}
+                  loading={action.loading}
+                  accessibilityHint={action.accessibilityHint}
+                  variant="text"
+                  onPress={action.onPress}
+                />
+              )
+            )}
           </View>
         ) : null}
       </View>

package/src/components/Message/styles.ts

@@ -7,36 +7,47 @@ export const createStyles = (colors: ColorTokens) =>
     root: {
       flexDirection: 'row',
       alignItems: 'flex-start',
-      gap: space[2],
+      gap: space[3],
       minWidth: 0,
-      paddingVertical: space[2],
     },
     end: { flexDirection: 'row-reverse' },
     column: {
-      flexShrink: 1,
+      flex: 1,
       maxWidth: '100%',
       gap: space[1],
       alignItems: 'flex-start',
     },
     columnEnd: { alignItems: 'flex-end' },
-    fullWidth: { flex: 1, alignSelf: 'stretch' },
-    content: { minWidth: 0, maxWidth: '100%', gap: space[2] },
+    fullWidth: { alignSelf: 'stretch', maxWidth: '100%' },
+    content: { minWidth: 0, maxWidth: '78%', gap: space[2] },
     bubble: {
-      padding: space[3],
-      borderRadius: radius.lg,
+      paddingHorizontal: space[5],
+      paddingVertical: space[4],
+      borderRadius: radius['2xl'],
       backgroundColor: colors.surface,
     },
-    outgoing: { backgroundColor: colors.primaryContainer },
+    outgoing: { backgroundColor: colors.primary },
+    outgoingText: { color: colors.onPrimary },
     outlined: {
-      padding: space[3],
-      borderRadius: radius.lg,
+      paddingHorizontal: space[5],
+      paddingVertical: space[4],
+      borderRadius: radius['2xl'],
       borderWidth: 1,
       borderColor: colors.outline,
     },
     failed: { borderWidth: 1, borderColor: colors.error },
-    text: { fontSize: type.body, color: colors.foreground },
+    text: {
+      fontSize: type.sm,
+      lineHeight: type.sm * 1.5,
+      color: colors.foreground,
+    },
     name: { fontSize: type.sm, color: colors.foregroundMuted },
     status: { fontSize: type.sm, color: colors.foregroundMuted },
     errorText: { color: colors.error },
-    actions: { flexDirection: 'row', flexWrap: 'wrap', gap: space[2] },
+    actions: {
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      gap: space[1],
+      marginTop: space[1],
+    },
   });

package/src/components/MessageList/MessageList.tsx

@@ -2,9 +2,14 @@ import { useCallback, useImperativeHandle, useMemo, useRef } from 'react';
 import type { RefAttributes } from 'react';
 import { FlatList, View } from 'react-native';
 import type { ListRenderItemInfo } from 'react-native';
-import { Button } from '@unif/react-native-design';
+import {
+  Button,
+  IconButton,
+  Spinner,
+  useThemedStyles,
+} from '@unif/react-native-design';
 import { DEFAULT_END_THRESHOLD } from './constants';
-import { styles } from './styles';
+import { createStyles } from './styles';
 import { useWebPrependAnchor } from './webPrependAnchor';
 import { useMessageListScroll } from './useMessageListScroll';
 import { MessageListRow } from './MessageListRow';
@@ -25,15 +30,19 @@ export function MessageList<T>({
   followOutput = 'whenAtEnd',
   endThreshold = DEFAULT_END_THRESHOLD,
   showScrollToEnd = true,
+  scrollToEndBusy = false,
   onAtEndChange,
   hasEarlier = false,
   loadingEarlier = false,
   onRequestEarlier,
   keyboardDismissMode = 'on-drag',
+  contentContainerStyle,
+  showsVerticalScrollIndicator = false,
   style,
   testID,
   ref,
 }: MessageListProps<T> & RefAttributes<MessageListHandle>) {
+  const styles = useThemedStyles(createStyles);
   const listRef = useRef<FlatList<T>>(null);
   const keys = useMemo(() => items.map(keyExtractor), [items, keyExtractor]);
   const { getRowNativeID, preservingPrependRef, cancelPrependPreservation } =
@@ -97,10 +106,7 @@ export function MessageList<T>({
     () => (footer ? <View>{footer}</View> : undefined),
     [footer]
   );
-  const listEmpty = useMemo(
-    () => (empty ? <View>{empty}</View> : undefined),
-    [empty]
-  );
+  const listEmpty = useMemo(() => (empty ? <>{empty}</> : undefined), [empty]);
   return (
     <View style={[styles.root, style]} testID={testID}>
       <FlatList
@@ -116,6 +122,8 @@ export function MessageList<T>({
         ListEmptyComponent={listEmpty}
         maintainVisibleContentPosition={MAINTAIN_VISIBLE_POSITION}
         keyboardDismissMode={keyboardDismissMode}
+        contentContainerStyle={contentContainerStyle}
+        showsVerticalScrollIndicator={showsVerticalScrollIndicator}
         keyboardShouldPersistTaps="handled"
         scrollEventThrottle={16}
         onLayout={onLayout}
@@ -127,12 +135,25 @@ export function MessageList<T>({
         onMomentumScrollEnd={onMomentumScrollEnd}
       />
       {showScrollToEnd && items.length > 0 && !atEnd ? (
-        <Button
-          label="回到最新消息"
-          variant="secondary"
-          style={styles.returnToEnd}
-          onPress={() => scrollToEnd()}
-        />
+        <View style={styles.returnToEnd} pointerEvents="box-none">
+          {scrollToEndBusy ? (
+            <View style={styles.returnProgress} pointerEvents="none">
+              <Spinner size={44} thickness={2} />
+            </View>
+          ) : null}
+          <IconButton
+            icon="arrow-down"
+            accessibilityLabel={
+              scrollToEndBusy ? '回到最新消息，正在处理' : '回到最新消息'
+            }
+            variant="ghost"
+            size="md"
+            surfaceSize={36}
+            iconSize={18}
+            style={styles.returnButton}
+            onPress={() => scrollToEnd()}
+          />
+        </View>
       ) : null}
     </View>
   );

package/src/components/MessageList/styles.ts

@@ -1,7 +1,23 @@
 import { StyleSheet } from 'react-native';
-import { space } from '@unif/react-native-design';
-export const styles = StyleSheet.create({
-  root: { flex: 1, minHeight: 0, minWidth: 0 },
-  list: { flex: 1 },
-  returnToEnd: { position: 'absolute', bottom: space[3], alignSelf: 'center' },
-});
+import type { ColorTokens, ShadowTokens } from '@unif/react-native-design';
+export const createStyles = (colors: ColorTokens, shadows: ShadowTokens) =>
+  StyleSheet.create({
+    root: { flex: 1, minHeight: 0, minWidth: 0 },
+    list: { flex: 1 },
+    returnToEnd: {
+      position: 'absolute',
+      bottom: 0,
+      alignSelf: 'center',
+      width: 44,
+      height: 44,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    returnProgress: StyleSheet.absoluteFill,
+    returnButton: {
+      alignSelf: 'center',
+      borderRadius: 18,
+      backgroundColor: colors.surface,
+      ...shadows.card,
+    },
+  });

package/src/components/MessageList/types.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import type { StyleProp, ViewStyle } from 'react-native';
+import type { ScrollViewProps, StyleProp, ViewStyle } from 'react-native';
 
 export interface MessageListScrollOptions {
   animated?: boolean;
@@ -20,11 +20,15 @@ export interface MessageListProps<T> {
   followOutput?: 'whenAtEnd' | 'never';
   endThreshold?: number;
   showScrollToEnd?: boolean;
+  /** 外部仍在生成内容时显示返回入口的进度外环，不影响滚动操作。 */
+  scrollToEndBusy?: boolean;
   onAtEndChange?(atEnd: boolean): void;
   hasEarlier?: boolean;
   loadingEarlier?: boolean;
   onRequestEarlier?(): void;
-  keyboardDismissMode?: 'none' | 'on-drag';
+  keyboardDismissMode?: ScrollViewProps['keyboardDismissMode'];
+  contentContainerStyle?: StyleProp<ViewStyle>;
+  showsVerticalScrollIndicator?: boolean;
   style?: StyleProp<ViewStyle>;
   testID?: string;
 }

package/src/components/Process/Process.tsx

@@ -8,6 +8,7 @@ import {
 } from '@unif/react-native-design';
 import { PROCESS_STATUS_ICONS, PROCESS_STATUS_LABELS } from './constants';
 import { createStyles } from './styles';
+import { ProcessCompactStep } from './ProcessCompactStep';
 import type { ProcessProps, ProcessStep } from './types';
 
 function idsWithDetails(
@@ -43,7 +44,7 @@ function formatElapsedMs(elapsedMs: number | undefined): string | undefined {
 }
 
 export function Process(props: ProcessProps): React.JSX.Element {
-  const { steps, title, identity, style, testID } = props;
+  const { steps, title, identity, style, testID, variant = 'card' } = props;
   const styles = useThemedStyles(createStyles);
   const colors = useColors();
   const isControlled = props.expandedIds !== undefined;
@@ -71,18 +72,31 @@ export function Process(props: ProcessProps): React.JSX.Element {
   };
 
   return (
-    <View style={[styles.root, style]} testID={testID}>
+    <View
+      style={[variant === 'compact' ? styles.compactRoot : styles.root, style]}
+      testID={testID}
+    >
       {title || identity ? (
         <View style={styles.heading}>
           {identity}
           {title ? <Text style={styles.headingTitle}>{title}</Text> : null}
         </View>
       ) : null}
-      <View style={styles.steps}>
+      <View style={variant === 'compact' ? styles.compactSteps : styles.steps}>
         {steps.map((step, index) => {
           const statusLabel = PROCESS_STATUS_LABELS[step.status];
           const elapsed = formatElapsedMs(step.elapsedMs);
           const isExpanded = expandedIds.includes(step.id);
+          if (variant === 'compact')
+            return (
+              <ProcessCompactStep
+                key={step.id}
+                step={step}
+                expanded={isExpanded}
+                elapsed={elapsed}
+                onToggle={() => toggleDetails(step.id)}
+              />
+            );
           return (
             <View
               key={step.id}

package/src/components/Process/ProcessCompactStep.tsx

@@ -0,0 +1,110 @@
+import { Pressable, ScrollView, Text, View } from 'react-native';
+import {
+  Button,
+  Icon,
+  Pulse,
+  Reveal,
+  pressedOpacity,
+  r,
+  useColors,
+  useThemedStyles,
+} from '@unif/react-native-design';
+import { PROCESS_STATUS_ICONS, PROCESS_STATUS_LABELS } from './constants';
+import { createStyles } from './styles';
+import type { ProcessCompactStepProps } from './types';
+
+export function ProcessCompactStep({
+  step,
+  expanded,
+  elapsed,
+  onToggle,
+}: ProcessCompactStepProps) {
+  const styles = useThemedStyles(createStyles);
+  const colors = useColors();
+  const hasDetails = step.details != null;
+  const running = step.status === 'running';
+  const color = running
+    ? colors.primary
+    : step.status === 'completed'
+      ? colors.success
+      : step.status === 'failed'
+        ? colors.error
+        : colors.foregroundMuted;
+  const icon = (
+    <Icon
+      name={
+        running || step.status === 'completed'
+          ? 'spark'
+          : PROCESS_STATUS_ICONS[step.status]
+      }
+      size={r(14)}
+      color={color}
+    />
+  );
+  return (
+    <View>
+      <Pressable
+        testID={`process-step-${step.id}-toggle`}
+        accessible
+        accessibilityRole={hasDetails ? 'button' : undefined}
+        accessibilityLabel={`${step.title}，${PROCESS_STATUS_LABELS[step.status]}${elapsed ? `，${elapsed}` : ''}`}
+        accessibilityState={hasDetails ? { expanded } : undefined}
+        disabled={!hasDetails}
+        onPress={onToggle}
+        style={({ pressed }) => [
+          styles.compactHeader,
+          pressed && { opacity: pressedOpacity },
+        ]}
+      >
+        {running ? <Pulse>{icon}</Pulse> : icon}
+        <Text
+          style={styles.compactTitle}
+          testID={`process-step-title-${step.id}`}
+          numberOfLines={1}
+        >
+          {step.title}
+        </Text>
+        {elapsed ? <Text style={styles.elapsed}>{elapsed}</Text> : null}
+        {hasDetails ? (
+          <Icon
+            name={expanded ? 'chevron-up' : 'chevron-down'}
+            size={r(14)}
+            color={colors.foregroundSubtle}
+          />
+        ) : null}
+      </Pressable>
+      {step.description ? (
+        <Text style={styles.compactDescription}>{step.description}</Text>
+      ) : null}
+      {hasDetails && expanded ? (
+        <Reveal>
+          <ScrollView
+            testID={`process-step-${step.id}-details`}
+            style={styles.compactDetails}
+            nestedScrollEnabled
+            keyboardShouldPersistTaps="handled"
+          >
+            {step.details}
+          </ScrollView>
+        </Reveal>
+      ) : null}
+      {step.actions?.length ? (
+        <View style={styles.actions}>
+          {step.actions.map((action) => (
+            <Button
+              key={action.id}
+              label={action.label}
+              leftIcon={action.icon}
+              onPress={action.onPress}
+              disabled={action.disabled}
+              loading={action.loading}
+              accessibilityHint={action.accessibilityHint}
+              size="sm"
+              variant="text"
+            />
+          ))}
+        </View>
+      ) : null}
+    </View>
+  );
+}

package/src/components/Process/styles.ts

@@ -1,9 +1,35 @@
 import { StyleSheet } from 'react-native';
-import { fw, radius, space, type } from '@unif/react-native-design';
+import { fw, r, radius, space, type } from '@unif/react-native-design';
 import type { ColorTokens } from '@unif/react-native-design';
 
 export const createStyles = (colors: ColorTokens) =>
   StyleSheet.create({
+    compactRoot: { gap: space[2] },
+    compactSteps: { gap: space[2] },
+    compactHeader: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: space[2],
+      minHeight: 44,
+      paddingVertical: space[1],
+    },
+    compactTitle: {
+      flex: 1,
+      minWidth: 0,
+      color: colors.foregroundMuted,
+      fontSize: type.xs,
+      fontWeight: fw.medium,
+    },
+    compactDescription: {
+      color: colors.foregroundMuted,
+      fontSize: type.xs,
+      lineHeight: type.xs * 1.6,
+    },
+    compactDetails: {
+      maxHeight: r(180),
+      paddingTop: space[3],
+      paddingBottom: space[2],
+    },
     root: {
       gap: space[4],
       padding: space[5],