Fix: disable AI message actions while generating

apps/mobile/app/(main)/chat/create.tsx

@@ -47,7 +47,7 @@ export default function CreateChatScreen(): ReactElement {
         header: <AppHeader title={translate('TEXT_NEW_CHAT')} onGoBack={handleBackPress} />,
       }}
       safeAreaProps={{ edges: [] }}
-      keyBoardAvoidingProps={{ enabled: !isBottomSheetInputFocused }}>
+      keyBoardAvoidingProps={{ enabled: !isBottomSheetInputFocused, bottomOffset: 60 }}>
       <NoConnectionBanner isVisible={isOfflineMode} />
       <CreateChat
         onChatCreated={handleChatCreated}

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

@@ -19,6 +19,7 @@ interface AiMessageActionsProps {
   onAddDetails: (messageId: string) => void;
   onMoreConcise: (messageId: string) => void;
   isLast: boolean;
+  isResponseGenerating: boolean;
 }
 
 //TODO Extend with more actions - https://www.figma.com/design/YPCZjyVlD86psDwUxvMVBc/OpenWebUI-Redesign-React-Native?node-id=27540-25291&t=kg2yUIDp3UQDStLf-0
@@ -31,6 +32,7 @@ export function AiMessageActions({
   onAddDetails,
   onMoreConcise,
   isLast,
+  isResponseGenerating,
   children,
 }: PropsWithChildren<AiMessageActionsProps>): ReactElement {
   const translate = useTranslation('CHAT.AI_MESSAGE_ACTIONS');
@@ -134,7 +136,10 @@ export function AiMessageActions({
 
   return (
     <View>
-      <MessageActionsSheetWrapper actions={actions} sheetRef={actionsSheetRef}>
+      <MessageActionsSheetWrapper
+        actions={actions}
+        sheetRef={actionsSheetRef}
+        isResponseGenerating={isResponseGenerating}>
         {children}
       </MessageActionsSheetWrapper>
       <ActionsBottomSheet

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

@@ -191,6 +191,7 @@ export default function ChatMessagesList({
           onTryAgain={onTryAgain}
           onAddDetails={onAddDetails}
           onMoreConcise={onMoreConcise}
+          isResponseGenerating={isResponseGenerating}
           isLast={isLast}>
           <ChatAiMessage
             message={message}

libs/mobile/chat/features/voice-mode-modal/src/lib/component.tsx

@@ -184,31 +184,33 @@ export function VoiceModeModal({ onChatCreated, ref, ...props }: VoiceModeModalP
       backdropTransitionOutTiming={1}
       animationOutTiming={1}
       animationIn='fadeIn'
-      style={{ overflow: 'hidden' }}
+      style={{ overflow: 'hidden', margin: 0 }}
       {...props}>
-      <AppSafeAreaView edges={['bottom']} className='flex-1'>
-        <View className='flex-1 items-center justify-center'>
-          {isThinking || isAiSpeaking ? <Loader /> : <SpeechListener metering={metering} />}
-        </View>
-        <View className='flex-row justify-between items-center p-12'>
-          <IconButton
-            iconName='camera'
-            onPress={showUnderConstruction}
-            className='w-40 h-40 bg-background-secondary rounded-full'
-          />
-          <AppText className='text-sm-sm sm:text-sm'>
-            {isAiSpeaking
-              ? translate('TEXT_TALKING')
-              : isThinking
-                ? translate('TEXT_THINKING')
-                : translate('TEXT_LISTENING')}
-          </AppText>
-          <IconButton
-            iconName='close'
-            onPress={close}
-            className='w-40 h-40 bg-background-secondary rounded-full' />
-        </View>
-      </AppSafeAreaView>
+      <View className='flex-1 bg-background-primary'>
+        <AppSafeAreaView edges={['bottom']} className='flex-1'>
+          <View className='flex-1 items-center justify-center'>
+            {isThinking || isAiSpeaking ? <Loader /> : <SpeechListener metering={metering} />}
+          </View>
+          <View className='flex-row justify-between items-center p-24'>
+            <IconButton
+              iconName='camera'
+              onPress={showUnderConstruction}
+              className='w-40 h-40 bg-background-secondary rounded-full'
+            />
+            <AppText className='text-sm-sm sm:text-sm'>
+              {isAiSpeaking
+                ? translate('TEXT_TALKING')
+                : isThinking
+                  ? translate('TEXT_THINKING')
+                  : translate('TEXT_LISTENING')}
+            </AppText>
+            <IconButton
+              iconName='close'
+              onPress={close}
+              className='w-40 h-40 bg-background-secondary rounded-full' />
+          </View>
+        </AppSafeAreaView>
+      </View>
       <AppToast />
     </Modal>
   );

libs/mobile/chat/ui/message-actions-wrapper/src/lib/component.tsx

@@ -9,19 +9,23 @@ import {
 import { useAnimateMessage } from './hooks/use-animate-message';
 
 interface MessageActionsSheetWrapperProps {
-  sheetRef?: React.RefObject<BottomSheetModal | null>;
   actions: Array<ActionSheetItemProps>;
+  isResponseGenerating?: boolean;
+  sheetRef?: React.RefObject<BottomSheetModal | null>;
 }
 
 export function MessageActionsSheetWrapper({
   sheetRef,
   actions,
+  isResponseGenerating,
   children,
 }: PropsWithChildren<MessageActionsSheetWrapperProps>): ReactElement {
   const actionsSheetRef = useRef<BottomSheetModal>(null);
   const { animatedStyle, startAnimation, stopAnimation } = useAnimateMessage();
 
   const handleLongPress = (): void => {
+    if (isResponseGenerating) return;
+
     startAnimation();
     actionsSheetRef.current?.present();
   };

libs/mobile/shared/features/markdown-view/src/lib/component.tsx

@@ -54,7 +54,7 @@ export function AppMarkdownView({
     ) => {
       return (
         <CodeBlock
-          fenceStyle={[inheritedStyles, markdownStyles.fence]}
+          fenceStyle={inheritedStyles}
           key={`code-block-${node.key}`}
           sourceInfo={node.sourceInfo}
           content={node.content}
@@ -302,9 +302,4 @@ const markdownStyles = createStyles({
     backgroundColor: colorScheme.get() === 'dark' ? colors.gray700 : colors.gray75,
     textDecorationLine: 'none',
   },
-  fence: {
-    backgroundColor: colorScheme.get() === 'dark' ? colors.gray700 : colors.gray75,
-    borderRadius: 8,
-    padding: 12,
-  },
 });

libs/mobile/shared/ui/code-block/src/lib/component.tsx

@@ -56,7 +56,9 @@ export function CodeBlock({
     return (
       <View className='gap-4'>
         {copyButton}
-        <AppText style={fenceStyle}>{formattedContent}</AppText>
+        <AppText style={fenceStyle} className={'bg-background-tertiary rounded-lg p-12'}>
+          {formattedContent}
+        </AppText>
       </View>
     );
   }

libs/mobile/shared/ui/keyboard-avoiding-view/src/lib/component.tsx

@@ -1,23 +1,24 @@
 import { ComponentType } from 'react';
 import { ScrollViewProps, StyleProp, ViewStyle } from 'react-native';
 import { KeyboardAwareScrollView } from 'react-native-keyboard-controller';
-import { commonStyle } from '@open-webui-react-native/mobile/shared/ui/styles';
 
 export type AppKeyboardAvoidingViewProps = Omit<ScrollViewProps, 'onFocus'> & {
   onFocus?: ((event: any) => void) | null;
   contentContainerStyleKeyboardShown?: StyleProp<ViewStyle>;
   enabled?: boolean;
+  bottomOffset?: number;
 };
 
 // TODO: Research how use nativewind here
 export const AppKeyboardAvoidingView: ComponentType<AppKeyboardAvoidingViewProps> = ({ children, ...props }) => {
-  const { onFocus, ...restProps } = props;
+  const { onFocus, contentContainerStyle, bottomOffset, ...restProps } = props;
 
   return (
     <KeyboardAwareScrollView
       keyboardShouldPersistTaps='handled'
       showsVerticalScrollIndicator={false}
-      contentContainerStyle={commonStyle.fullFlex}
+      contentContainerStyle={[{ flexGrow: 1 }, contentContainerStyle]}
+      bottomOffset={bottomOffset}
       onFocus={onFocus ?? undefined}
       {...restProps}>
       {children}

libs/mobile/shared/ui/screen-wrapper/src/lib/component.tsx

@@ -26,9 +26,12 @@ export function ScreenWrapper({
   keyBoardAvoidingProps,
 }: PropsWithChildren<ScreenWrapperProps>): ReactElement {
   const { header, ...restScreenProps } = screenProps || {};
+
   const content = isKeyboardAvoiding ? (
     <AppKeyboardAvoidingView {...keyBoardAvoidingProps}>
-      <AppScreen {...restScreenProps}>{children}</AppScreen>
+      <AppScreen scrollDisabled {...restScreenProps}>
+        {children}
+      </AppScreen>
     </AppKeyboardAvoidingView>
   ) : (
     <AppScreen {...restScreenProps}>{children}</AppScreen>

libs/shared/data-access/api/src/lib/knowledge/models/knowledge-response.ts

@@ -1,8 +1,9 @@
-import { Expose } from 'class-transformer';
+import { Expose, Type } from 'class-transformer';
 import { Knowledge } from './knowledge';
 
 export class KnowledgeResponse {
   @Expose()
+  @Type(() => Knowledge)
   public items: Array<Knowledge>;
 
   @Expose()