@unif/react-native-chat 3.2.4 → 3.3.0

package/src/components/Confirmation/Confirmation.tsx

@@ -1,5 +1,11 @@
 import { Text, View } from 'react-native';
-import { Button, useThemedStyles } from '@unif/react-native-design';
+import {
+  Button,
+  Icon,
+  Spinner,
+  useColors,
+  useThemedStyles,
+} from '@unif/react-native-design';
 import {
   CONFIRMATION_STATUS_TEXT,
   DEFAULT_CANCEL_LABEL,
@@ -24,35 +30,65 @@ export function Confirmation({
   testID,
 }: ConfirmationProps): React.JSX.Element {
   const styles = useThemedStyles(createStyles);
+  const colors = useColors();
+  const tint =
+    status === 'confirmed'
+      ? colors.success
+      : status === 'cancelled'
+        ? colors.foregroundSubtle
+        : colors.primary;
+  const borderColor =
+    status === 'cancelled' ? colors.surfaceContainerHighest : tint;
   const resolvedStatusText =
     status === 'pending'
       ? statusText
       : (statusText ?? CONFIRMATION_STATUS_TEXT[status]);
 
   return (
-    <View style={[styles.root, style]} testID={testID}>
-      <Text style={styles.title}>{title}</Text>
-      <View>{children}</View>
+    <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}
+          />
+        )}
+        <Text
+          style={[styles.title, status === 'cancelled' && styles.cancelled]}
+        >
+          {title}
+        </Text>
+      </View>
+      <View style={styles.body}>{children}</View>
       {resolvedStatusText ? (
         <Text style={styles.status}>{resolvedStatusText}</Text>
       ) : null}
       {status === 'pending' && (onConfirm || onCancel) ? (
         <View style={styles.actions}>
-          {onConfirm ? (
-            <Button
-              label={confirmLabel}
-              onPress={onConfirm}
-              disabled={confirmDisabled}
-              size="sm"
-            />
-          ) : null}
           {onCancel ? (
             <Button
               label={cancelLabel}
               onPress={onCancel}
               disabled={cancelDisabled}
-              size="sm"
-              variant="outline"
+              block
+              variant="secondary"
+            />
+          ) : null}
+          {onConfirm ? (
+            <Button
+              label={confirmLabel}
+              onPress={onConfirm}
+              disabled={confirmDisabled}
+              block
             />
           ) : null}
         </View>

package/src/components/Confirmation/styles.ts

@@ -10,25 +10,32 @@ import {
 export const createStyles = (colors: ColorTokens) =>
   StyleSheet.create({
     root: {
-      gap: space[4],
       padding: space[5],
-      borderWidth: 1,
+      borderWidth: 2,
       borderColor: colors.outline,
-      borderRadius: radius.xl,
+      borderRadius: radius.lg,
       backgroundColor: colors.surface,
     },
+    heading: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: space[2],
+      marginBottom: space[3],
+    },
+    body: { marginBottom: space[4] },
+    cancelled: { color: colors.foregroundSubtle },
     title: {
+      flex: 1,
       color: colors.foreground,
-      fontSize: type.h3,
+      fontSize: type.xs,
       fontWeight: fw.semi,
     },
     status: {
       color: colors.foregroundMuted,
-      fontSize: type.sm,
+      fontSize: type.xxs,
     },
     actions: {
       flexDirection: 'row',
-      flexWrap: 'wrap',
       gap: space[3],
     },
     footer: {

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

@@ -1,5 +1,5 @@
 import { StyleSheet } from 'react-native';
-import { type, space, fontMono } from '@unif/react-native-design';
+import { type, fw } from '@unif/react-native-design';
 import type { ColorTokens } from '@unif/react-native-design';
 
 const makeMarkdownStyles = (colors: ColorTokens, outgoing: boolean) => {
@@ -11,58 +11,32 @@ const makeMarkdownStyles = (colors: ColorTokens, outgoing: boolean) => {
   };
   return StyleSheet.create({
     text: body,
-    em: { ...body, fontStyle: 'italic' },
-    strong: { ...body, fontWeight: 'bold' },
-    strikethrough: { ...body, textDecorationLine: 'line-through' },
+    em: { color: textColor, fontStyle: 'italic' },
+    strong: { color: textColor, fontWeight: 'bold' },
+    strikethrough: { color: textColor, textDecorationLine: 'line-through' },
     link: {
-      ...body,
       color: outgoing ? colors.onPrimary : colors.primary,
       textDecorationLine: 'underline',
     },
-    li: body,
+    li: { color: textColor, fontSize: type.sm },
     codespan: {
-      ...body,
-      fontFamily: fontMono,
       color: colors.foreground,
       backgroundColor: colors.surfaceContainer,
     },
-    h1: {
-      fontSize: type.h1,
-      lineHeight: type.h1 * 1.4,
-      color: textColor,
-      borderBottomColor: colors.outline,
-    },
-    h2: {
-      fontSize: type.h2,
-      lineHeight: type.h2 * 1.4,
-      color: textColor,
-      borderBottomColor: colors.outline,
-    },
-    h3: {
-      fontSize: type.h3,
-      lineHeight: type.h3 * 1.4,
-      color: textColor,
-    },
-    h4: {
-      fontSize: type.body,
-      lineHeight: type.body * 1.4,
-      color: textColor,
-    },
-    h5: {
-      fontSize: type.sm,
-      lineHeight: type.sm * 1.4,
-      color: textColor,
-    },
-    h6: {
-      fontSize: type.xs,
-      lineHeight: type.xs * 1.4,
-      color: textColor,
+    h1: { fontSize: type.h2, fontWeight: fw.bold, color: textColor },
+    h2: { fontSize: type.h3, fontWeight: fw.bold, color: textColor },
+    h3: { fontSize: type.body, fontWeight: fw.semi, color: textColor },
+    h4: { fontSize: type.sm, fontWeight: fw.semi, color: textColor },
+    h5: { fontSize: type.sm, fontWeight: fw.semi, color: textColor },
+    h6: { fontSize: type.sm, fontWeight: fw.semi, color: textColor },
+    code: {
+      backgroundColor: colors.surfaceContainer,
+      borderColor: colors.outline,
+      borderWidth: 1,
     },
-    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 },
+    codeText: { color: colors.foreground },
+    blockquote: { borderColor: colors.outline, borderLeftWidth: 3 },
+    hr: { backgroundColor: colors.outline, height: 1 },
     table: { borderColor: colors.outline },
   });
 };

package/src/components/Message/Message.tsx

@@ -2,13 +2,13 @@ import { Pressable, Text, View } from 'react-native';
 import {
   Button,
   IconButton,
-  Spinner,
   useThemedStyles,
   useColors,
 } from '@unif/react-native-design';
 import { MarkdownContent } from './MarkdownContent/MarkdownContent';
 import { createStyles } from './styles';
 import { isNestedAction } from './isNestedAction';
+import { MessageWaiting } from './MessageWaiting';
 import type { MessageProps } from './types';
 
 export function Message(props: MessageProps) {
@@ -23,6 +23,7 @@ export function Message(props: MessageProps) {
     header,
     footer,
     actions = [],
+    failureAction,
     onPress,
     onLongPress,
     style,
@@ -39,6 +40,7 @@ export function Message(props: MessageProps) {
     (footer !== undefined && footer !== null && footer !== false);
   const waiting =
     (status === 'pending' || status === 'streaming') && !hasContent;
+  const failedAction = status === 'failed' ? failureAction : undefined;
   const contentStyle = [
     styles.content,
     fullWidth && styles.fullWidth,
@@ -48,6 +50,12 @@ export function Message(props: MessageProps) {
     ],
     surface === 'outlined' && styles.outlined,
     status === 'failed' && styles.failed,
+    waiting &&
+      surface === 'bubble' &&
+      placement === 'start' &&
+      styles.waitingBubble,
+    failedAction && styles.failureContent,
+    failedAction && fullWidth && styles.failureFullWidth,
   ];
   const content = (
     <>
@@ -76,16 +84,8 @@ export function Message(props: MessageProps) {
       ) : (
         props.children
       )}
-      {waiting ? (
-        <View
-          accessible
-          accessibilityLabel="正在等待回复"
-          accessibilityState={{ busy: true }}
-        >
-          <Spinner />
-        </View>
-      ) : null}
-      {statusText ? (
+      {waiting ? <MessageWaiting label={statusText} /> : null}
+      {statusText && !waiting ? (
         <Text style={[styles.status, status === 'failed' && styles.errorText]}>
           {statusText}
         </Text>
@@ -93,6 +93,31 @@ export function Message(props: MessageProps) {
       {footer}
     </>
   );
+  const bubble =
+    onPress || onLongPress ? (
+      <Pressable
+        style={contentStyle}
+        onPress={
+          onPress
+            ? (event) => {
+                if (!isNestedAction(event)) onPress();
+              }
+            : undefined
+        }
+        onLongPress={
+          onLongPress
+            ? (event) => {
+                if (!isNestedAction(event)) onLongPress();
+              }
+            : undefined
+        }
+        accessible={false}
+      >
+        {content}
+      </Pressable>
+    ) : (
+      <View style={contentStyle}>{content}</View>
+    );
   return (
     <View
       style={[styles.root, placement === 'end' && styles.end, style]}
@@ -107,29 +132,24 @@ export function Message(props: MessageProps) {
         ]}
       >
         {name ? <Text style={styles.name}>{name}</Text> : null}
-        {onPress || onLongPress ? (
-          <Pressable
-            style={contentStyle}
-            onPress={
-              onPress
-                ? (event) => {
-                    if (!isNestedAction(event)) onPress();
-                  }
-                : undefined
-            }
-            onLongPress={
-              onLongPress
-                ? (event) => {
-                    if (!isNestedAction(event)) onLongPress();
-                  }
-                : undefined
-            }
-            accessible={false}
-          >
-            {content}
-          </Pressable>
+        {failedAction ? (
+          <View style={[styles.failureRow, placement === 'end' && styles.end]}>
+            {bubble}
+            <IconButton
+              icon="alert"
+              size="sm"
+              variant="ghost"
+              color={colors.error}
+              style={styles.failureAction}
+              accessibilityLabel={failedAction.label}
+              accessibilityHint={failedAction.accessibilityHint}
+              disabled={failedAction.disabled}
+              loading={failedAction.loading}
+              onPress={failedAction.onPress}
+            />
+          </View>
         ) : (
-          <View style={contentStyle}>{content}</View>
+          bubble
         )}
         {actions.length ? (
           <View style={styles.actions}>

package/src/components/Message/MessageWaiting.tsx

@@ -0,0 +1,68 @@
+import { useEffect, useState } from 'react';
+import { Animated, Easing, Platform, Text, View } from 'react-native';
+import {
+  usePrefersReducedMotion,
+  useThemedStyles,
+} from '@unif/react-native-design';
+import {
+  MESSAGE_WAITING_DOT_DELAYS,
+  MESSAGE_WAITING_DOT_DURATION,
+  MESSAGE_WAITING_DOT_MIN_OPACITY,
+} from './constants';
+import { createStyles } from './styles';
+import type { MessageWaitingProps } from './types';
+
+export function MessageWaiting({ label }: MessageWaitingProps) {
+  const styles = useThemedStyles(createStyles);
+  const reducedMotion = usePrefersReducedMotion();
+  const [values] = useState(() =>
+    MESSAGE_WAITING_DOT_DELAYS.map(() => new Animated.Value(1))
+  );
+  useEffect(() => {
+    const animations = MESSAGE_WAITING_DOT_DELAYS.map((delay, index) => {
+      const value = values[index]!;
+      value.setValue(reducedMotion ? 1 : MESSAGE_WAITING_DOT_MIN_OPACITY);
+      return Animated.sequence([
+        Animated.delay(delay),
+        Animated.loop(
+          Animated.sequence(
+            [1, MESSAGE_WAITING_DOT_MIN_OPACITY].map((toValue) =>
+              Animated.timing(value, {
+                toValue,
+                duration: MESSAGE_WAITING_DOT_DURATION,
+                easing: Easing.inOut(Easing.ease),
+                useNativeDriver: Platform.OS !== 'web',
+              })
+            )
+          )
+        ),
+      ]);
+    });
+    if (!reducedMotion) animations.forEach((animation) => animation.start());
+    return () => animations.forEach((animation) => animation.stop());
+  }, [reducedMotion, values]);
+  return (
+    <View
+      style={styles.waitingRow}
+      accessible
+      accessibilityLabel={label || '正在等待回复'}
+      accessibilityState={{ busy: true }}
+    >
+      <View
+        style={styles.waitingDots}
+        pointerEvents="none"
+        accessibilityElementsHidden
+        importantForAccessibility="no-hide-descendants"
+      >
+        {values.map((opacity, index) => (
+          <Animated.View
+            key={index}
+            testID={`message-waiting-dot-${index}`}
+            style={[styles.waitingDot, { opacity }]}
+          />
+        ))}
+      </View>
+      {label ? <Text style={styles.waitingLabel}>{label}</Text> : null}
+    </View>
+  );
+}

package/src/components/Message/constants.ts

@@ -1,2 +1,6 @@
 export const INTERACTIVE_CONTENT_SELECTOR =
   'button,a,input,textarea,select,[role="button"],[role="link"],[role="checkbox"],[role="switch"],[role="menuitem"],[role="tab"]';
+
+export const MESSAGE_WAITING_DOT_DELAYS = [0, 150, 300] as const;
+export const MESSAGE_WAITING_DOT_DURATION = 600;
+export const MESSAGE_WAITING_DOT_MIN_OPACITY = 0.3;

package/src/components/Message/styles.ts

@@ -1,5 +1,5 @@
 import { StyleSheet } from 'react-native';
-import { radius, space, type } from '@unif/react-native-design';
+import { r, radius, space, type } from '@unif/react-native-design';
 import type { ColorTokens } from '@unif/react-native-design';
 
 export const createStyles = (colors: ColorTokens) =>
@@ -35,7 +35,30 @@ export const createStyles = (colors: ColorTokens) =>
       borderWidth: 1,
       borderColor: colors.outline,
     },
-    failed: { borderWidth: 1, borderColor: colors.error },
+    failed: { opacity: 0.7 },
+    failureRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      alignSelf: 'stretch',
+      gap: space[2],
+    },
+    failureContent: { flexShrink: 1 },
+    failureAction: { alignSelf: 'center' },
+    failureFullWidth: { flex: 1 },
+    waitingBubble: { width: r(240), borderTopLeftRadius: 0 },
+    waitingRow: { flexDirection: 'row', alignItems: 'center', gap: space[2] },
+    waitingDots: { flexDirection: 'row', gap: r(3) },
+    waitingDot: {
+      width: r(6),
+      height: r(6),
+      borderRadius: r(3),
+      backgroundColor: colors.foregroundSubtle,
+    },
+    waitingLabel: {
+      fontSize: type.xxs,
+      color: colors.foregroundSubtle,
+      flexShrink: 1,
+    },
     text: {
       fontSize: type.sm,
       lineHeight: type.sm * 1.5,

package/src/components/Message/types.ts

@@ -15,6 +15,8 @@ export interface MessageBaseProps {
   header?: ReactNode;
   footer?: ReactNode;
   actions?: readonly ChatAction[];
+  /** 仅 failed 时在气泡旁显示的错误操作；不自动生成重试。 */
+  failureAction?: ChatAction;
   onPress?(): void;
   onLongPress?(): void;
   style?: StyleProp<ViewStyle>;
@@ -43,3 +45,7 @@ export interface MessageCustomContent {
 }
 export type MessageProps = MessageBaseProps &
   (MessagePlainContent | MessageMarkdownContent | MessageCustomContent);
+
+export interface MessageWaitingProps {
+  label?: string;
+}