@crafter/rn-ai-elements 0.0.1

package/src/chatbot/Message.tsx

@@ -0,0 +1,266 @@
+import React, {
+  createContext,
+  memo,
+  useContext,
+  type ReactNode,
+} from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  type StyleProp,
+  type ViewStyle,
+  type TextStyle,
+} from 'react-native';
+import { useAIElementsTheme } from '../theme';
+import type { AIElementsTheme } from '../theme';
+import { StreamingMarkdown } from '../streaming';
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface ChatMessage {
+  id: string;
+  role: 'user' | 'assistant' | 'system';
+  content: string;
+  [key: string]: any;
+}
+
+export interface MessageContextValue {
+  message: ChatMessage;
+  isStreaming?: boolean;
+}
+
+// ---------------------------------------------------------------------------
+// Context
+// ---------------------------------------------------------------------------
+
+const MessageContext = createContext<MessageContextValue | null>(null);
+
+function useMessageContext(): MessageContextValue {
+  const ctx = useContext(MessageContext);
+  if (!ctx) {
+    throw new Error(
+      'Message compound components must be used within a <Message>.',
+    );
+  }
+  return ctx;
+}
+
+// ---------------------------------------------------------------------------
+// Prop types
+// ---------------------------------------------------------------------------
+
+export interface MessageProps {
+  message: ChatMessage;
+  isStreaming?: boolean;
+  children?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+export interface MessageAvatarProps {
+  children?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+export interface MessageContentProps {
+  style?: StyleProp<ViewStyle>;
+}
+
+export interface MessageActionsProps {
+  children?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+// ---------------------------------------------------------------------------
+// Message (root)
+// ---------------------------------------------------------------------------
+
+function MessageRoot({ message, isStreaming, children, style }: MessageProps) {
+  const theme = useAIElementsTheme();
+  const isUser = message.role === 'user';
+
+  return (
+    <MessageContext.Provider value={{ message, isStreaming }}>
+      <View
+        style={[
+          styles.container,
+          {
+            alignItems: isUser ? 'flex-end' : 'flex-start',
+            paddingHorizontal: theme.spacing.lg,
+            marginBottom: theme.spacing.md,
+          },
+          style,
+        ]}
+      >
+        {children ?? (
+          <>
+            <MessageContent />
+          </>
+        )}
+      </View>
+    </MessageContext.Provider>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// MessageAvatar
+// ---------------------------------------------------------------------------
+
+function MessageAvatarComponent({ children, style }: MessageAvatarProps) {
+  const theme = useAIElementsTheme();
+  const { message } = useMessageContext();
+  const isUser = message.role === 'user';
+
+  return (
+    <View
+      style={[
+        styles.avatar,
+        {
+          backgroundColor: isUser ? theme.colors.primary : theme.colors.muted,
+          width: 32,
+          height: 32,
+          borderRadius: theme.radius.full,
+        },
+        style,
+      ]}
+    >
+      {children ?? (
+        <Text
+          style={[
+            styles.avatarText,
+            {
+              color: isUser
+                ? theme.colors.primaryForeground
+                : theme.colors.foreground,
+              fontSize: theme.typography.fontSize.sm,
+              fontWeight: theme.typography.fontWeight
+                .semibold as TextStyle['fontWeight'],
+              fontFamily: theme.typography.fontFamily,
+            },
+          ]}
+        >
+          {isUser ? 'U' : 'AI'}
+        </Text>
+      )}
+    </View>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// MessageContent
+// ---------------------------------------------------------------------------
+
+function MessageContentComponent({ style }: MessageContentProps) {
+  const theme = useAIElementsTheme();
+  const { message, isStreaming } = useMessageContext();
+  const isUser = message.role === 'user';
+
+  const bubbleStyle = getBubbleStyle(isUser, theme);
+
+  return (
+    <View style={[styles.bubble, bubbleStyle, style]}>
+      {isUser ? (
+        <Text
+          style={{
+            color: theme.colors.primaryForeground,
+            fontSize: 12,
+            fontFamily: theme.typography.fontFamily,
+            lineHeight: 12 * theme.typography.lineHeight.normal,
+          }}
+        >
+          {message.content}
+        </Text>
+      ) : (
+        <StreamingMarkdown
+          content={message.content}
+          isStreaming={isStreaming}
+        />
+      )}
+    </View>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// MessageActions
+// ---------------------------------------------------------------------------
+
+function MessageActionsComponent({ children, style }: MessageActionsProps) {
+  const theme = useAIElementsTheme();
+
+  return (
+    <View
+      style={[
+        styles.actions,
+        { marginTop: theme.spacing.xs, gap: theme.spacing.sm },
+        style,
+      ]}
+    >
+      {children}
+    </View>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function getBubbleStyle(
+  isUser: boolean,
+  theme: AIElementsTheme,
+): ViewStyle {
+  if (isUser) {
+    return {
+      backgroundColor: theme.colors.primary,
+      borderRadius: theme.radius.lg,
+      borderBottomRightRadius: theme.radius.sm,
+      paddingHorizontal: theme.spacing.lg,
+      paddingVertical: theme.spacing.sm,
+      maxWidth: '80%',
+    };
+  }
+
+  return {
+    backgroundColor: theme.colors.card,
+    borderColor: theme.colors.border,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderRadius: theme.radius.lg,
+    borderBottomLeftRadius: theme.radius.sm,
+    paddingHorizontal: theme.spacing.lg,
+    paddingVertical: theme.spacing.md,
+    maxWidth: '85%',
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Styles
+// ---------------------------------------------------------------------------
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'column',
+    width: '100%',
+  },
+  avatar: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  avatarText: {
+    textAlign: 'center',
+  },
+  bubble: {},
+  actions: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+});
+
+// ---------------------------------------------------------------------------
+// Exports (memoized)
+// ---------------------------------------------------------------------------
+
+export const Message = memo(MessageRoot);
+export const MessageAvatar = memo(MessageAvatarComponent);
+export const MessageContent = memo(MessageContentComponent);
+export const MessageActions = memo(MessageActionsComponent);