@kesha-antonov/react-native-chat 4.2.0 → 4.3.0

package/lib/Day/styles.js

@@ -1,22 +1,20 @@
 import { StyleSheet } from 'react-native';
-import { Color } from '../Color';
-export default StyleSheet.create({
+export const createDayStyles = (theme) => StyleSheet.create({
     container: {
-        marginTop: 5,
-        marginBottom: 10,
+        marginTop: 8,
+        marginBottom: 12,
     },
     wrapper: {
-        backgroundColor: 'rgba(0, 0, 0, 0.75)',
-        paddingTop: 6,
-        paddingBottom: 6,
-        paddingLeft: 10,
-        paddingRight: 10,
-        borderRadius: 15,
+        backgroundColor: theme.colors.dayPillBackground,
+        paddingVertical: 5,
+        paddingHorizontal: 12,
+        borderRadius: theme.radii.dayPill,
     },
     text: {
-        color: Color.white,
-        fontSize: 12,
-        fontWeight: '600',
+        color: theme.colors.dayPillText,
+        fontSize: theme.typography.day.fontSize,
+        fontWeight: theme.typography.day.fontWeight,
+        letterSpacing: 0.2,
     },
 });
 //# sourceMappingURL=styles.js.map

package/lib/Day/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/Day/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAEhC,eAAe,UAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE;QACT,SAAS,EAAE,CAAC;QACZ,YAAY,EAAE,EAAE;KACjB;IACD,OAAO,EAAE;QACP,eAAe,EAAE,qBAAqB;QACtC,UAAU,EAAE,CAAC;QACb,aAAa,EAAE,CAAC;QAChB,WAAW,EAAE,EAAE;QACf,YAAY,EAAE,EAAE;QAChB,YAAY,EAAE,EAAE;KACjB;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,KAAK,CAAC,KAAK;QAClB,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,KAAK;KAClB;CACF,CAAC,CAAA"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/Day/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAGzC,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAAgB,EAAE,EAAE,CAClD,UAAU,CAAC,MAAM,CAAC;IAChB,SAAS,EAAE;QACT,SAAS,EAAE,CAAC;QACZ,YAAY,EAAE,EAAE;KACjB;IACD,OAAO,EAAE;QACP,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,iBAAiB;QAC/C,eAAe,EAAE,CAAC;QAClB,iBAAiB,EAAE,EAAE;QACrB,YAAY,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO;KAClC;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,WAAW;QAC/B,QAAQ,EAAE,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC,QAAQ;QACvC,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC,UAAU;QAC3C,aAAa,EAAE,GAAG;KACnB;CACF,CAAC,CAAA"}

package/lib/Icons.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+export interface IconProps {
+    color: string;
+    size: number;
+}
+export type IconRenderer = (props: IconProps) => ReactNode;
+/** Named icons the chat UI renders. Override any subset via the `icons` prop. */
+export type IconName = 'send' | 'mic' | 'camera' | 'play' | 'pause' | 'close' | 'chevronLeft' | 'chevronDown' | 'clock' | 'check' | 'checkAll' | 'pin' | 'plus' | 'emoji' | 'paperclip' | 'reply' | 'pencil' | 'lock' | 'trash';
+/**
+ * Icon override registry. Supply a render function for any icon to replace the
+ * built-in (dependency-free) drawn icon with your own - e.g. lucide-react-native:
+ *
+ * ```tsx
+ * import { Send, Mic } from 'lucide-react-native'
+ * <Chat icons={{
+ *   send: ({ color, size }) => <Send color={color} size={size} />,
+ *   mic:  ({ color, size }) => <Mic color={color} size={size} />,
+ * }} />
+ * ```
+ *
+ * No dependency is added by this library; the drawn icons remain the default.
+ */
+export type ChatIcons = Partial<Record<IconName, IconRenderer>>;
+//# sourceMappingURL=Icons.d.ts.map

package/lib/Icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icons.d.ts","sourceRoot":"","sources":["../src/Icons.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;CACb;AAED,MAAM,MAAM,YAAY,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,SAAS,CAAA;AAE1D,iFAAiF;AACjF,MAAM,MAAM,QAAQ,GAChB,MAAM,GACN,KAAK,GACL,QAAQ,GACR,MAAM,GACN,OAAO,GACP,OAAO,GACP,aAAa,GACb,aAAa,GACb,OAAO,GACP,OAAO,GACP,UAAU,GACV,KAAK,GACL,MAAM,GACN,OAAO,GACP,WAAW,GACX,OAAO,GACP,QAAQ,GACR,MAAM,GACN,OAAO,CAAA;AAEX;;;;;;;;;;;;;GAaG;AACH,MAAM,MAAM,SAAS,GAAG,OAAO,CAAC,MAAM,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAA"}

package/lib/Icons.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Icons.js.map

package/lib/Icons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icons.js","sourceRoot":"","sources":["../src/Icons.ts"],"names":[],"mappings":""}

package/lib/InputToolbar.d.ts

@@ -1,16 +1,14 @@
 import React from 'react';
 import { StyleProp, ViewStyle, TextStyle } from 'react-native';
 import { ActionsProps } from './Actions';
+import { AttachmentAction } from './components/AttachmentSheet';
 import { ReplyPreviewProps } from './components/ReplyPreview';
 import { ComposerProps } from './Composer';
-import { IMessage, ReplyMessage } from './Models';
+import { AudioRecordingProps, IMessage, ReplyMessage, VideoRecordingProps } from './Models';
 import { SendProps } from './Send';
 export type { ReplyPreviewProps } from './components/ReplyPreview';
 export interface InputToolbarProps<TMessage extends IMessage> {
-    actions?: Array<{
-        title: string;
-        action: () => void;
-    }>;
+    actions?: AttachmentAction[];
     actionSheetOptionTintColor?: string;
     containerStyle?: StyleProp<ViewStyle>;
     primaryStyle?: StyleProp<ViewStyle>;
@@ -31,6 +29,21 @@ export interface InputToolbarProps<TMessage extends IMessage> {
     replyPreviewContainerStyle?: StyleProp<ViewStyle>;
     /** Style for reply preview text */
     replyPreviewTextStyle?: StyleProp<TextStyle>;
+    /** Telegram-style hold-to-record voice messages (needs optional expo-audio) */
+    audioRecording?: AudioRecordingProps;
+    /** Record-and-send video messages (needs optional expo-image-picker) */
+    videoRecording?: VideoRecordingProps;
+    /** Force-show the send button even when the composer is empty */
+    isSendButtonAlwaysVisible?: boolean;
+    /** Current composer text (used to swap the send button for the mic button) */
+    text?: string;
+    /** Show an emoji button inset on the left of the field; called on press. */
+    onPressEmoji?: () => void;
+    /**
+     * Whether the composer accepts multiple lines. `true` (default) keeps the
+     * return key inserting a newline; `false` turns it into Send.
+     */
+    isMultiline?: boolean;
 }
 export declare function InputToolbar<TMessage extends IMessage = IMessage>(props: InputToolbarProps<TMessage>): React.JSX.Element;
 //# sourceMappingURL=InputToolbar.d.ts.map

package/lib/InputToolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputToolbar.d.ts","sourceRoot":"","sources":["../src/InputToolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAA;AACnD,OAAO,EAAoB,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAEhF,OAAO,EAAW,YAAY,EAAE,MAAM,WAAW,CAAA;AAEjD,OAAO,EAAgB,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AAC3E,OAAO,EAAY,aAAa,EAAE,MAAM,YAAY,CAAA;AAEpD,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AACjD,OAAO,EAAQ,SAAS,EAAE,MAAM,QAAQ,CAAA;AAGxC,YAAY,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AAElE,MAAM,WAAW,iBAAiB,CAAC,QAAQ,SAAS,QAAQ;IAC1D,OAAO,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC,CAAA;IACtD,0BAA0B,CAAC,EAAE,MAAM,CAAA;IACnC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IACrC,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IACnC,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,QAAQ,CAAC,KAAK,KAAK,CAAC,SAAS,CAAA;IACzE,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,KAAK,CAAC,SAAS,CAAA;IACxD,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,QAAQ,CAAC,KAAK,KAAK,CAAC,SAAS,CAAA;IAC5D,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,KAAK,CAAC,SAAS,CAAA;IAC1D,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAA;IAChC,IAAI,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAA;IAC5B,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IACnC,uCAAuC;IACvC,YAAY,CAAC,EAAE,YAAY,GAAG,IAAI,CAAA;IAClC,8BAA8B;IAC9B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;IACzB,sCAAsC;IACtC,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,KAAK,CAAC,SAAS,CAAA;IAClE,wCAAwC;IACxC,0BAA0B,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IACjD,mCAAmC;IACnC,qBAAqB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAC7C;AAED,wBAAgB,YAAY,CAAC,QAAQ,SAAS,QAAQ,GAAG,QAAQ,EAC/D,KAAK,EAAE,iBAAiB,CAAC,QAAQ,CAAC,qBAyHnC"}
+{"version":3,"file":"InputToolbar.d.ts","sourceRoot":"","sources":["../src/InputToolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAA;AAChF,OAAO,EAAqC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAajG,OAAO,EAAW,YAAY,EAAE,MAAM,WAAW,CAAA;AACjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAA;AAG/D,OAAO,EAAgB,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AAU3E,OAAO,EAAY,aAAa,EAAE,MAAM,YAAY,CAAA;AAGpD,OAAO,EAAE,mBAAmB,EAAE,QAAQ,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAA;AAC3F,OAAO,EAAQ,SAAS,EAAE,MAAM,QAAQ,CAAA;AAIxC,YAAY,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AAElE,MAAM,WAAW,iBAAiB,CAAC,QAAQ,SAAS,QAAQ;IAC1D,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAC5B,0BAA0B,CAAC,EAAE,MAAM,CAAA;IACnC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IACrC,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IACnC,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,QAAQ,CAAC,KAAK,KAAK,CAAC,SAAS,CAAA;IACzE,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,KAAK,CAAC,SAAS,CAAA;IACxD,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,QAAQ,CAAC,KAAK,KAAK,CAAC,SAAS,CAAA;IAC5D,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,KAAK,CAAC,SAAS,CAAA;IAC1D,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAA;IAChC,IAAI,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAA;IAC5B,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IACnC,uCAAuC;IACvC,YAAY,CAAC,EAAE,YAAY,GAAG,IAAI,CAAA;IAClC,8BAA8B;IAC9B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;IACzB,sCAAsC;IACtC,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,KAAK,CAAC,SAAS,CAAA;IAClE,wCAAwC;IACxC,0BAA0B,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IACjD,mCAAmC;IACnC,qBAAqB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAC5C,+EAA+E;IAC/E,cAAc,CAAC,EAAE,mBAAmB,CAAA;IACpC,wEAAwE;IACxE,cAAc,CAAC,EAAE,mBAAmB,CAAA;IACpC,iEAAiE;IACjE,yBAAyB,CAAC,EAAE,OAAO,CAAA;IACnC,8EAA8E;IAC9E,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,4EAA4E;IAC5E,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;IACzB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB;AAOD,wBAAgB,YAAY,CAAC,QAAQ,SAAS,QAAQ,GAAG,QAAQ,EAC/D,KAAK,EAAE,iBAAiB,CAAC,QAAQ,CAAC,qBAuSnC"}

package/lib/InputToolbar.js

@@ -1,24 +1,33 @@
-import React, { useCallback, useMemo } from 'react';
-import { StyleSheet, View } from 'react-native';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import Animated, { Easing, ReduceMotion, cancelAnimation, interpolate, useAnimatedStyle, useSharedValue, withRepeat, withTiming, } from 'react-native-reanimated';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { Actions } from './Actions';
-import { Color } from './Color';
+import { Icon } from './components/Icon';
+import { ChevronIcon, EmojiIcon, TrashIcon } from './components/MediaControls';
 import { ReplyPreview } from './components/ReplyPreview';
+import { VideoRecordButton, isVideoRecordingAvailable } from './components/VideoRecordButton';
+import { VoiceMessageInput, formatElapsed, isVoiceRecordingAvailable, } from './components/VoiceMessageInput';
 import { Composer } from './Composer';
-import { useColorScheme } from './hooks/useColorScheme';
+import { useLabels } from './hooks/useLabels';
+import { useThemedStyles } from './hooks/useTheme';
 import { Send } from './Send';
 import { renderComponentOrElement } from './utils';
 export function InputToolbar(props) {
     const { renderActions, onPressActionButton, renderComposer, renderSend, renderAccessory, actions, actionSheetOptionTintColor, icon, wrapperStyle, containerStyle, replyMessage, onClearReply, renderReplyPreview: renderReplyPreviewProp, replyPreviewContainerStyle, replyPreviewTextStyle, } = props;
-    const colorScheme = useColorScheme();
+    const styles = useThemedStyles(createStyles);
+    const insets = useSafeAreaInsets();
     const containerStyles = useMemo(() => [
         styles.container,
-        colorScheme === 'dark' && styles.container_dark,
+        // Pad for the home indicator so the field doesn't kiss it (no-op when the
+        // keyboard covers the inset).
+        { paddingBottom: insets.bottom },
         containerStyle,
-    ], [colorScheme, containerStyle]);
+    ], [styles, insets.bottom, containerStyle]);
     const primaryStyles = useMemo(() => [
         styles.primary,
         props.primaryStyle,
-    ], [props.primaryStyle]);
+    ], [styles, props.primaryStyle]);
     const actionsFragment = useMemo(() => {
         const actionsProps = {
             onPressActionButton,
@@ -30,7 +39,7 @@ export function InputToolbar(props) {
         };
         if (renderActions)
             return renderComponentOrElement(renderActions, actionsProps);
-        if (onPressActionButton)
+        if (onPressActionButton || actions?.length)
             return <Actions {...actionsProps}/>;
         return null;
     }, [
@@ -42,6 +51,14 @@ export function InputToolbar(props) {
         wrapperStyle,
         containerStyle,
     ]);
+    const emojiFragment = useMemo(() => {
+        if (!props.onPressEmoji)
+            return null;
+        const size = styles.insetColor.fontSize;
+        return (<Pressable onPress={props.onPressEmoji} hitSlop={8} accessibilityRole='button' accessibilityLabel='emoji' style={styles.inset}>
+        <Icon name='emoji' color={styles.insetColor.color} size={size} fallback={<EmojiIcon color={styles.insetColor.color} size={size}/>}/>
+      </Pressable>);
+    }, [props.onPressEmoji, styles]);
     const composerFragment = useMemo(() => {
         const composerProps = props;
         if (renderComposer)
@@ -53,6 +70,72 @@ export function InputToolbar(props) {
             return renderComponentOrElement(renderSend, props);
         return <Send {...props}/>;
     }, [renderSend, props]);
+    // onSend is forwarded from Chat at runtime; it isn't part of the public
+    // InputToolbarProps surface, so read it through a typed cast.
+    const onSend = props.onSend;
+    const labels = useLabels();
+    // Recording state is owned by VoiceMessageInput (it holds the recorder + the
+    // gesture); it reports up here so the bar - timer on the left, pulsating
+    // "slide to cancel" hint across the field - can span the full input row.
+    const [voiceState, setVoiceState] = useState({
+        active: false, locked: false, elapsed: 0, cancelArmed: false, levels: [],
+    });
+    const voiceRef = useRef(null);
+    const recPulse = useSharedValue(0);
+    useEffect(() => {
+        if (voiceState.active) {
+            recPulse.value = withRepeat(withTiming(1, { duration: 750, easing: Easing.inOut(Easing.quad), reduceMotion: ReduceMotion.System }), -1, true);
+        }
+        else {
+            cancelAnimation(recPulse);
+            recPulse.value = 0;
+        }
+    }, [voiceState.active, recPulse]);
+    const recDotStyle = useAnimatedStyle(() => ({
+        opacity: interpolate(recPulse.value, [0, 1], [1, 0.25]),
+    }));
+    const recHintStyle = useAnimatedStyle(() => ({
+        opacity: interpolate(recPulse.value, [0, 1], [1, 0.5]),
+    }));
+    // Telegram-style swap: mic when the composer is empty and voice recording is
+    // enabled/available, otherwise the send button.
+    const hasText = !!props.text?.trim();
+    const showVoice = !!props.audioRecording?.isEnabled &&
+        isVoiceRecordingAvailable &&
+        !hasText &&
+        !props.isSendButtonAlwaysVisible;
+    const showVideo = !!props.videoRecording?.isEnabled && isVideoRecordingAvailable;
+    // Telegram shares one right-slot control between voice and video: a single tap
+    // switches which one it is, a hold records. Only offered when both are
+    // available - with just one, that control has nothing to toggle to.
+    const [recordMode, setRecordMode] = useState('voice');
+    const canToggleMode = showVoice && showVideo;
+    const toggleRecordMode = useCallback(() => {
+        setRecordMode(current => (current === 'voice' ? 'video' : 'voice'));
+    }, []);
+    const rightControl = useMemo(() => {
+        if (showVoice && !(canToggleMode && recordMode === 'video'))
+            return (<VoiceMessageInput ref={voiceRef} config={props.audioRecording} onSend={onSend} onStateChange={setVoiceState} onTap={canToggleMode ? toggleRecordMode : undefined}/>);
+        if (canToggleMode && recordMode === 'video')
+            return (<VideoRecordButton config={props.videoRecording} onSend={onSend} onTap={toggleRecordMode} variant='round'/>);
+        return sendFragment;
+    }, [
+        showVoice,
+        canToggleMode,
+        recordMode,
+        toggleRecordMode,
+        props.audioRecording,
+        props.videoRecording,
+        onSend,
+        sendFragment,
+    ]);
+    // Inset camera button inside the field. Dropped once the right-slot control
+    // can toggle to video, so there is only ever one camera entry point.
+    const videoFragment = useMemo(() => {
+        if (!showVideo || canToggleMode)
+            return null;
+        return <VideoRecordButton config={props.videoRecording} onSend={onSend}/>;
+    }, [showVideo, canToggleMode, props.videoRecording, onSend]);
     const accessoryFragment = useMemo(() => {
         if (!renderAccessory)
             return null;
@@ -83,26 +166,147 @@ export function InputToolbar(props) {
     return (<View style={containerStyles}>
       {replyPreviewFragment}
       <View style={primaryStyles}>
-        {actionsFragment}
-        {composerFragment}
-        {sendFragment}
+        {voiceState.active
+            ? (<View style={styles.recordingBar}>
+              <Animated.View style={[styles.recDot, recDotStyle]}/>
+              <Text style={styles.recTimer}>{formatElapsed(voiceState.elapsed)}</Text>
+              {voiceState.locked
+                    ? (
+                    // Locked: Telegram shows a trash target and a live waveform in
+                    // place of the slide-to-cancel hint, with send on the right.
+                    <>
+                    <Pressable style={styles.recTrash} hitSlop={8} onPress={() => voiceRef.current?.cancel()} accessibilityRole='button' accessibilityLabel='delete recording'>
+                      <Icon name='trash' color={styles.recTrashColor.color} size={20} fallback={<TrashIcon color={styles.recTrashColor.color} size={20}/>}/>
+                    </Pressable>
+                    <View style={styles.recLevels}>
+                      {voiceState.levels.map((level, index) => (<View key={index} style={[
+                                styles.recLevelBar,
+                                // Per-sample runtime height, so it stays inline.
+                                { height: 2 + level * 18 },
+                            ]}/>))}
+                    </View>
+                  </>)
+                    : (<Animated.View style={[styles.recHintWrap, recHintStyle]} pointerEvents='none'>
+                    <ChevronIcon color={styles.recHintColor.color} size={14} direction='left'/>
+                    <Text style={[styles.recHint, voiceState.cancelArmed && styles.recHintArmed]}>
+                      {labels.slideToCancel}
+                    </Text>
+                  </Animated.View>)}
+            </View>)
+            : (<View style={styles.fieldGroup}>
+              {emojiFragment}
+              {composerFragment}
+              {actionsFragment}
+              {videoFragment}
+            </View>)}
+        {rightControl}
       </View>
       {accessoryFragment}
     </View>);
 }
-const styles = StyleSheet.create({
+const createStyles = (theme) => StyleSheet.create({
     container: {
         borderTopWidth: StyleSheet.hairlineWidth,
-        borderTopColor: Color.defaultColor,
-        backgroundColor: Color.white,
-    },
-    container_dark: {
-        backgroundColor: '#1a1a1a',
-        borderTopColor: '#444',
+        backgroundColor: theme.colors.inputBarBackground,
+        borderTopColor: theme.colors.separator,
     },
     primary: {
         flexDirection: 'row',
         alignItems: 'flex-end',
+        paddingVertical: 8,
+        paddingHorizontal: theme.spacing.screenEdge,
+        gap: theme.spacing.screenEdge,
+        // positioned parent for the voice recorder's overlay bar
+        position: 'relative',
+    },
+    // While recording, the field is replaced by a bar: a blinking red dot and the
+    // timer on the left, then the pulsating "slide to cancel" hint (or a Cancel
+    // button once locked). Sized like the field so the row height does not jump.
+    recordingBar: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        minHeight: theme.composer.minHeight,
+        paddingHorizontal: theme.composer.fieldPaddingH,
+    },
+    recDot: {
+        width: 9,
+        height: 9,
+        borderRadius: 5,
+        backgroundColor: theme.colors.error,
+    },
+    recTimer: {
+        marginLeft: 8,
+        fontSize: 15,
+        color: theme.colors.inputText,
+        fontVariant: ['tabular-nums'],
+        minWidth: 44,
+    },
+    recHintWrap: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 4,
+    },
+    recHint: {
+        fontSize: 14,
+        color: theme.colors.placeholder,
+    },
+    recHintArmed: {
+        color: theme.colors.error,
+    },
+    // Carries the chevron color through the StyleSheet so it stays themed.
+    recHintColor: {
+        color: theme.colors.placeholder,
+    },
+    // Locked state: a real delete target (44pt) instead of a text link.
+    recTrash: {
+        width: 44,
+        height: 44,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    recTrashColor: {
+        color: theme.colors.error,
+    },
+    // Live mic amplitudes, newest on the right - Telegram's locked-state waveform.
+    recLevels: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+        height: 22,
+        gap: 1,
+    },
+    recLevelBar: {
+        width: 2,
+        borderRadius: 1,
+        backgroundColor: theme.colors.accent,
+    },
+    // The field is the bar: one rounded pill holding the inset controls + the
+    // text field. Only the send/mic button lives outside it.
+    fieldGroup: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'flex-end',
+        minHeight: theme.composer.minHeight,
+        paddingHorizontal: theme.composer.fieldPaddingH,
+        gap: 6,
+        borderRadius: theme.radii.inputField,
+        backgroundColor: theme.colors.inputBackground,
+        borderWidth: StyleSheet.hairlineWidth,
+        borderColor: theme.colors.inputFieldBorder,
+    },
+    inset: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingBottom: 8,
+    },
+    // Carries inset icon color + size (kept out of JSX).
+    insetColor: {
+        color: theme.colors.incomingMeta,
+        fontSize: theme.composer.insetIconSize,
     },
 });
 //# sourceMappingURL=InputToolbar.js.map

package/lib/InputToolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputToolbar.js","sourceRoot":"","sources":["../src/InputToolbar.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"InputToolbar.js","sourceRoot":"","sources":["../src/InputToolbar.tsx"],"names":[],"mappings":"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"}

package/lib/LoadEarlierMessages.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LoadEarlierMessages.d.ts","sourceRoot":"","sources":["../src/LoadEarlierMessages.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAIL,SAAS,EACT,SAAS,EACT,SAAS,EACH,MAAM,cAAc,CAAA;AAK5B,MAAM,WAAW,wBAAwB;IACvC,WAAW,EAAE,OAAO,CAAA;IACpB,SAAS,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,uBAAuB,CAAC,EAAE,OAAO,CAAA;IACjC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IACrC,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IACnC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAChC,sBAAsB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAC7C,sBAAsB,CAAC,EAAE,MAAM,CAAA;IAC/B,qBAAqB,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,CAAA;CACnD;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAuClE,CAAA"}
+{"version":3,"file":"LoadEarlierMessages.d.ts","sourceRoot":"","sources":["../src/LoadEarlierMessages.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAIL,SAAS,EACT,SAAS,EACT,SAAS,EACH,MAAM,cAAc,CAAA;AAQ5B,MAAM,WAAW,wBAAwB;IACvC,WAAW,EAAE,OAAO,CAAA;IACpB,SAAS,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,uBAAuB,CAAC,EAAE,OAAO,CAAA;IACjC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IACrC,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IACnC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAChC,sBAAsB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAC7C,sBAAsB,CAAC,EAAE,MAAM,CAAA;IAC/B,qBAAqB,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,CAAA;CACnD;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CA2ClE,CAAA"}

package/lib/LoadEarlierMessages.js

@@ -2,29 +2,34 @@ import React from 'react';
 import { ActivityIndicator, StyleSheet, View, Text } from 'react-native';
 import { Color } from './Color';
 import { TouchableOpacity } from './components/TouchableOpacity';
+import { useLabels } from './hooks/useLabels';
+import { useThemedStyles } from './hooks/useTheme';
 import stylesCommon from './styles';
-export const LoadEarlierMessages = ({ isLoading = false, onPress, label = 'Load earlier messages', containerStyle, wrapperStyle, textStyle, activityIndicatorColor = 'white', activityIndicatorSize = 'small', activityIndicatorStyle, }) => {
+export const LoadEarlierMessages = ({ isLoading = false, onPress, label, containerStyle, wrapperStyle, textStyle, activityIndicatorColor = 'white', activityIndicatorSize = 'small', activityIndicatorStyle, }) => {
+    const styles = useThemedStyles(createStyles);
+    const labels = useLabels();
+    const resolvedLabel = label ?? labels.loadEarlier;
     return (<TouchableOpacity style={[styles.container, containerStyle]} onPress={onPress} enabled={!isLoading} accessibilityRole='button'>
       <View style={[stylesCommon.centerItems, styles.wrapper, wrapperStyle]}>
         {isLoading
             ? (<ActivityIndicator color={activityIndicatorColor} size={activityIndicatorSize} style={[styles.activityIndicator, activityIndicatorStyle]}/>)
             : (<View style={styles.textContainer}>
                 <Text style={[styles.text, textStyle]}>
-                  {label}
+                  {resolvedLabel}
                 </Text>
               </View>)}
       </View>
     </TouchableOpacity>);
 };
-const styles = StyleSheet.create({
+const createStyles = (theme) => StyleSheet.create({
     container: {
         alignItems: 'center',
         marginVertical: 10,
     },
     wrapper: {
-        backgroundColor: Color.defaultColor,
-        borderRadius: 15,
-        paddingHorizontal: 10,
+        backgroundColor: theme.colors.dayPillBackground,
+        borderRadius: theme.radii.dayPill,
+        paddingHorizontal: 12,
         paddingVertical: 5,
     },
     textContainer: {
@@ -33,7 +38,7 @@ const styles = StyleSheet.create({
     },
     text: {
         backgroundColor: Color.backgroundTransparent,
-        color: Color.white,
+        color: theme.colors.dayPillText,
         fontSize: 12,
         lineHeight: 13,
     },

package/lib/LoadEarlierMessages.js.map

@@ -1 +1 @@
-{"version":3,"file":"LoadEarlierMessages.js","sourceRoot":"","sources":["../src/LoadEarlierMessages.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EACL,iBAAiB,EACjB,UAAU,EACV,IAAI,EAIJ,IAAI,EAAE,MAAM,cAAc,CAAA;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAA;AAChE,OAAO,YAAY,MAAM,UAAU,CAAA;AAgBnC,MAAM,CAAC,MAAM,mBAAmB,GAAuC,CAAC,EACtE,SAAS,GAAG,KAAK,EACjB,OAAO,EACP,KAAK,GAAG,uBAAuB,EAC/B,cAAc,EACd,YAAY,EACZ,SAAS,EACT,sBAAsB,GAAG,OAAO,EAChC,qBAAqB,GAAG,OAAO,EAC/B,sBAAsB,GACvB,EAAE,EAAE;IACH,OAAO,CACL,CAAC,gBAAgB,CACf,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC,CAC1C,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CACpB,iBAAiB,CAAC,QAAQ,CAE1B;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,WAAW,EAAE,MAAM,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,CACpE;QAAA,CACE,SAAS;YACP,CAAC,CAAC,CACA,CAAC,iBAAiB,CAChB,KAAK,CAAC,CAAC,sBAAsB,CAAC,CAC9B,IAAI,CAAC,CAAC,qBAAqB,CAAC,CAC5B,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,iBAAiB,EAAE,sBAAsB,CAAC,CAAC,EAC1D,CACH;YACD,CAAC,CAAC,CACA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,CAChC;gBAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,CACpC;kBAAA,CAAC,KAAK,CACR;gBAAA,EAAE,IAAI,CACR;cAAA,EAAE,IAAI,CAAC,CAEb,CACF;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,gBAAgB,CAAC,CACpB,CAAA;AACH,CAAC,CAAA;AAED,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE;QACT,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,EAAE;KACnB;IACD,OAAO,EAAE;QACP,eAAe,EAAE,KAAK,CAAC,YAAY;QACnC,YAAY,EAAE,EAAE;QAChB,iBAAiB,EAAE,EAAE;QACrB,eAAe,EAAE,CAAC;KACnB;IACD,aAAa,EAAE;QACb,UAAU,EAAE,CAAC;QACb,aAAa,EAAE,CAAC;KACjB;IACD,IAAI,EAAE;QACJ,eAAe,EAAE,KAAK,CAAC,qBAAqB;QAC5C,KAAK,EAAE,KAAK,CAAC,KAAK;QAClB,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,EAAE;KACf;IACD,iBAAiB,EAAE;QACjB,iBAAiB,EAAE,EAAE;KACtB;CACF,CAAC,CAAA"}
+{"version":3,"file":"LoadEarlierMessages.js","sourceRoot":"","sources":["../src/LoadEarlierMessages.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EACL,iBAAiB,EACjB,UAAU,EACV,IAAI,EAIJ,IAAI,EAAE,MAAM,cAAc,CAAA;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAA;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AAClD,OAAO,YAAY,MAAM,UAAU,CAAA;AAiBnC,MAAM,CAAC,MAAM,mBAAmB,GAAuC,CAAC,EACtE,SAAS,GAAG,KAAK,EACjB,OAAO,EACP,KAAK,EACL,cAAc,EACd,YAAY,EACZ,SAAS,EACT,sBAAsB,GAAG,OAAO,EAChC,qBAAqB,GAAG,OAAO,EAC/B,sBAAsB,GACvB,EAAE,EAAE;IACH,MAAM,MAAM,GAAG,eAAe,CAAC,YAAY,CAAC,CAAA;IAC5C,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,MAAM,aAAa,GAAG,KAAK,IAAI,MAAM,CAAC,WAAW,CAAA;IAEjD,OAAO,CACL,CAAC,gBAAgB,CACf,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC,CAC1C,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CACpB,iBAAiB,CAAC,QAAQ,CAE1B;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,WAAW,EAAE,MAAM,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,CACpE;QAAA,CACE,SAAS;YACP,CAAC,CAAC,CACA,CAAC,iBAAiB,CAChB,KAAK,CAAC,CAAC,sBAAsB,CAAC,CAC9B,IAAI,CAAC,CAAC,qBAAqB,CAAC,CAC5B,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,iBAAiB,EAAE,sBAAsB,CAAC,CAAC,EAC1D,CACH;YACD,CAAC,CAAC,CACA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,CAChC;gBAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,CACpC;kBAAA,CAAC,aAAa,CAChB;gBAAA,EAAE,IAAI,CACR;cAAA,EAAE,IAAI,CAAC,CAEb,CACF;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,gBAAgB,CAAC,CACpB,CAAA;AACH,CAAC,CAAA;AAED,MAAM,YAAY,GAAG,CAAC,KAAgB,EAAE,EAAE,CAAC,UAAU,CAAC,MAAM,CAAC;IAC3D,SAAS,EAAE;QACT,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,EAAE;KACnB;IACD,OAAO,EAAE;QACP,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,iBAAiB;QAC/C,YAAY,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO;QACjC,iBAAiB,EAAE,EAAE;QACrB,eAAe,EAAE,CAAC;KACnB;IACD,aAAa,EAAE;QACb,UAAU,EAAE,CAAC;QACb,aAAa,EAAE,CAAC;KACjB;IACD,IAAI,EAAE;QACJ,eAAe,EAAE,KAAK,CAAC,qBAAqB;QAC5C,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,WAAW;QAC/B,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,EAAE;KACf;IACD,iBAAiB,EAAE;QACjB,iBAAiB,EAAE,EAAE;KACtB;CACF,CAAC,CAAA"}

package/lib/Message/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Message/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAA;AAQ3D,OAAO,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAA;AAMpC,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAEtC,cAAc,SAAS,CAAA;AAwCvB,eAAO,MAAM,OAAO,GAAI,QAAQ,SAAS,QAAQ,GAAG,QAAQ,EAAE,OAAO,YAAY,CAAC,QAAQ,CAAC,6BA0K1F,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Message/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAA;AAQ3D,OAAO,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAA;AAOpC,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAEtC,cAAc,SAAS,CAAA;AA0CvB,eAAO,MAAM,OAAO,GAAI,QAAQ,SAAS,QAAQ,GAAG,QAAQ,EAAE,OAAO,YAAY,CAAC,QAAQ,CAAC,6BA2K1F,CAAA"}

package/lib/Message/index.js

@@ -4,13 +4,14 @@ import ReanimatedSwipeable from 'react-native-gesture-handler/ReanimatedSwipeabl
 import Animated, { useAnimatedStyle } from 'react-native-reanimated';
 import { Avatar } from '../Avatar';
 import { Bubble } from '../Bubble';
-import { Color } from '../Color';
+import { useTheme, useThemedStyles } from '../hooks/useTheme';
 import { getStyleWithPosition } from '../styles';
 import { SystemMessage } from '../SystemMessage';
 import { isSameUser, renderComponentOrElement } from '../utils';
 import styles from './styles';
 export * from './types';
 const ReplyIcon = ({ progress, direction, position, style }) => {
+    const localStyles = useThemedStyles(createLocalStyles);
     const animatedStyle = useAnimatedStyle(() => {
         'worklet';
         const scale = Math.min(progress.value, 1);
@@ -42,6 +43,7 @@ export const Message = (props) => {
     const onSwipeToReply = swipeToReply?.onSwipe;
     const renderSwipeToReplyActionProp = swipeToReply?.renderAction;
     const swipeToReplyActionContainerStyle = swipeToReply?.actionContainerStyle;
+    const theme = useTheme();
     const swipeableRef = useRef(null);
     const renderBubble = useCallback(() => {
         const { 
@@ -101,8 +103,7 @@ export const Message = (props) => {
             return renderSystemMessage();
         return (<View style={[
                 getStyleWithPosition(styles, 'container', position),
-                { marginBottom: sameUser ? 2 : 10 },
-                !props.isInverted && { marginBottom: 2 },
+                { marginBottom: sameUser ? theme.spacing.withinGroup : theme.spacing.betweenGroups },
                 containerStyle?.[position],
             ]}>
         {position === 'left' && renderAvatar()}
@@ -114,7 +115,7 @@ export const Message = (props) => {
         renderSystemMessage,
         position,
         sameUser,
-        props.isInverted,
+        theme,
         containerStyle,
         renderAvatar,
         renderBubble,
@@ -132,7 +133,7 @@ export const Message = (props) => {
       </ReanimatedSwipeable>
     </View>);
 };
-const localStyles = StyleSheet.create({
+const createLocalStyles = (theme) => StyleSheet.create({
     swipeActionContainer: {
         width: 40,
         justifyContent: 'center',
@@ -142,7 +143,7 @@ const localStyles = StyleSheet.create({
         width: 28,
         height: 28,
         borderRadius: 14,
-        backgroundColor: Color.defaultBlue,
+        backgroundColor: theme.colors.accent,
         justifyContent: 'center',
         alignItems: 'center',
     },
@@ -162,7 +163,7 @@ const localStyles = StyleSheet.create({
         borderBottomWidth: 5,
         borderBottomColor: 'transparent',
         borderRightWidth: 6,
-        borderRightColor: Color.white,
+        borderRightColor: '#fff',
     },
     replyIconLine: {
         position: 'absolute',
@@ -172,8 +173,8 @@ const localStyles = StyleSheet.create({
         height: 4,
         borderTopWidth: 2,
         borderRightWidth: 2,
-        borderTopColor: Color.white,
-        borderRightColor: Color.white,
+        borderTopColor: '#fff',
+        borderRightColor: '#fff',
         borderTopRightRadius: 4,
     },
 });