react-native-ajora/lib/InputToolbar/index.js

The most complete AI agent UI for React Native

import React, { useMemo } from "react";
import { View } from "react-native";
import { Composer } from "../Composer";
import { Send } from "../Send";
import { Actions } from "../Actions";
import { AttachmentPreview } from "./AttachmentPreview";
import { useChatContext } from "../AjoraContext";
import styles from "./styles";
export function InputToolbar(props) {
    const { renderActions, onPressActionButton, renderComposer, renderSend, options, optionTintColor, icon, wrapperStyle, containerStyle, renderAttachment, onUpload, } = props;
    const { ajora } = useChatContext();
    const { attachement, isRecording } = ajora;
    const actionsFragment = useMemo(() => {
        const props = {
            onPressActionButton,
            options,
            optionTintColor,
            icon,
            wrapperStyle,
            containerStyle,
            onUpload,
        };
        return (<View style={styles.actionsContainer}>
        {renderActions?.(props) || <Actions {...props}/>}
      </View>);
    }, [
        renderActions,
        options,
        optionTintColor,
        icon,
        wrapperStyle,
        containerStyle,
        onUpload,
    ]);
    const composerFragment = useMemo(() => {
        return (renderComposer?.(props) || (<Composer {...props}/>));
    }, [renderComposer, props]);
    if (isRecording) {
        return (<View style={[styles.composer, { minHeight: attachement ? 200 : 100 }]}>
        <View style={[styles.actionsContainer, { justifyContent: "flex-end" }]}>
          {renderSend?.(props) || <Send {...props}/>}
        </View>
      </View>);
    }
    return (<View style={[styles.composer, { minHeight: attachement ? 200 : 100 }]}>
      <AttachmentPreview renderAttachment={renderAttachment}/>

      {composerFragment}
      <View style={styles.actionsContainer}>
        {actionsFragment}
        {renderSend?.(props) || <Send {...props}/>}
      </View>
    </View>);
}
//# sourceMappingURL=index.js.map