@unif/react-native-chat 2.0.0

package/src/components/Process/types.ts

@@ -0,0 +1,39 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { ChatAction } from '../../actions';
+
+export type ProcessStepStatus =
+  'pending' | 'running' | 'completed' | 'failed' | 'cancelled';
+
+export interface ProcessStep {
+  id: string;
+  title: string;
+  status: ProcessStepStatus;
+  description?: string;
+  elapsedMs?: number;
+  details?: ReactNode;
+  actions?: readonly ChatAction[];
+}
+
+export interface ProcessBaseProps {
+  steps: readonly ProcessStep[];
+  title?: string;
+  identity?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+export interface ProcessControlledExpansion {
+  expandedIds: readonly string[];
+  onExpandedChange(ids: readonly string[]): void;
+  defaultExpandedIds?: never;
+}
+
+export interface ProcessLocalExpansion {
+  expandedIds?: never;
+  defaultExpandedIds?: readonly string[];
+  onExpandedChange?(ids: readonly string[]): void;
+}
+
+export type ProcessProps = ProcessBaseProps &
+  (ProcessControlledExpansion | ProcessLocalExpansion);

package/src/components/Sources/Sources.tsx

@@ -0,0 +1,70 @@
+import { Pressable, Text, View } from 'react-native';
+import { Icon, useThemedStyles } from '@unif/react-native-design';
+import { DEFAULT_SOURCES_TITLE } from './constants';
+import { createStyles } from './styles';
+import type { SourceItem, SourcesProps } from './types';
+
+export function Sources({
+  items,
+  title = DEFAULT_SOURCES_TITLE,
+  onPress,
+  style,
+  testID,
+}: SourcesProps): React.JSX.Element | null {
+  const styles = useThemedStyles(createStyles);
+
+  if (items.length === 0) return null;
+
+  const renderItem = (item: SourceItem, showChevron: boolean) => (
+    <>
+      <Text style={styles.label} testID={`source-label-${item.id}`}>
+        {item.label}
+      </Text>
+      <View style={styles.content}>
+        {item.title ? <Text style={styles.title}>{item.title}</Text> : null}
+        {item.description ? (
+          <Text style={styles.description}>{item.description}</Text>
+        ) : null}
+      </View>
+      {showChevron ? <Icon name="chevron-right" /> : null}
+    </>
+  );
+
+  return (
+    <View style={[styles.root, style]} testID={testID}>
+      <Text style={styles.heading}>{title}</Text>
+      <View style={styles.list}>
+        {items.map((item) =>
+          onPress ? (
+            <Pressable
+              key={item.id}
+              style={({ pressed }) => [
+                styles.item,
+                pressed && styles.pressed,
+                item.disabled && styles.disabled,
+              ]}
+              onPress={item.disabled ? undefined : () => onPress(item)}
+              disabled={item.disabled}
+              accessibilityRole="button"
+              accessibilityLabel={
+                item.title ? `${item.label} ${item.title}` : item.label
+              }
+              accessibilityState={{ disabled: item.disabled === true }}
+              testID={`source-${item.id}`}
+            >
+              {renderItem(item, true)}
+            </Pressable>
+          ) : (
+            <View
+              key={item.id}
+              style={[styles.item, item.disabled && styles.disabled]}
+              testID={`source-${item.id}`}
+            >
+              {renderItem(item, false)}
+            </View>
+          )
+        )}
+      </View>
+    </View>
+  );
+}

package/src/components/Sources/constants.ts

@@ -0,0 +1 @@
+export const DEFAULT_SOURCES_TITLE = '参考来源';

package/src/components/Sources/index.ts

@@ -0,0 +1,2 @@
+export { Sources } from './Sources';
+export type { SourceItem, SourcesProps } from './types';

package/src/components/Sources/styles.ts

@@ -0,0 +1,59 @@
+import { StyleSheet } from 'react-native';
+import {
+  fixed,
+  fw,
+  pressedOpacity,
+  radius,
+  space,
+  type,
+} from '@unif/react-native-design';
+import type { ColorTokens } from '@unif/react-native-design';
+
+export const createStyles = (colors: ColorTokens) =>
+  StyleSheet.create({
+    root: {
+      gap: space[3],
+    },
+    heading: {
+      color: colors.foreground,
+      fontSize: type.sm,
+      fontWeight: fw.semi,
+    },
+    list: {
+      gap: space[2],
+    },
+    item: {
+      minHeight: fixed.hitTarget,
+      flexDirection: 'row',
+      alignItems: 'flex-start',
+      gap: space[3],
+      padding: space[3],
+      borderRadius: radius.md,
+      backgroundColor: colors.surfaceContainer,
+    },
+    pressed: {
+      opacity: pressedOpacity,
+    },
+    disabled: {
+      opacity: 0.5,
+    },
+    label: {
+      minWidth: space[7],
+      color: colors.primary,
+      fontSize: type.sm,
+      fontWeight: fw.semi,
+    },
+    content: {
+      flex: 1,
+      gap: space[1],
+    },
+    title: {
+      color: colors.foreground,
+      fontSize: type.sm,
+      fontWeight: fw.medium,
+    },
+    description: {
+      color: colors.foregroundMuted,
+      fontSize: type.xxs,
+    },
+  });

package/src/components/Sources/types.ts

@@ -0,0 +1,17 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+
+export interface SourceItem {
+  id: string;
+  label: string;
+  title?: string;
+  description?: string;
+  disabled?: boolean;
+}
+
+export interface SourcesProps {
+  items: readonly SourceItem[];
+  title?: string;
+  onPress?(item: SourceItem): void;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}

package/src/components/Suggestions/Suggestions.tsx

@@ -0,0 +1,34 @@
+import { View } from 'react-native';
+import { Chip, Icon } from '@unif/react-native-design';
+import { styles } from './styles';
+import type { SuggestionsProps } from './types';
+
+export function Suggestions({
+  items,
+  onSelect,
+  align = 'start',
+  style,
+  testID,
+}: SuggestionsProps): React.JSX.Element | null {
+  if (items.length === 0) return null;
+
+  return (
+    <View
+      style={[styles.root, styles[align], style]}
+      testID={testID}
+      accessibilityRole="list"
+    >
+      {items.map((item) => (
+        <Chip
+          key={item.id}
+          label={item.label}
+          selected={item.selected}
+          busy={item.loading}
+          disabled={item.disabled}
+          leading={item.icon ? <Icon name={item.icon} /> : undefined}
+          onPress={onSelect ? () => onSelect(item) : undefined}
+        />
+      ))}
+    </View>
+  );
+}

package/src/components/Suggestions/index.ts

@@ -0,0 +1,2 @@
+export { Suggestions } from './Suggestions';
+export type { SuggestionItem, SuggestionsProps } from './types';

package/src/components/Suggestions/styles.ts

@@ -0,0 +1,16 @@
+import { StyleSheet } from 'react-native';
+import { space } from '@unif/react-native-design';
+
+export const styles = StyleSheet.create({
+  root: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: space[3],
+  },
+  start: {
+    justifyContent: 'flex-start',
+  },
+  center: {
+    justifyContent: 'center',
+  },
+});

package/src/components/Suggestions/types.ts

@@ -0,0 +1,19 @@
+import type { IconName } from '@unif/react-native-design';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+export interface SuggestionItem {
+  id: string;
+  label: string;
+  icon?: IconName;
+  selected?: boolean;
+  loading?: boolean;
+  disabled?: boolean;
+}
+
+export interface SuggestionsProps {
+  items: readonly SuggestionItem[];
+  onSelect?(item: SuggestionItem): void;
+  align?: 'start' | 'center';
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}

package/src/index.tsx

@@ -0,0 +1,61 @@
+export type { ChatAction } from './actions';
+export { Composer } from './components/Composer';
+export type {
+  ComposerBusyAction,
+  ComposerHandle,
+  ComposerPrimaryAction,
+  ComposerProps,
+  ComposerSendAction,
+  ComposerStopAction,
+  ComposerVoiceControl,
+  ComposerVoiceStatus,
+} from './components/Composer';
+export { Attachments } from './components/Attachments';
+export type {
+  AttachmentsProps,
+  ChatAttachmentItem,
+  ChatAttachmentStatus,
+} from './components/Attachments';
+export { Message } from './components/Message';
+export type {
+  MessageBaseProps,
+  MessageCustomContent,
+  MessageMarkdownContent,
+  MessagePlainContent,
+  MessagePlacement,
+  MessageProps,
+  MessageStatus,
+} from './components/Message';
+export { MessageList } from './components/MessageList';
+export type {
+  MessageListHandle,
+  MessageListProps,
+  MessageListScrollOptions,
+} from './components/MessageList';
+export { Chat } from './components/Chat';
+export type { ChatProps } from './components/Chat';
+export { Suggestions } from './components/Suggestions';
+export type {
+  SuggestionItem,
+  SuggestionsProps,
+} from './components/Suggestions';
+export { Confirmation } from './components/Confirmation';
+export type {
+  ConfirmationProps,
+  ConfirmationStatus,
+} from './components/Confirmation';
+export { Process } from './components/Process';
+export type {
+  ProcessBaseProps,
+  ProcessControlledExpansion,
+  ProcessLocalExpansion,
+  ProcessProps,
+  ProcessStep,
+  ProcessStepStatus,
+} from './components/Process';
+export { Feedback } from './components/Feedback';
+export type { FeedbackProps, FeedbackTone } from './components/Feedback';
+export { Sources } from './components/Sources';
+export type { SourceItem, SourcesProps } from './components/Sources';
+export { Citation } from './components/Citation';
+export type { CitationProps } from './components/Citation';