Merge pull request #274 from amosproj/268-integrate-LLM-dropdown

Multiple LLM Answer Queries + Voice Output Mutable and Doesn't Read Links

src/frontend/components/ChatBubble/index.tsx

@@ -1,10 +1,10 @@
-import * as Speech from 'expo-speech';
 import React, { useState } from 'react';
 import { ScrollView, Text, TextInput, View } from 'react-native';
 import Markdown from 'react-native-markdown-display';
 import { ActivityIndicator, Button, IconButton, useTheme } from 'react-native-paper';
 import type { MD3Colors } from 'react-native-paper/lib/typescript/types';
 import type { conversationMessage } from 'src/frontend/types';
+import { SpeakButton } from '../SpeakButton';
 import { Style } from './style';
 
 type ChatBubbleProps = {
@@ -18,8 +18,12 @@ export function ChatBubble({ message }: ChatBubbleProps) {
   const isUser = message.type === 'USER';
   const AIResponses = !isUser ? Object.entries(message.message) : [];
 
-  // take the key of the map as the current LLM
-  const [llm, setLLM] = useState(AIResponses.length > 0 ? AIResponses[0][0] : 'error');
+  // set default LLM to first LLM that has a response
+  const [llm, setLLM] = useState(
+    AIResponses.length > 0
+      ? AIResponses.find(([key, value]) => value !== 'Model Not Found')?.[0] || AIResponses[0][0]
+      : 'error'
+  );
 
   //---------------Functions for buttons----------------
   const handleNextResponse = () => {
@@ -87,14 +91,7 @@ export function ChatBubble({ message }: ChatBubbleProps) {
           disabled={AIResponses.length <= 1}
           style={Style.chevronButtonRight}
         />
-        <IconButton
-          icon='volume-up'
-          size={16}
-          onPress={() => {
-            Speech.speak(response ? response : '', { language: 'en-US', pitch: 1, rate: 1 });
-          }}
-          style={Style.speakButton}
-        />
+        <SpeakButton response={response} />
       </View>
     );
   }

src/frontend/components/ChatBubble/style.ts

@@ -1,5 +1,4 @@
 import { StyleSheet } from 'react-native';
-import { useTheme } from 'react-native-paper';
 
 export const Style = StyleSheet.create({
   chevronButtonLeft: {
@@ -53,10 +52,6 @@ export const Style = StyleSheet.create({
   receivedMessage: {
     alignSelf: 'flex-start'
   },
-  speakButton: {
-    alignSelf: 'center',
-    margin: 0
-  },
   chatBubble: {
     flexDirection: 'row',
     alignItems: 'center',

src/frontend/components/DropdownMenu/index.tsx

@@ -21,14 +21,10 @@ export const DropdownMenu = () => {
   const activeLLMsNames = Object.values(activeLLMs)
     .filter((llm) => llm.active)
     .map((llm) => llm.name);
-  let buttonLabel = activeLLMsCount === 1 ? activeLLMsNames[0] : `${activeLLMsCount} LLMs`;
 
-  // If no chatId is selected, set button label to "SELECT"
-  if (chat === undefined) {
-    buttonLabel = '';
-  }
+  const buttonLabel = activeLLMsCount === 1 ? activeLLMsNames[0] : `${activeLLMsCount} LLMs`;
 
-  // Determine if the button should be disabled
+  // Determine if the button should be disabledHello
   const isButtonDisabled = chat === undefined || activeLLMsCount === 0;
 
   return (

src/frontend/components/SpeakButton/index.tsx

@@ -0,0 +1,49 @@
+import * as Speech from 'expo-speech';
+import React, { useEffect, useState } from 'react';
+import { IconButton } from 'react-native-paper';
+import { Style } from './style';
+
+export function SpeakButton(props: { response: string }) {
+  const [isSpeaking, setIsSpeaking] = useState(false);
+
+  // Function to remove links from the text
+  function extractReadableText(response: string): string {
+    // Regular expression to match http and https links
+    const linkRegex = /(https?:\/\/[^\s]+)|(www\.[^\s]+)/g;
+    // Remove links from the text
+    return response.replace(linkRegex, '');
+  }
+
+  useEffect(() => {
+    return () => {
+      Speech.stop();
+    };
+  }, []);
+
+  // if button is pressed
+  const handleSpeech = () => {
+    if (isSpeaking) {
+      setIsSpeaking(false);
+      Speech.stop();
+    } else {
+      setIsSpeaking(true);
+      const readableText = extractReadableText(props.response);
+      Speech.speak(readableText, {
+        language: 'en-US',
+        pitch: 1,
+        rate: 1,
+        onDone: () => setIsSpeaking(false),
+        onError: () => setIsSpeaking(false)
+      });
+    }
+  };
+
+  return (
+    <IconButton
+      icon={!isSpeaking ? 'volume-up' : 'volume-mute'}
+      size={16}
+      onPress={handleSpeech}
+      style={Style.speakButton}
+    />
+  );
+}

src/frontend/components/SpeakButton/style.ts

@@ -0,0 +1,8 @@
+import { StyleSheet } from 'react-native';
+
+export const Style = StyleSheet.create({
+  speakButton: {
+    alignSelf: 'center',
+    margin: 0
+  }
+});

src/frontend/components/index.ts

@@ -11,3 +11,4 @@ export * from './ChatBubble';
 export * from './RenderChat';
 export * from './ChatKeyboard';
 export * from './VoiceButton';
+export * from './SpeakButton';

src/frontend/hooks/useLLMsTypes.ts

@@ -1,6 +1,5 @@
 export const LLM_MODELS = [
   { key: 'gpt-4', name: 'OpenAi' },
   { key: 'google', name: 'Gemini' },
-  { key: 'mistral', name: 'Mistral' },
   { key: 'claude', name: 'Claude' }
 ];

src/frontend/screens/ChatUI/index.tsx

@@ -13,6 +13,7 @@ import {
   useCreateChat,
   useGetChat,
   useGetResponse,
+  useLLMs,
   useUpdateChat
 } from 'src/frontend/hooks';
 import { styles } from './style';
@@ -31,6 +32,7 @@ export function ChatUI() {
   const getResponse = useGetResponse(); // LLM firebase function
   const { updateChat } = useUpdateChat(activeChatId); // update chat in firestore
   const { createChat } = useCreateChat();
+  const { activeLLMs } = useLLMs(activeChatId || 'default');
   // Flag to wait for LLM answer when a new chat is created
   const [waitingForAnswerOnNewChat, setWaitingForAnswerOnNewChat] = useState<{
     waiting: boolean;
@@ -126,11 +128,15 @@ export function ChatUI() {
 
   async function getLLMAnswer(queryText: string) {
     // default response
-    let response: { [key: string]: string } = { 'gpt-4': 'Could not retrieve answer from LLM' };
+
+    let response: { [key: string]: string } = initResponses();
 
     // get Response from LLM
     try {
-      const { data } = await getResponse({ query: queryText, llms: ['gpt-4'] });
+      //get active LLMS in correct format
+      const llms = extractActiveLLMNames();
+      console.log('getResponse for llms:', llms);
+      const { data } = await getResponse({ query: queryText, llms: llms });
       response = data as { [key: string]: string };
     } catch (error) {
       console.error(error as FirebaseError);
@@ -146,6 +152,35 @@ export function ChatUI() {
     }
   }
 
+  // ------------- Helper functions -------------
+  function initResponses() {
+    const response: { [key: string]: string } = Object.keys(activeLLMs).reduce(
+      (acc, key) => {
+        if (activeLLMs[key].active) {
+          acc[key] = 'Could not retrieve answer from LLM';
+        }
+        return acc;
+      },
+      {} as { [key: string]: string }
+    );
+    if (Object.keys(response).length === 0)
+      response['gpt-4'] = 'Could not retrieve answer from LLM';
+    return response;
+  }
+
+  // returns currently selected LLMs and 'gpt-4' if no LLM is selected
+  function extractActiveLLMNames() {
+    const llms: string[] = [];
+    for (const llm of Object.keys(activeLLMs)) {
+      if (activeLLMs[llm].active) {
+        llms.push(llm);
+      }
+    }
+
+    if (llms.length === 0) llms.push('gpt-4');
+    return llms;
+  }
+
   function extractTitle(queryText: string) {
     //TODO: maybe use a more sophisticated method to extract the title later
     const arr = queryText.split(' ');
@@ -155,6 +190,7 @@ export function ChatUI() {
     }
     return title;
   }
+  // ------------- Render -------------
 
   return (
     <View style={styles.container}>