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

package/src/components/AttachmentGallery.tsx

@@ -0,0 +1,363 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import {
+  ActivityIndicator,
+  Alert,
+  Dimensions,
+  FlatList,
+  Modal,
+  Platform,
+  SafeAreaView,
+  StatusBar,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+  Image,
+} from 'react-native'
+import { attachmentDisplayName, type AttachmentDownloadHandler } from '../attachmentUtils'
+import type { GalleryAttachment } from '../types'
+import type { ChatTheme } from '../theme'
+
+const { width: SW } = Dimensions.get('window')
+
+interface Props {
+  attachments: GalleryAttachment[]
+  initialIndex: number
+  visible: boolean
+  onClose: () => void
+  downloadLabel?: string
+  onDownloadAttachment: AttachmentDownloadHandler
+  theme: ChatTheme
+}
+
+function formatBytes(bytes: number): string {
+  if (bytes <= 0) return ''
+  if (bytes < 1024) return `${bytes} Б`
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} КБ`
+  return `${(bytes / (1024 * 1024)).toFixed(1)} МБ`
+}
+
+function GallerySlide({ item, isVisible }: { item: GalleryAttachment; isVisible: boolean }) {
+  const [loading, setLoading] = useState(true)
+  const displayName = attachmentDisplayName(item)
+
+  if (item.type === 'image') {
+    return (
+      <View style={slide.root}>
+        {loading && isVisible && (
+          <ActivityIndicator color="#fff" size="large" style={StyleSheet.absoluteFill} />
+        )}
+        <Image
+          source={{ uri: item.url }}
+          style={slide.image}
+          resizeMode="contain"
+          onLoadStart={() => setLoading(true)}
+          onLoadEnd={() => setLoading(false)}
+        />
+      </View>
+    )
+  }
+
+  return (
+    <View style={[slide.root, slide.doc]}>
+      <Text style={slide.docName} numberOfLines={6}>{displayName}</Text>
+      {item.size > 0 && (
+        <Text style={slide.docSize}>{formatBytes(item.size)}</Text>
+      )}
+    </View>
+  )
+}
+
+export function AttachmentGallery({
+  attachments,
+  initialIndex,
+  visible,
+  onClose,
+  downloadLabel = 'Скачать',
+  onDownloadAttachment,
+  theme,
+}: Props) {
+  const listRef = useRef<FlatList<GalleryAttachment>>(null)
+  const [currentIndex, setCurrentIndex] = useState(initialIndex)
+  const [isDownloading, setIsDownloading] = useState(false)
+
+  const current = attachments[currentIndex]
+
+  useEffect(() => {
+    if (visible) {
+      setCurrentIndex(initialIndex)
+    }
+  }, [visible, initialIndex])
+
+  const handleViewableChange = useCallback(
+    ({ viewableItems }: { viewableItems: Array<{ index: number | null }> }) => {
+      if (viewableItems[0]?.index != null) {
+        setCurrentIndex(viewableItems[0].index)
+      }
+    },
+    [],
+  )
+
+  const viewabilityConfig = useRef({ viewAreaCoveragePercentThreshold: 50 })
+
+  const scrollTo = (index: number) => {
+    listRef.current?.scrollToIndex({ index, animated: true })
+    setCurrentIndex(index)
+  }
+
+  const handleDownload = async () => {
+    if (!current || isDownloading) return
+
+    setIsDownloading(true)
+    try {
+      await onDownloadAttachment(current)
+    } catch (e) {
+      const message = e instanceof Error ? e.message : 'Не удалось скачать файл'
+      Alert.alert('Ошибка', message)
+    } finally {
+      setIsDownloading(false)
+    }
+  }
+
+  const renderItem = ({ item, index }: { item: GalleryAttachment; index: number }) => (
+    <GallerySlide item={item} isVisible={index === currentIndex} />
+  )
+
+  const counterText = attachments.length > 1 ? `${currentIndex + 1} / ${attachments.length}` : ''
+
+  return (
+    <Modal
+      visible={visible}
+      transparent={false}
+      animationType="fade"
+      onRequestClose={onClose}
+      statusBarTranslucent
+    >
+      <View style={styles.root}>
+        {Platform.OS === 'android' && (
+          <StatusBar barStyle="light-content" backgroundColor="#000" translucent />
+        )}
+
+        <SafeAreaView style={styles.headerSafe}>
+          <View style={styles.header}>
+            <View style={styles.headerSide} />
+            <Text style={styles.counter}>{counterText}</Text>
+            <TouchableOpacity style={styles.closeBtn} onPress={onClose} hitSlop={12}>
+              <Text style={styles.closeIcon}>✕</Text>
+            </TouchableOpacity>
+          </View>
+        </SafeAreaView>
+
+        <View style={styles.listWrap}>
+          <FlatList
+            ref={listRef}
+            data={attachments}
+            keyExtractor={(a) => String(a.id)}
+            renderItem={renderItem}
+            horizontal
+            pagingEnabled
+            showsHorizontalScrollIndicator={false}
+            initialScrollIndex={initialIndex}
+            getItemLayout={(_, index) => ({ length: SW, offset: SW * index, index })}
+            onViewableItemsChanged={handleViewableChange}
+            viewabilityConfig={viewabilityConfig.current}
+            style={styles.list}
+          />
+
+          {attachments.length > 1 && currentIndex > 0 && (
+            <TouchableOpacity
+              style={[styles.navBtn, styles.navLeft]}
+              onPress={() => scrollTo(currentIndex - 1)}
+              activeOpacity={0.7}
+            >
+              <Text style={styles.navIcon}>‹</Text>
+            </TouchableOpacity>
+          )}
+          {attachments.length > 1 && currentIndex < attachments.length - 1 && (
+            <TouchableOpacity
+              style={[styles.navBtn, styles.navRight]}
+              onPress={() => scrollTo(currentIndex + 1)}
+              activeOpacity={0.7}
+            >
+              <Text style={styles.navIcon}>›</Text>
+            </TouchableOpacity>
+          )}
+        </View>
+
+        {current && (
+          <SafeAreaView style={styles.footerSafe}>
+            <View style={styles.footer}>
+              <View style={styles.meta}>
+                <Text style={styles.metaName} numberOfLines={1}>
+                  {attachmentDisplayName(current)}
+                </Text>
+                <Text style={styles.metaInfo}>
+                  {[formatBytes(current.size), current.messageTime].filter(Boolean).join('  ·  ')}
+                </Text>
+              </View>
+              <TouchableOpacity
+                style={[styles.downloadBtn, { backgroundColor: theme.primaryColor }]}
+                onPress={() => void handleDownload()}
+                activeOpacity={0.85}
+                disabled={isDownloading}
+              >
+                {isDownloading ? (
+                  <ActivityIndicator color="#fff" size="small" />
+                ) : (
+                  <>
+                    <Text style={styles.downloadIcon}>↓</Text>
+                    <Text style={styles.downloadText}>{downloadLabel}</Text>
+                  </>
+                )}
+              </TouchableOpacity>
+            </View>
+          </SafeAreaView>
+        )}
+      </View>
+    </Modal>
+  )
+}
+
+const slide = StyleSheet.create({
+  root: {
+    width: SW,
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  image: {
+    width: SW,
+    height: '100%',
+  },
+  doc: {
+    paddingHorizontal: 32,
+    gap: 12,
+  },
+  docName: {
+    color: '#fff',
+    fontSize: 20,
+    fontWeight: '600',
+    textAlign: 'center',
+    lineHeight: 28,
+  },
+  docSize: {
+    color: 'rgba(255,255,255,0.7)',
+    fontSize: 15,
+    textAlign: 'center',
+  },
+})
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    backgroundColor: '#000',
+  },
+  headerSafe: {
+    backgroundColor: 'rgba(0,0,0,0.85)',
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: 'rgba(255,255,255,0.15)',
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+  },
+  headerSide: {
+    width: 40,
+  },
+  counter: {
+    flex: 1,
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: '600',
+    textAlign: 'center',
+  },
+  closeBtn: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  closeIcon: {
+    color: '#111',
+    fontSize: 18,
+    fontWeight: '700',
+    lineHeight: 20,
+  },
+  listWrap: {
+    flex: 1,
+  },
+  list: {
+    flex: 1,
+  },
+  navBtn: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    width: 56,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  navLeft: { left: 0 },
+  navRight: { right: 0 },
+  navIcon: {
+    color: '#fff',
+    fontSize: 40,
+    lineHeight: 44,
+    textShadowColor: 'rgba(0,0,0,0.8)',
+    textShadowOffset: { width: 0, height: 1 },
+    textShadowRadius: 6,
+  },
+  footerSafe: {
+    backgroundColor: 'rgba(0,0,0,0.9)',
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopColor: 'rgba(255,255,255,0.15)',
+  },
+  footer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 20,
+    paddingVertical: 16,
+    gap: 12,
+  },
+  meta: {
+    flex: 1,
+    gap: 4,
+  },
+  metaName: {
+    color: '#fff',
+    fontSize: 15,
+    fontWeight: '600',
+    lineHeight: 20,
+  },
+  metaInfo: {
+    color: 'rgba(255,255,255,0.7)',
+    fontSize: 13,
+    lineHeight: 18,
+  },
+  downloadBtn: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    minWidth: 110,
+    borderRadius: 20,
+    paddingHorizontal: 18,
+    paddingVertical: 10,
+    gap: 6,
+    flexShrink: 0,
+  },
+  downloadIcon: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: 'bold',
+    lineHeight: 18,
+  },
+  downloadText: {
+    color: '#fff',
+    fontSize: 14,
+    fontWeight: '600',
+  },
+})

package/src/components/ChatScreen.tsx

@@ -0,0 +1,267 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react'
+import {
+  ActivityIndicator,
+  FlatList,
+  Image,
+  KeyboardAvoidingView,
+  Platform,
+  SafeAreaView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native'
+import { getAndroidStatusBarHeight } from '../safeArea'
+import { ChatSDK } from '../ChatSDK'
+import { buildTheme, type ChatTheme } from '../theme'
+import { useChat } from '../useChat'
+import type { AttachmentDownloadHandler } from '../attachmentUtils'
+import { defaultAttachmentDownloader } from '../downloaders/defaultAttachmentDownloader'
+import type { AttachmentInput, ChatAttachment, ChatMessage, ChatStrings, GalleryAttachment } from '../types'
+import { MessageBubble } from './MessageBubble'
+import { MessageInput } from './MessageInput'
+import { SurveyOverlay } from './SurveyOverlay'
+import { AttachmentGallery } from './AttachmentGallery'
+
+interface Props {
+  onClose?: () => void
+  theme?: Partial<ChatTheme>
+  strings?: ChatStrings
+  /** Переопределяет встроенный пикер файлов (react-native-document-picker). */
+  onPickFiles?: () => Promise<AttachmentInput[] | null>
+  /** Переопределяет встроенное скачивание вложений из галереи. */
+  onDownloadAttachment?: AttachmentDownloadHandler
+}
+
+const DEFAULT_STRINGS: Required<ChatStrings> = {
+  headerTitle:      'Чат',
+  emptyStateText:   'Начните диалог — оператор ответит в ближайшее время',
+  inputPlaceholder: 'Сообщение…',
+  sendingText:      'Отправка…',
+  errorRetry:       'Повторить',
+  surveyTitle:      'Оцените качество поддержки',
+  surveySubmit:     'Отправить',
+  surveySkip:       'Пропустить',
+  surveyClose:      'Закрыть',
+  galleryDownload:  'Скачать',
+}
+
+export function ChatScreen({
+  onClose,
+  theme: themeOverride,
+  strings,
+  onPickFiles,
+  onDownloadAttachment,
+}: Props) {
+  const config    = ChatSDK.getSDKConfig()
+  const baseTheme = buildTheme(config)
+  const theme     = themeOverride ? { ...baseTheme, ...themeOverride } : baseTheme
+  const listRef   = useRef<FlatList<ChatMessage>>(null)
+
+  const t = { ...DEFAULT_STRINGS, ...strings }
+
+  const {
+    messages,
+    isLoading,
+    isSending,
+    error,
+    survey,
+    sendMessage,
+    sendCallback,
+    submitSurvey,
+    dismissSurvey,
+    retry,
+  } = useChat()
+
+  const [galleryIndex, setGalleryIndex] = useState(0)
+  const [galleryVisible, setGalleryVisible] = useState(false)
+
+  const galleryAttachments = useMemo<GalleryAttachment[]>(
+    () =>
+      messages.flatMap((m) =>
+        (m.attachments ?? [])
+          .filter((a) => a.id > 0)
+          .map((a): GalleryAttachment => ({ ...a, messageTime: m.time })),
+      ),
+    [messages],
+  )
+
+  const openGallery = (attachment: ChatAttachment) => {
+    const idx = galleryAttachments.findIndex((a) => a.id === attachment.id)
+    setGalleryIndex(Math.max(0, idx))
+    setGalleryVisible(true)
+  }
+
+  const showInitialLoader = isLoading && messages.length === 0
+  const title = strings?.headerTitle ?? config?.widgetTitle ?? DEFAULT_STRINGS.headerTitle
+
+  useEffect(() => {
+    if (messages.length > 0) {
+      setTimeout(() => listRef.current?.scrollToEnd({ animated: true }), 100)
+    }
+  }, [messages.length])
+
+  const headerContent = (
+    <>
+      {onClose && (
+        <TouchableOpacity onPress={onClose} style={styles.backBtn} hitSlop={8}>
+          <Text style={[styles.backIcon, { color: theme.headerText }]}>‹</Text>
+        </TouchableOpacity>
+      )}
+      {config?.imageLogo ? (
+        <Image source={{ uri: config.imageLogo }} style={styles.logo} />
+      ) : null}
+      <Text
+        style={[styles.headerTitle, { color: theme.headerText }]}
+        numberOfLines={2}
+        ellipsizeMode="tail"
+      >
+        {title}
+      </Text>
+    </>
+  )
+
+  return (
+    <View style={[styles.root, { backgroundColor: theme.background }]}>
+      <KeyboardAvoidingView
+        style={styles.flex}
+        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+      >
+        {Platform.OS === 'ios' ? (
+          <SafeAreaView style={{ backgroundColor: theme.headerBg }}>
+            <View style={styles.header}>{headerContent}</View>
+          </SafeAreaView>
+        ) : (
+          <View
+            style={[
+              styles.header,
+              {
+                backgroundColor: theme.headerBg,
+                paddingTop: getAndroidStatusBarHeight() + 8,
+              },
+            ]}
+          >
+            {headerContent}
+          </View>
+        )}
+
+        {error && (
+          <View style={styles.errorBanner}>
+            <Text style={styles.errorText}>{error}</Text>
+            <TouchableOpacity onPress={retry}>
+              <Text style={[styles.retryText, { color: theme.primaryColor }]}>
+                {t.errorRetry}
+              </Text>
+            </TouchableOpacity>
+          </View>
+        )}
+
+        {showInitialLoader ? (
+          <View style={styles.loader}>
+            <ActivityIndicator color={theme.primaryColor} size="large" />
+          </View>
+        ) : (
+          <FlatList
+            ref={listRef}
+            style={styles.list}
+            data={messages}
+            keyExtractor={(m) => m.id}
+            renderItem={({ item }) => (
+              <MessageBubble
+                message={item}
+                theme={theme}
+                onButtonPress={(cbData, serverId) => void sendCallback(serverId, cbData)}
+                onAttachmentPress={openGallery}
+              />
+            )}
+            contentContainerStyle={[
+              styles.messageList,
+              messages.length === 0 && styles.messageListEmpty,
+            ]}
+            showsVerticalScrollIndicator={false}
+            ListEmptyComponent={
+              <View style={styles.emptyWrap}>
+                <Text style={[styles.emptyText, { color: theme.systemText }]}>
+                  {t.emptyStateText}
+                </Text>
+              </View>
+            }
+          />
+        )}
+
+        <MessageInput
+          theme={theme}
+          isSending={isSending}
+          onSend={(text, files) => void sendMessage(text, files)}
+          onPickFiles={onPickFiles}
+          strings={t}
+        />
+      </KeyboardAvoidingView>
+
+      {survey && (
+        <SurveyOverlay
+          config={survey}
+          theme={theme}
+          strings={t}
+          onSubmit={submitSurvey}
+          onDismiss={dismissSurvey}
+        />
+      )}
+
+      {galleryAttachments.length > 0 && (
+        <AttachmentGallery
+          attachments={galleryAttachments}
+          initialIndex={galleryIndex}
+          visible={galleryVisible}
+          onClose={() => setGalleryVisible(false)}
+          downloadLabel={t.galleryDownload}
+          onDownloadAttachment={onDownloadAttachment ?? defaultAttachmentDownloader}
+          theme={theme}
+        />
+      )}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  root:             { flex: 1 },
+  flex:             { flex: 1 },
+  list:             { flex: 1 },
+  header: {
+    flexDirection:      'row',
+    alignItems:         'center',
+    paddingHorizontal:  16,
+    paddingBottom:      14,
+    gap:                10,
+    elevation:          2,
+    shadowColor:        '#000',
+    shadowOffset:       { width: 0, height: 1 },
+    shadowOpacity:      0.12,
+    shadowRadius:       3,
+  },
+  backBtn:          { padding: 4, flexShrink: 0 },
+  backIcon:         { fontSize: 28, lineHeight: 28, fontWeight: '300' },
+  logo:             { width: 32, height: 32, borderRadius: 16, flexShrink: 0 },
+  headerTitle:      { fontSize: 17, fontWeight: '600', flex: 1, flexShrink: 1, minWidth: 0 },
+  messageList:      { paddingTop: 12, paddingBottom: 8, flexGrow: 1 },
+  messageListEmpty: { justifyContent: 'center' },
+  loader:           { flex: 1, alignItems: 'center', justifyContent: 'center' },
+  emptyWrap: {
+    alignItems:         'center',
+    justifyContent:     'center',
+    paddingHorizontal:  32,
+    paddingVertical:    60,
+  },
+  emptyText:        { fontSize: 14, textAlign: 'center', lineHeight: 20 },
+  errorBanner: {
+    flexDirection:      'row',
+    alignItems:         'center',
+    justifyContent:     'space-between',
+    backgroundColor:    '#fff3f3',
+    paddingHorizontal:  16,
+    paddingVertical:    8,
+    gap:                8,
+  },
+  errorText:        { color: '#cc2222', fontSize: 13, flex: 1 },
+  retryText:        { fontSize: 13, fontWeight: '500' },
+})