PRD-2078: Stop response generation

.github/workflows/validate.yml

@@ -0,0 +1,33 @@
+name: Validate
+
+on:
+  pull_request:
+    branches: [main, master, development]
+  push:
+    branches: [main, master, development]
+
+jobs:
+  validate:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "22"
+          cache: "npm"
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run linting
+        run: npm run lint --if-present
+
+      - name: Run tests
+        run: npm test --if-present
+
+      - name: Run build
+        run: npm run build --if-present

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

@@ -173,8 +173,9 @@ export function Chat({ chatId, selectedModelId, isNewChat, resetToChatsList }: C
             attachedImages={attachedImages}
             onImageUploaded={handleImageUploaded}
             onDeleteImagePress={handleDeleteImage}
-            chatId={chatId}
             modelId={selectedModelId}
+            isResponseGenerating={isResponseGenerating}
+            chat={chat}
           />
         )}
       </View>

libs/mobile/chat/features/form-chat-input/src/lib/component.tsx

@@ -13,7 +13,13 @@ import {
   useImagePreview,
 } from '@open-webui-react-native/mobile/shared/features/image-preview-modal';
 import { AppTextInput, AppInputProps, View, IconButton } from '@open-webui-react-native/mobile/shared/ui/ui-kit';
-import { appConfigurationApi, ChatGenerationOption } from '@open-webui-react-native/shared/data-access/api';
+import {
+  appConfigurationApi,
+  ChatGenerationOption,
+  ChatResponse,
+  tasksApi,
+  tasksService,
+} from '@open-webui-react-native/shared/data-access/api';
 import { AttachedImage, FileData, ImageData } from '@open-webui-react-native/shared/data-access/common';
 import { withOfflineGuard } from '@open-webui-react-native/shared/features/network';
 import { FeatureID, isFeatureEnabled } from '@open-webui-react-native/shared/utils/feature-flag';
@@ -31,11 +37,12 @@ interface FormChatInputProps<T extends FieldValues> extends AppInputProps {
   attachedImages: Observable<Array<ImageData>>;
   onImageUploaded: (image: ImageData) => void;
   onDeleteImagePress: (fileName: string) => void;
-  chatId?: string;
+  chat?: ChatResponse;
   modelId?: string;
   onChatCreated?: (id: string) => void;
   isLoading?: boolean;
   isSuggestionShown?: boolean;
+  isResponseGenerating?: boolean;
 }
 
 export interface FormChatInputSchema {
@@ -52,16 +59,18 @@ export function FormChatInput<T extends FieldValues>({
   attachedImages,
   onImageUploaded,
   onDeleteImagePress,
-  chatId,
+  chat,
   modelId,
   onChatCreated,
   isLoading,
   isSuggestionShown,
+  isResponseGenerating,
   ...restProps
 }: FormChatInputProps<T>): ReactElement {
   const translate = useTranslation('CHAT.FORM_CHAT_INPUT');
 
   const { data: config } = appConfigurationApi.useGetAppConfiguration();
+  const stopTaskMutation = tasksApi.useStopTask();
 
   const { field } = useController({ control, name });
 
@@ -88,7 +97,7 @@ export function FormChatInput<T extends FieldValues>({
       return ToastService.showError(translate('TEXT_MODEL_NOT_SELECTED'));
     }
     setIsMicrophonePreparing(true);
-    await openVoiceModeModal({ chatId, modelId });
+    await openVoiceModeModal({ chatId: chat?.id, modelId });
     setIsMicrophonePreparing(false);
   };
 
@@ -110,6 +119,20 @@ export function FormChatInput<T extends FieldValues>({
     field.onChange(text);
   };
 
+  const onStopGenerationPress = async (): Promise<void> => {
+    if (!chat) return;
+
+    const chatId = chat.id;
+    const lastMessageId = chat.chat.history.currentId;
+
+    const tasksData = await tasksService.getChatTasks(chatId);
+    const taskId = tasksData?.tasksIds[0];
+
+    if (taskId) {
+      stopTaskMutation.mutate({ taskId, chatId, lastMessageId });
+    }
+  };
+
   return (
     <View>
       {isDictateMode ? (
@@ -144,6 +167,8 @@ export function FormChatInput<T extends FieldValues>({
               isSubmitDisabled={!isFeatureEnabled(FeatureID.VOICE_MODE) && isInputEmpty}
               onVoiceModePress={onVoiceModePress}
               isVoiceModeAvailable={isFeatureEnabled(FeatureID.VOICE_MODE) && isInputEmpty}
+              onStopGenerationPress={onStopGenerationPress}
+              isResponseGenerating={isResponseGenerating}
               isLoading={isLoading || isMicrophonePreparing}>
               <View className='flex-row flex-1 justify-between'>
                 <View className='gap-16 flex-row '>

libs/mobile/chat/features/form-chat-input/src/lib/components/chat-input-bottom-row/component.tsx

@@ -4,6 +4,8 @@ import { IconButton, View } from '@open-webui-react-native/mobile/shared/ui/ui-k
 export interface ChatInputBottomRowProps extends PropsWithChildren {
   onSubmit: () => void;
   onVoiceModePress: () => void;
+  onStopGenerationPress: () => void;
+  isResponseGenerating?: boolean;
   isVoiceModeAvailable?: boolean;
   isSubmitDisabled?: boolean;
   isLoading?: boolean;
@@ -16,18 +18,27 @@ export function ChatInputBottomRow({
   isLoading,
   children,
   isSubmitDisabled,
+  isResponseGenerating,
+  onStopGenerationPress,
 }: ChatInputBottomRowProps): ReactElement {
   return (
     <View className='flex-row justify-between items-center mt-12'>
       {children}
-      <IconButton
-        disabled={isSubmitDisabled}
-        onPress={isVoiceModeAvailable ? onVoiceModePress : onSubmit}
-        iconName={isVoiceModeAvailable ? 'headphones' : 'arrowUp'}
-        className='rounded-full self-end bg-text-primary p-4'
-        iconProps={{ className: 'color-background-primary' }}
-        isLoading={isLoading}
-      />
+      {isResponseGenerating ? (
+        <IconButton
+          iconName='stopCircle'
+          className='p-0'
+          onPress={onStopGenerationPress} />
+      ) : (
+        <IconButton
+          disabled={isSubmitDisabled}
+          onPress={isVoiceModeAvailable ? onVoiceModePress : onSubmit}
+          iconName={isVoiceModeAvailable ? 'headphones' : 'arrowUp'}
+          className='rounded-full self-end bg-text-primary p-4'
+          iconProps={{ className: 'color-background-primary' }}
+          isLoading={isLoading}
+        />
+      )}
     </View>
   );
 }

libs/mobile/shared/ui/ui-kit/src/assets/icons/index.ts

@@ -39,6 +39,7 @@ import pin from './pin.svg';
 import plusInCircle from './plus-in-circle.svg';
 import plus from './plus.svg';
 import search from './search.svg';
+import stopCircle from './stop-circle.svg';
 import strokeLeft from './stroke-left.svg';
 import tick from './tick.svg';
 import trashCan from './trash-can.svg';
@@ -94,4 +95,5 @@ export const Icons = {
   closeSM,
   strokeLeft,
   tick,
+  stopCircle,
 };

libs/shared/data-access/api/src/lib/index.ts

@@ -7,3 +7,4 @@ export * from './files';
 export * from './audio';
 export * from './folders';
 export * from './knowledge';
+export * from './tasks';

libs/shared/data-access/api/src/lib/tasks/api.ts

@@ -0,0 +1,40 @@
+import { useMutation, UseMutationOptions, UseMutationResult } from '@tanstack/react-query';
+import { AxiosError } from 'axios';
+import { ApiErrorData } from '@open-webui-react-native/shared/data-access/api-client';
+import { Chat, patchChatQueryData } from '../chats';
+import { StopTaskResponse } from './models';
+import { tasksService } from './service';
+
+type StopTaskArgs = {
+  taskId: string;
+  chatId: string;
+  lastMessageId: string;
+};
+
+function useStopTask(
+  props?: UseMutationOptions<StopTaskResponse, AxiosError<ApiErrorData>, StopTaskArgs>,
+): UseMutationResult<StopTaskResponse, AxiosError<ApiErrorData>, StopTaskArgs> {
+  return useMutation({
+    mutationFn: ({ taskId }) => tasksService.stopTask(taskId),
+
+    onSuccess: (_, { chatId, lastMessageId }) => {
+      patchChatQueryData(chatId, {
+        chat: {
+          history: {
+            messages: {
+              [lastMessageId]: {
+                done: true,
+              },
+            },
+          },
+        } as Chat,
+      });
+    },
+
+    ...props,
+  });
+}
+
+export const tasksApi = {
+  useStopTask,
+};

libs/shared/data-access/api/src/lib/tasks/config.ts

@@ -0,0 +1,3 @@
+export const tasksApiConfig = {
+  route: 'tasks',
+};

libs/shared/data-access/api/src/lib/tasks/index.ts

@@ -0,0 +1,3 @@
+export * from './api';
+export * from './service';
+export * from './config';

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

@@ -0,0 +1,10 @@
+import { Expose } from 'class-transformer';
+
+export class ChatTasksResponse {
+  @Expose({ name: 'task_ids' })
+  public tasksIds: Array<string>;
+
+  constructor(data: Partial<ChatTasksResponse>) {
+    Object.assign(this, data);
+  }
+}

libs/shared/data-access/api/src/lib/tasks/models/index.ts

@@ -0,0 +1,2 @@
+export * from './chat-tasks-response';
+export * from './stop-task-response';

libs/shared/data-access/api/src/lib/tasks/models/stop-task-response.ts

@@ -0,0 +1,13 @@
+import { Expose } from 'class-transformer';
+
+export class StopTaskResponse {
+  @Expose()
+  public message: string;
+
+  @Expose()
+  public status: boolean;
+
+  constructor(data: Partial<StopTaskResponse>) {
+    Object.assign(this, data);
+  }
+}

libs/shared/data-access/api/src/lib/tasks/service.ts

@@ -0,0 +1,18 @@
+import { plainToInstance } from 'class-transformer';
+import { getApiService } from '@open-webui-react-native/shared/data-access/api-client';
+import { tasksApiConfig } from './config';
+import { ChatTasksResponse, StopTaskResponse } from './models';
+
+class TasksService {
+  public async getChatTasks(chatId: string): Promise<ChatTasksResponse> {
+    const response = await getApiService().get<ChatTasksResponse>(`${tasksApiConfig.route}/chat/${chatId}`);
+
+    return plainToInstance(ChatTasksResponse, response, { excludeExtraneousValues: true });
+  }
+
+  public async stopTask(taskId: string): Promise<StopTaskResponse> {
+    return await getApiService().post<StopTaskResponse>(`${tasksApiConfig.route}/stop/${taskId}`);
+  }
+}
+
+export const tasksService = new TasksService();