Skip to main content
Glama
lallen30
by lallen30
BluestoneAppsAIScreen.tsx4.44 kB
import React, { useState, useEffect } from 'react'; import { View, Text, TextInput, TouchableOpacity, ScrollView, ActivityIndicator } from 'react-native'; import { styles } from './Styles'; import axiosRequest from '../../../helper/axiosRequest'; import { API } from '../../../helper/config'; import HTML from 'react-native-render-html'; import { useWindowDimensions } from 'react-native'; const defaultSystemFonts = [ 'Arial', 'Helvetica', 'Helvetica Neue', 'System', '-apple-system', 'sans-serif', ]; const renderersProps = { img: { enableExperimentalPercentWidth: true, }, }; const BluestoneAppsAIScreen = ({ navigation }: any) => { const [showWelcomeMessage, setShowWelcomeMessage] = useState(true); const [question, setQuestion] = useState(''); const [replyContent, setReplyContent] = useState(''); const [aiWelcomeMessage, setAiWelcomeMessage] = useState(''); const [isLoading, setIsLoading] = useState(false); const { width } = useWindowDimensions(); useEffect(() => { getAIWelcome(); }, []); const getAIWelcome = async () => { try { console.log('Fetching AI welcome message...'); const response = await axiosRequest.get( `${API.ENDPOINTS.MOBILEAPI}/${API.ENDPOINTS.GET_AI_WELCOME}` ); console.log('AI Welcome Response:', response?.data); if (response?.data?.status === "success") { console.log('Setting welcome message:', response.data.message); setAiWelcomeMessage(response.data.message); } else { console.log('No success status in response'); setAiWelcomeMessage('Welcome to Bluestone AI! How can I help you today?'); } } catch (error) { console.error('Error getting AI welcome message:', error); setAiWelcomeMessage('Welcome to Bluestone AI! How can I help you today?'); } }; const submitQuestion = async () => { if (!question.trim()) { return; } setIsLoading(true); try { console.log('Submitting question to ask_bluestoneai endpoint...'); const response = await axiosRequest.post( `${API.ENDPOINTS.MOBILEAPI}/${API.ENDPOINTS.ASK_BLUESTONEAI}`, { question: question.trim() } ); console.log('Question response:', response?.data); if (response?.data?.reply) { setReplyContent(response.data.reply); setShowWelcomeMessage(false); setQuestion(''); } else { console.error('No reply in response'); } } catch (error) { console.error('Error submitting question:', error); } finally { setIsLoading(false); } }; const renderHtmlContent = (content: string) => { if (!content) return null; return ( <HTML source={{ html: content }} contentWidth={width - 64} systemFonts={defaultSystemFonts} renderersProps={renderersProps} baseStyle={styles.htmlContent} tagsStyles={{ p: styles.paragraph, h1: styles.heading1, h2: styles.heading2, body: { color: '#333' }, }} enableExperimentalBRCollapsing enableExperimentalGhostLinesPrevention /> ); }; return ( <ScrollView style={styles.container}> <View style={styles.content}> {showWelcomeMessage ? ( <View style={styles.messageContainer}> {aiWelcomeMessage ? ( renderHtmlContent(aiWelcomeMessage) ) : ( <Text style={styles.loadingText}>Loading welcome message...</Text> )} </View> ) : null} {replyContent ? ( <View style={styles.messageContainer}> {renderHtmlContent(replyContent)} </View> ) : null} <View style={styles.inputContainer}> <TextInput style={styles.input} value={question} onChangeText={setQuestion} placeholder="Ask a question" multiline /> <TouchableOpacity style={styles.submitButton} onPress={submitQuestion} disabled={isLoading} > {isLoading ? ( <ActivityIndicator color="#fff" /> ) : ( <Text style={styles.submitButtonText}>Submit</Text> )} </TouchableOpacity> </View> </View> </ScrollView> ); }; export default BluestoneAppsAIScreen;

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/lallen30/mcp-remote-server'

If you have feedback or need assistance with the MCP directory API, please join our Discord server