feat: follow up messages functionality

Author: tfomkin

i18n/mobile/chat/en.json

@@ -153,6 +153,9 @@
       "TEXT_LISTENING": "Listening...",
       "TEXT_THINKING": "Thinking...",
       "TEXT_TALKING": "Talking..."
+    },
+    "MESSAGE_FOLLOW_UPS": {
+      "TEXT_FOLLOW_UP": "Follow up"
     }
   }
 }

libs/mobile/chat/features/chat/src/lib/component.tsx

@@ -166,6 +166,18 @@ export function Chat({ chatId, selectedModelId, isNewChat, resetToChatsList }: C
       resetAttachments();
     })();
 
+  const handleFollowUpPress = (text: string): void => {
+    if (!selectedModelId) {
+      return ToastService.showError(translate('TEXT_MODEL_NOT_SELECTED'));
+    }
+
+    cancelEditing();
+    cancelSuggesting();
+    setActiveInputMode(null);
+
+    sendMessage(text, selectedModelId);
+  };
+
   useEffect(() => {
     InteractionManager.runAfterInteractions(() => {
       delay(() => {
@@ -204,6 +216,8 @@ export function Chat({ chatId, selectedModelId, isNewChat, resetToChatsList }: C
             onLayout={handleChatMessagesListLayout}
             isMessagesListLoaded={isMessagesListLoaded}
             editingMessageId={editingMessageId}
+            onFollowUpPress={handleFollowUpPress}
+            isResponseGenerating={isResponseGenerating}
           />
         </React.Suspense>
       )}

libs/mobile/chat/features/chat/src/lib/components/ai-message/component.tsx

@@ -1,4 +1,5 @@
 import { Fragment, ReactElement, useMemo } from 'react';
+import { FollowUpsList } from '@open-webui-react-native/mobile/chat/features/follow-ups-list';
 import { MessageVersionControls } from '@open-webui-react-native/mobile/chat/features/message-version-controls';
 import { SourceCitationModal } from '@open-webui-react-native/mobile/chat/features/source-citation-modal';
 import { prepareTextWithCitations, useCitations } from '@open-webui-react-native/mobile/chat/features/use-citations';
@@ -22,6 +23,9 @@ import { SkeletonMessage } from '../skeleton-message';
 interface ChatAiMessageProps {
   message: Message;
   onEditPress: () => void;
+  isLast: boolean;
+  isResponseGenerating: boolean;
+  onFollowUpPress: (text: string) => void;
   isEditing?: boolean;
   onPreviousSibling?: UseSiblingMessagesReturn['showPreviousSibling'];
   onNextSibling?: UseSiblingMessagesReturn['showNextSibling'];
@@ -34,6 +38,9 @@ export function ChatAiMessage({
   onNextSibling,
   onPreviousSibling,
   getSiblingsInfo,
+  isLast,
+  isResponseGenerating,
+  onFollowUpPress,
 }: ChatAiMessageProps): ReactElement {
   const {
     content: text,
@@ -43,6 +50,7 @@ export function ChatAiMessage({
     done: isMessageDone,
     socketStatusData,
     timestamp,
+    followUps,
   } = message;
 
   const apiUrl = getApiUrl();
@@ -64,6 +72,7 @@ export function ChatAiMessage({
     useImagePreview();
 
   const textWithCitations = prepareTextWithCitations(text, citations);
+  const hasFollowUps = Array.isArray(followUps) && followUps.length > 0;
 
   return (
     <View>
@@ -119,6 +128,12 @@ export function ChatAiMessage({
       ) : (
         <SkeletonMessage />
       )}
+      {!isResponseGenerating && isLast && hasFollowUps && (
+        <FollowUpsList
+          followUps={followUps}
+          onPress={onFollowUpPress}
+          containerClassName='mt-12' />
+      )}
     </View>
   );
 }

libs/mobile/chat/features/chat/src/lib/components/messages-list/component.tsx

@@ -34,6 +34,8 @@ interface ChatMessagesListProps {
   onTryAgain: (messageId: string) => void;
   onAddDetails: (messageId: string) => void;
   onMoreConcise: (messageId: string) => void;
+  onFollowUpPress: (text: string) => void;
+  isResponseGenerating: boolean;
   history?: ChatHistory;
   messages?: Array<Message>;
   editingMessageId?: string;
@@ -52,6 +54,8 @@ export default function ChatMessagesList({
   onAddDetails,
   onMoreConcise,
   editingMessageId,
+  onFollowUpPress,
+  isResponseGenerating,
 }: ChatMessagesListProps): ReactElement {
   const listRef = useRef<FlashList<Message>>(null);
   const isScrollToBottomAvailable = useRef(false);
@@ -163,6 +167,10 @@ export default function ChatMessagesList({
     completeChat(completePayload);
   };
 
+  const handleFollowUpPress = (text: string): void => {
+    onFollowUpPress(text);
+  };
+
   const renderItem = useCallback(
     ({ item, index }: { item: Message; index: number }) => {
       const message = history?.messages[item.id];
@@ -191,6 +199,9 @@ export default function ChatMessagesList({
             onPreviousSibling={showPreviousSibling}
             onNextSibling={showNextSibling}
             getSiblingsInfo={getSiblingsInfo}
+            isLast={isLast}
+            onFollowUpPress={handleFollowUpPress}
+            isResponseGenerating={isResponseGenerating}
           />
         </AiMessageActions>
       ) : (

libs/mobile/chat/features/follow-ups-list/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

libs/mobile/chat/features/follow-ups-list/README.md

@@ -0,0 +1,7 @@
+# mobile/chat/features/follow-ups-list
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test mobile/chat/features/follow-ups-list` to execute the unit tests via [Jest](https://jestjs.io).

libs/mobile/chat/features/follow-ups-list/eslint.config.cjs

@@ -0,0 +1,12 @@
+const nx = require('@nx/eslint-plugin');
+const baseConfig = require('../../../../../eslint.config.cjs');
+
+module.exports = [
+  ...baseConfig,
+  ...nx.configs['flat/react'],
+  {
+    files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'],
+    // Override or add rules here
+    rules: {},
+  },
+];

libs/mobile/chat/features/follow-ups-list/project.json

@@ -0,0 +1,9 @@
+{
+  "name": "mobile/chat/features/follow-ups-list",
+  "$schema": "../../../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/mobile/chat/features/follow-ups-list/src",
+  "projectType": "library",
+  "tags": ["app:mobile", "scope:chat", "type:features"],
+  "// targets": "to see all targets run: nx show project mobile/chat/features/follow-ups-list --web",
+  "targets": {}
+}

libs/mobile/chat/features/follow-ups-list/src/index.ts

@@ -0,0 +1 @@
+export * from './lib';

libs/mobile/chat/features/follow-ups-list/src/lib/component.tsx

@@ -0,0 +1,31 @@
+import { useTranslation } from '@ronas-it/react-native-common-modules/i18n';
+import { ReactElement } from 'react';
+import { cn } from '@open-webui-react-native/mobile/shared/ui/styles';
+import { AppPressable, AppText, View } from '@open-webui-react-native/mobile/shared/ui/ui-kit';
+
+interface FollowUpsListProps {
+  onPress: (text: string) => void;
+  followUps?: Array<string>;
+  containerClassName?: string;
+}
+
+export function FollowUpsList({ onPress, followUps, containerClassName }: FollowUpsListProps): ReactElement | null {
+  const translate = useTranslation('CHAT.MESSAGE_FOLLOW_UPS');
+
+  if (!followUps?.length) return null;
+
+  return (
+    <View className={cn(containerClassName)}>
+      <AppText className='text-sm py-8'>{translate('TEXT_FOLLOW_UP')}</AppText>
+
+      {followUps.map((followUp) => (
+        <AppPressable
+          key={followUp}
+          onPress={() => onPress(followUp)}
+          className='active:opacity-1 active:bg-background-secondary py-8 rounded-lg'>
+          <AppText className='text-text-secondary text-sm'>{followUp}</AppText>
+        </AppPressable>
+      ))}
+    </View>
+  );
+}