react-native-langflow-chat
Version:
A native React Native component for integrating LangFlow chat with streaming support, citation bubbles, react-native-marked rendering, and customizable UI
95 lines (94 loc) • 3.47 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CitationTooltip = exports.CitationBubble = void 0;
const react_1 = __importDefault(require("react"));
const react_native_1 = require("react-native");
// Componente per il pallino della citazione
const CitationBubble = ({ citation, onPress, citationBubbleColor, fontSize = 12 }) => {
// Calcola le dimensioni del pallino basate sul fontSize - più piccole per le citazioni
const bubbleSize = Math.max(fontSize + 2, 16); // Minimo 16px, più discreto
const textSize = Math.max(fontSize - 4, 8); // Testo più piccolo per le citazioni
return (<react_native_1.TouchableOpacity style={[
styles.citationBubble,
{
backgroundColor: citationBubbleColor,
width: bubbleSize,
height: bubbleSize,
borderRadius: bubbleSize / 2,
},
]} onPress={onPress} activeOpacity={0.7}>
<react_native_1.Text style={[styles.citationNumber, { fontSize: textSize }]}>
{citation.id}
</react_native_1.Text>
</react_native_1.TouchableOpacity>);
};
exports.CitationBubble = CitationBubble;
// Componente per il tooltip della citazione
const CitationTooltip = ({ citation, visible, onClose, sourceTitle, pageText, ofText }) => {
if (!visible)
return null;
return (<react_native_1.Modal transparent={true} visible={visible} animationType="fade" onRequestClose={onClose}>
<react_native_1.TouchableOpacity style={styles.tooltipOverlay} activeOpacity={1} onPress={onClose}>
<react_native_1.View style={styles.tooltipContainer}>
<react_native_1.Text style={styles.tooltipTitle}>{sourceTitle}</react_native_1.Text>
<react_native_1.Text style={styles.tooltipText}>{citation.src}</react_native_1.Text>
<react_native_1.Text style={styles.tooltipPage}>
{pageText} {citation.page} {ofText} {citation.total_pages}
</react_native_1.Text>
</react_native_1.View>
</react_native_1.TouchableOpacity>
</react_native_1.Modal>);
};
exports.CitationTooltip = CitationTooltip;
const styles = react_native_1.StyleSheet.create({
citationBubble: {
// Le dimensioni sono ora calcolate dinamicamente
justifyContent: "center",
alignItems: "center",
marginLeft: 4,
marginRight: 4,
},
citationNumber: {
color: "white",
fontSize: 12,
fontWeight: "bold",
},
tooltipOverlay: {
flex: 1,
backgroundColor: "rgba(0, 0, 0, 0.7)",
justifyContent: "center",
alignItems: "center",
},
tooltipContainer: {
backgroundColor: "#ffffff",
borderRadius: 12,
padding: 16,
maxWidth: "80%",
alignItems: "center",
shadowColor: "#000",
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.25,
shadowRadius: 8,
elevation: 5,
},
tooltipTitle: {
fontSize: 16,
fontWeight: "600",
color: "#000",
marginBottom: 8,
},
tooltipText: {
fontSize: 14,
color: "#333",
marginBottom: 4,
textAlign: "center",
},
tooltipPage: {
fontSize: 12,
color: "#666",
textAlign: "center",
},
});