@ion299/sdk-react-native 0.1.0-beta.1

package/src/components/MessageBubble.tsx

@@ -0,0 +1,208 @@
+import React from 'react'
+import { Dimensions, Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+import { attachmentDisplayName } from '../attachmentUtils'
+import type { ChatAttachment, ChatButton, ChatMessage } from '../types'
+import type { ChatTheme } from '../theme'
+
+interface Props {
+  message: ChatMessage
+  theme: ChatTheme
+  onButtonPress?: (callbackData: string, serverMessageId: number) => void
+  onAttachmentPress?: (attachment: ChatAttachment) => void
+}
+
+export function MessageBubble({ message, theme, onButtonPress, onAttachmentPress }: Props) {
+  if (message.type === 'system' || message.type === 'event') {
+    return (
+      <View style={styles.systemRow}>
+        <Text style={[styles.systemText, { color: theme.systemText }]}>
+          {message.text}
+        </Text>
+      </View>
+    )
+  }
+
+  const isOutbound = message.type === 'contact'
+
+  return (
+    <View style={[styles.row, isOutbound ? styles.rowRight : styles.rowLeft]}>
+      <View
+        style={[
+          styles.bubble,
+          isOutbound
+            ? [styles.outbound, { backgroundColor: theme.outboundBg }]
+            : [styles.inbound, { backgroundColor: theme.inboundBg }],
+        ]}
+      >
+        {!isOutbound && message.sender?.name ? (
+          <Text style={[styles.senderName, { color: theme.primaryColor }]}>
+            {message.sender.name}
+          </Text>
+        ) : null}
+
+        {message.attachments && message.attachments.length > 0 && (
+          <View style={styles.attachments}>
+            {message.attachments.map((att, i) => (
+              <AttachmentView
+                key={att.id !== 0 ? att.id : `temp-${i}`}
+                attachment={att}
+                isOutbound={isOutbound}
+                theme={theme}
+                onPress={att.id > 0 ? () => onAttachmentPress?.(att) : undefined}
+              />
+            ))}
+          </View>
+        )}
+
+        {message.text ? (
+          <Text
+            style={[
+              styles.text,
+              { color: isOutbound ? theme.outboundText : theme.inboundText },
+            ]}
+          >
+            {message.text}
+          </Text>
+        ) : null}
+
+        {message.buttons && message.buttons.length > 0 && (
+          <View style={styles.buttons}>
+            {message.buttons.map((btn, i) => (
+              <BotButton
+                key={i}
+                button={btn}
+                theme={theme}
+                onPress={() =>
+                  onButtonPress?.(btn.callback_data, message.serverMessageId ?? 0)
+                }
+              />
+            ))}
+          </View>
+        )}
+
+        <Text
+          style={[
+            styles.time,
+            { color: isOutbound ? 'rgba(255,255,255,0.65)' : theme.systemText },
+          ]}
+        >
+          {message.time}
+        </Text>
+      </View>
+    </View>
+  )
+}
+
+function formatBytes(bytes: number): string {
+  if (bytes <= 0) return ''
+  if (bytes < 1024) return `${bytes} Б`
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} КБ`
+  return `${(bytes / (1024 * 1024)).toFixed(1)} МБ`
+}
+
+function AttachmentView({
+  attachment,
+  isOutbound,
+  theme,
+  onPress,
+}: {
+  attachment: ChatAttachment
+  isOutbound: boolean
+  theme: ChatTheme
+  onPress?: () => void
+}) {
+  if (attachment.type === 'image') {
+    return (
+      <TouchableOpacity onPress={onPress} disabled={!onPress} activeOpacity={0.85}>
+        <Image
+          source={{ uri: attachment.url }}
+          style={styles.image}
+          resizeMode="cover"
+        />
+      </TouchableOpacity>
+    )
+  }
+
+  const nameColor = isOutbound ? theme.outboundText : theme.inboundText
+  const sizeColor = isOutbound ? 'rgba(255,255,255,0.65)' : theme.systemText
+  const displayName = attachmentDisplayName(attachment)
+
+  return (
+    <TouchableOpacity
+      style={styles.fileBlock}
+      onPress={onPress}
+      disabled={!onPress}
+      activeOpacity={0.75}
+    >
+      <Text style={[styles.fileName, { color: nameColor }]} numberOfLines={2}>
+        {displayName}
+      </Text>
+      {attachment.size > 0 && (
+        <Text style={[styles.fileSize, { color: sizeColor }]}>
+          {formatBytes(attachment.size)}
+        </Text>
+      )}
+    </TouchableOpacity>
+  )
+}
+
+function BotButton({
+  button,
+  theme,
+  onPress,
+}: {
+  button: ChatButton
+  theme: ChatTheme
+  onPress: () => void
+}) {
+  return (
+    <TouchableOpacity
+      style={[styles.botButton, { borderColor: theme.primaryColor }]}
+      onPress={onPress}
+    >
+      <Text style={[styles.botButtonText, { color: theme.primaryColor }]}>
+        {button.text}
+      </Text>
+    </TouchableOpacity>
+  )
+}
+
+const BUBBLE_MAX_WIDTH = Dimensions.get('window').width * 0.78
+
+const styles = StyleSheet.create({
+  row:          { flexDirection: 'row', marginVertical: 3, paddingHorizontal: 16 },
+  rowRight:     { justifyContent: 'flex-end' },
+  rowLeft:      { justifyContent: 'flex-start' },
+  bubble: {
+    maxWidth:         BUBBLE_MAX_WIDTH,
+    minWidth:         56,
+    borderRadius:     16,
+    paddingHorizontal: 14,
+    paddingTop:       10,
+    paddingBottom:    8,
+  },
+  outbound:     { borderBottomRightRadius: 4 },
+  inbound:      { borderBottomLeftRadius: 4 },
+  senderName:   { fontSize: 12, fontWeight: '600', marginBottom: 4 },
+  text:         { fontSize: 15, lineHeight: 21 },
+  time:         { fontSize: 11, lineHeight: 14, alignSelf: 'flex-end', marginTop: 6 },
+  systemRow:    { alignItems: 'center', marginVertical: 8, paddingHorizontal: 16 },
+  systemText:   { fontSize: 12, textAlign: 'center' },
+  attachments:  { gap: 6, marginBottom: 4 },
+  image:        { width: 200, height: 150, borderRadius: 8 },
+  fileBlock: {
+    gap: 2,
+    minWidth: 120,
+  },
+  fileName: { fontSize: 14, fontWeight: '500', lineHeight: 19 },
+  fileSize: { fontSize: 11, lineHeight: 15 },
+  buttons:    { gap: 6, marginTop: 8 },
+  botButton: {
+    borderWidth:    1.5,
+    borderRadius:   8,
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    alignItems:     'center',
+  },
+  botButtonText: { fontSize: 14, fontWeight: '500' },
+})

package/src/components/MessageInput.tsx

@@ -0,0 +1,280 @@
+import React, { useRef, useState } from 'react'
+import {
+  ActivityIndicator,
+  Image,
+  Platform,
+  SafeAreaView,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from 'react-native'
+import { INPUT_BOTTOM_PADDING } from '../safeArea'
+import { pickFiles as defaultPickFiles } from '../filePicker'
+import type { ChatTheme } from '../theme'
+import type { AttachmentInput, ChatStrings } from '../types'
+
+interface Props {
+  theme: ChatTheme
+  isSending: boolean
+  onSend: (text: string, files: AttachmentInput[]) => void
+  /** Переопределяет встроенный пикер (@react-native-documents/picker). */
+  onPickFiles?: () => Promise<AttachmentInput[] | null>
+  strings?: Pick<ChatStrings, 'inputPlaceholder' | 'sendingText'>
+}
+
+function docIcon(mime: string): string {
+  if (mime === 'application/pdf') return '📄'
+  if (mime.includes('word') || mime.includes('document')) return '📝'
+  if (mime.includes('sheet') || mime.includes('excel')) return '📊'
+  if (mime.startsWith('audio/')) return '🎵'
+  if (mime.startsWith('video/')) return '🎬'
+  return '📎'
+}
+
+export function MessageInput({ theme, isSending, onSend, onPickFiles, strings }: Props) {
+  const [text, setText]       = useState('')
+  const [files, setFiles]     = useState<AttachmentInput[]>([])
+  const [picking, setPicking] = useState(false)
+  const inputRef              = useRef<TextInput>(null)
+
+  const canSend     = (text.trim().length > 0 || files.length > 0) && !isSending
+  const placeholder = strings?.inputPlaceholder ?? 'Сообщение…'
+  const picker      = onPickFiles ?? defaultPickFiles
+
+  const handlePickFiles = async () => {
+    if (picking) return
+    setPicking(true)
+    try {
+      const picked = await picker()
+      if (picked && picked.length > 0) {
+        setFiles((prev) => [...prev, ...picked])
+      }
+    } finally {
+      setPicking(false)
+    }
+  }
+
+  const removeFile = (index: number) => {
+    setFiles((prev) => prev.filter((_, i) => i !== index))
+  }
+
+  const handleSend = () => {
+    if (!canSend) return
+    const trimmed = text.trim()
+    onSend(trimmed, files)
+    setText('')
+    setFiles([])
+  }
+
+  const inputBar = (
+    <View
+      style={[
+        styles.container,
+        {
+          backgroundColor: theme.background,
+          borderTopColor:  theme.inputBorder,
+          paddingBottom:   INPUT_BOTTOM_PADDING,
+        },
+      ]}
+    >
+      {files.length > 0 && (
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          style={styles.filesStrip}
+          contentContainerStyle={styles.filesStripContent}
+        >
+          {files.map((file, i) => (
+            <View key={i} style={styles.filePreview}>
+              {file.type.startsWith('image/') ? (
+                <Image source={{ uri: file.uri }} style={styles.previewImage} />
+              ) : (
+                <View style={[styles.previewDoc, { backgroundColor: theme.inputBg, borderColor: theme.inputBorder }]}>
+                  <Text style={styles.previewDocIcon}>{docIcon(file.type)}</Text>
+                  <Text style={[styles.previewDocName, { color: theme.inputText }]} numberOfLines={2}>
+                    {file.name}
+                  </Text>
+                </View>
+              )}
+              <TouchableOpacity
+                style={styles.removeBtn}
+                onPress={() => removeFile(i)}
+                hitSlop={6}
+              >
+                <Text style={styles.removeBtnText}>✕</Text>
+              </TouchableOpacity>
+            </View>
+          ))}
+        </ScrollView>
+      )}
+
+      <View style={styles.inputRow}>
+        <TouchableOpacity
+          style={[styles.attachBtn, { backgroundColor: theme.inputBg, borderColor: theme.inputBorder }]}
+          onPress={handlePickFiles}
+          disabled={picking || isSending}
+          activeOpacity={0.7}
+        >
+          {picking ? (
+            <ActivityIndicator color={theme.systemText} size="small" />
+          ) : (
+            <Text style={[styles.attachIcon, { color: theme.primaryColor }]}>⊕</Text>
+          )}
+        </TouchableOpacity>
+
+        <View style={[styles.inputWrap, { backgroundColor: theme.inputBg, borderColor: theme.inputBorder }]}>
+          <TextInput
+            ref={inputRef}
+            style={[styles.input, { color: theme.inputText }]}
+            placeholder={placeholder}
+            placeholderTextColor={theme.systemText}
+            multiline
+            maxLength={4000}
+            value={text}
+            onChangeText={setText}
+            onSubmitEditing={handleSend}
+            returnKeyType="send"
+            blurOnSubmit={false}
+          />
+        </View>
+
+        <TouchableOpacity
+          style={[
+            styles.sendBtn,
+            { backgroundColor: canSend ? theme.sendButtonBg : theme.inputBorder },
+          ]}
+          onPress={handleSend}
+          disabled={!canSend}
+          activeOpacity={0.7}
+        >
+          {isSending ? (
+            <ActivityIndicator color="#fff" size="small" />
+          ) : (
+            <Text style={styles.sendIcon}>↑</Text>
+          )}
+        </TouchableOpacity>
+      </View>
+    </View>
+  )
+
+  if (Platform.OS === 'ios') {
+    return (
+      <SafeAreaView style={{ backgroundColor: theme.background }}>
+        {inputBar}
+      </SafeAreaView>
+    )
+  }
+
+  return inputBar
+}
+
+const styles = StyleSheet.create({
+  container: {
+    borderTopWidth: StyleSheet.hairlineWidth,
+  },
+  filesStrip: {
+    maxHeight: 110,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: 'rgba(0,0,0,0.07)',
+  },
+  filesStripContent: {
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    gap: 10,
+  },
+  filePreview: {
+    position: 'relative',
+  },
+  previewImage: {
+    width: 80,
+    height: 80,
+    borderRadius: 8,
+  },
+  previewDoc: {
+    width: 80,
+    height: 80,
+    borderRadius: 8,
+    borderWidth: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 6,
+    gap: 4,
+  },
+  previewDocIcon: {
+    fontSize: 24,
+  },
+  previewDocName: {
+    fontSize: 9,
+    textAlign: 'center',
+    lineHeight: 12,
+  },
+  removeBtn: {
+    position: 'absolute',
+    top: -6,
+    right: -6,
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+    backgroundColor: '#333',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  removeBtnText: {
+    color: '#fff',
+    fontSize: 9,
+    lineHeight: 10,
+    fontWeight: 'bold',
+  },
+  inputRow: {
+    flexDirection: 'row',
+    alignItems:    'flex-end',
+    paddingHorizontal: 12,
+    paddingTop:    10,
+    paddingBottom: 0,
+    gap:           8,
+  },
+  attachBtn: {
+    width:        40,
+    height:       40,
+    borderRadius: 20,
+    borderWidth:  1,
+    alignItems:   'center',
+    justifyContent: 'center',
+    flexShrink:   0,
+  },
+  attachIcon: {
+    fontSize:   22,
+    lineHeight: 24,
+  },
+  inputWrap: {
+    flex:             1,
+    borderWidth:      1,
+    borderRadius:     20,
+    paddingHorizontal: 14,
+    paddingVertical:  8,
+    minHeight:        40,
+    maxHeight:        120,
+  },
+  input: {
+    fontSize:   15,
+    lineHeight: 20,
+    padding:    0,
+  },
+  sendBtn: {
+    width:          40,
+    height:         40,
+    borderRadius:   20,
+    alignItems:     'center',
+    justifyContent: 'center',
+    flexShrink:     0,
+  },
+  sendIcon: {
+    color:      '#fff',
+    fontSize:   18,
+    fontWeight: 'bold',
+    lineHeight: 20,
+  },
+})