feat: add tool response bottom sheet

Author: veliseev93

i18n/mobile/chat/en.json

@@ -156,6 +156,13 @@
     },
     "MESSAGE_FOLLOW_UPS": {
       "TEXT_FOLLOW_UP": "Follow up"
+    },
+    "AI_MESSAGE": {
+      "TOOL_OUTPUT_SHEET": {
+        "TEXT_VIEW_RESULT_PREFIX": "View result from",
+        "TEXT_INPUT": "Input",
+        "TEXT_OUTPUT": "Output"
+      }
     }
   }
 }

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

@@ -20,6 +20,7 @@ import { formatDateTime } from '@open-webui-react-native/shared/utils/date';
 import { parseResponseMessageContent } from '../../utils';
 import { ChatImagesGroup } from '../images';
 import { SkeletonMessage } from '../skeleton-message';
+import { ToolOutputBottomSheet } from '../tool-output-bottom-sheet';
 
 interface ChatAiMessageProps {
   message: Message;
@@ -87,6 +88,18 @@ export function ChatAiMessage({
       {socketStatusData && <AppText className='mt-4 text-text-secondary'>{socketStatusData.description}</AppText>}
       {text ? (
         <Fragment>
+          {toolsData.length > 0 && (
+            <View className='mt-8 gap-8'>
+              {toolsData.map((tool, index) => (
+                <ToolOutputBottomSheet
+                  key={tool.id ?? `${tool.toolName}-${index}`}
+                  toolName={tool.toolName}
+                  input={tool.input}
+                  output={tool.output}
+                />
+              ))}
+            </View>
+          )}
           <ChatImagesGroup
             images={attachedImages}
             onImagePress={handleImagePress}

libs/mobile/chat/features/chat/src/lib/components/tool-output-bottom-sheet/component.tsx

@@ -0,0 +1,71 @@
+import { BottomSheetModal } from '@gorhom/bottom-sheet';
+import { useTranslation } from '@ronas-it/react-native-common-modules/i18n';
+import { ReactElement, ReactNode, useRef } from 'react';
+import {
+  AppBottomSheet,
+  AppBottomSheetKeyboardAwareScrollView,
+  AppPressable,
+  AppSafeAreaView,
+  AppText,
+  Icon,
+  SheetHeader,
+  View,
+} from '@open-webui-react-native/mobile/shared/ui/ui-kit';
+
+export interface ToolOutputBottomSheetProps {
+  toolName: string;
+  input: string;
+  output: string;
+}
+
+export function ToolOutputBottomSheet({ toolName, input, output }: ToolOutputBottomSheetProps): ReactElement {
+  const translate = useTranslation('CHAT.AI_MESSAGE.TOOL_OUTPUT_SHEET');
+  const sheetRef = useRef<BottomSheetModal>(null);
+
+  const renderTrigger = ({ onPress }: { onPress: () => void }): ReactNode => (
+    <AppPressable
+      onPress={onPress}
+      className='flex-row items-center gap-8 rounded-xl bg-background-secondary px-12 py-10 active:opacity-70'>
+      <Icon name='tick' className='size-20 shrink-0 color-emerald-500' />
+      <View className='min-w-0 flex-1 flex-row flex-wrap items-center'>
+        <AppText className='text-sm-sm sm:text-sm text-text-secondary'>{translate('TEXT_VIEW_RESULT_PREFIX')} </AppText>
+        <AppText className='text-sm-sm sm:text-sm font-mono font-semibold text-text-primary'>{toolName}</AppText>
+      </View>
+      <Icon name='chevronDown' className='size-16 shrink-0 color-text-secondary' />
+    </AppPressable>
+  );
+
+  return (
+    <AppBottomSheet
+      ref={sheetRef}
+      isModal={true}
+      isScrollable={true}
+      snapPoints={['100%']}
+      className='px-0'
+      renderTrigger={renderTrigger}
+      content={
+        <View className='flex-1 bg-background-primary'>
+          <SheetHeader title={toolName} onGoBack={() => sheetRef.current?.close()} />
+          <AppBottomSheetKeyboardAwareScrollView
+            className='flex-1'
+            contentContainerClassName='px-content-offset pb-safe pt-8 android:pb-24'>
+            <AppSafeAreaView edges={['bottom']}>
+              <AppText className='mb-8 text-xs font-medium uppercase tracking-wide text-text-secondary'>
+                {translate('TEXT_INPUT')}
+              </AppText>
+              <AppText selectable className='mb-16 text-sm-sm sm:text-sm font-mono text-text-primary'>
+                {input}
+              </AppText>
+              <AppText className='mb-8 text-xs font-medium uppercase tracking-wide text-text-secondary'>
+                {translate('TEXT_OUTPUT')}
+              </AppText>
+              <AppText selectable className='text-sm-sm sm:text-sm font-mono text-text-primary'>
+                {output}
+              </AppText>
+            </AppSafeAreaView>
+          </AppBottomSheetKeyboardAwareScrollView>
+        </View>
+      }
+    />
+  );
+}

libs/mobile/chat/features/chat/src/lib/components/tool-output-bottom-sheet/index.ts

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