Style fixes

Author: crspeller

app/products/agents/actions/remote/bots.ts

@@ -5,36 +5,9 @@ import NetworkManager from '@managers/network_manager';
 import {getFullErrorMessage} from '@utils/errors';
 import {logError} from '@utils/log';
 
-export enum ChannelAccessLevel {
-    All = 0,
-    Allow = 1,
-    Block = 2,
-}
-
-export enum UserAccessLevel {
-    All = 0,
-    Allow = 1,
-    Block = 2,
-}
+import type {LLMBot} from '@agents/types';
 
-export interface LLMBot {
-    id: string;
-    displayName: string;
-    username: string;
-    lastIconUpdate: number;
-    dmChannelID: string;
-    channelAccessLevel: ChannelAccessLevel;
-    channelIDs: string[];
-    userAccessLevel: UserAccessLevel;
-    userIDs: string[];
-    teamIDs: string[];
-}
-
-interface AIBotsResponse {
-    bots: LLMBot[];
-    searchEnabled: boolean;
-    allowUnsafeLinks: boolean;
-}
+export type {LLMBot};
 
 /**
  * Fetch all AI bots from the server
@@ -46,17 +19,15 @@ export async function fetchAIBots(
 ): Promise<{bots?: LLMBot[]; searchEnabled?: boolean; allowUnsafeLinks?: boolean; error?: unknown}> {
     try {
         const client = NetworkManager.getClient(serverUrl);
-        const url = '/plugins/mattermost-ai/ai_bots';
-
-        const response = await client.doFetch(url, {method: 'GET'}) as unknown as AIBotsResponse;
+        const response = await client.getAIBots();
 
         return {
             bots: response.bots,
             searchEnabled: response.searchEnabled,
             allowUnsafeLinks: response.allowUnsafeLinks,
         };
     } catch (error) {
-        logError('Failed to fetch AI bots', error);
+        logError('[fetchAIBots] Failed to fetch AI bots', error);
         return {error: getFullErrorMessage(error)};
     }
 }
@@ -81,7 +52,7 @@ export async function getBotDirectChannel(
 
         return {channelId: channel.id};
     } catch (error) {
-        logError('Failed to get bot direct channel', error);
+        logError('[getBotDirectChannel] Failed to get bot direct channel', error);
         return {error: getFullErrorMessage(error)};
     }
 }

app/products/agents/actions/remote/threads.ts

@@ -17,13 +17,11 @@ export async function fetchAIThreads(
 ): Promise<{threads?: AIThread[]; error?: unknown}> {
     try {
         const client = NetworkManager.getClient(serverUrl);
-        const url = '/plugins/mattermost-ai/ai_threads';
+        const threads = await client.getAIThreads();
 
-        const response = await client.doFetch(url, {method: 'GET'}) as unknown as AIThread[];
-
-        return {threads: response};
+        return {threads};
     } catch (error) {
-        logError('Failed to fetch AI threads', error);
+        logError('[fetchAIThreads] Failed to fetch AI threads', error);
         return {error: getFullErrorMessage(error)};
     }
 }

app/products/agents/client/rest.ts

@@ -1,8 +1,12 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
+import type {AIBotsResponse, AIThread} from '@agents/types';
+
 export interface ClientAgentsMix {
     getAgentsRoute: () => string;
+    getAIBots: () => Promise<AIBotsResponse>;
+    getAIThreads: () => Promise<AIThread[]>;
     stopGeneration: (postId: string) => Promise<void>;
     regenerateResponse: (postId: string) => Promise<void>;
     submitToolApproval: (postId: string, acceptedToolIds: string[]) => Promise<void>;
@@ -13,6 +17,20 @@ const ClientAgents = (superclass: any) => class extends superclass {
         return '/plugins/mattermost-ai';
     };
 
+    getAIBots = async () => {
+        return this.doFetch(
+            `${this.getAgentsRoute()}/ai_bots`,
+            {method: 'get'},
+        );
+    };
+
+    getAIThreads = async () => {
+        return this.doFetch(
+            `${this.getAgentsRoute()}/ai_threads`,
+            {method: 'get'},
+        );
+    };
+
     stopGeneration = async (postId: string) => {
         return this.doFetch(
             `${this.getAgentsRoute()}/post/${postId}/stop`,

app/products/agents/screens/agent_chat/agent_chat.tsx

@@ -3,18 +3,20 @@
 
 import {fetchAIBots, getBotDirectChannel, type LLMBot} from '@agents/actions/remote/bots';
 import {AgentsIntro} from '@agents/components/illustrations';
+import BotSelectorItem from '@agents/screens/agent_chat/bot_selector_item';
 import {goToAgentThreadsList} from '@agents/screens/navigation';
 import React, {useCallback, useEffect, useState} from 'react';
 import {useIntl} from 'react-intl';
-import {type LayoutChangeEvent, View, Text, TouchableOpacity, ActivityIndicator} from 'react-native';
+import {type LayoutChangeEvent, View, Text, TouchableOpacity} from 'react-native';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 
 import {buildAbsoluteUrl} from '@actions/remote/file';
 import {fetchAndSwitchToThread} from '@actions/remote/thread';
 import {buildProfileImageUrl} from '@actions/remote/user';
 import CompassIcon from '@components/compass_icon';
+import Loading from '@components/loading';
 import PostDraft from '@components/post_draft';
-import SlideUpPanelItem, {ITEM_HEIGHT} from '@components/slide_up_panel_item';
+import {ITEM_HEIGHT} from '@components/slide_up_panel_item';
 import {Screens} from '@constants';
 import {ExtraKeyboardProvider} from '@context/extra_keyboard';
 import {useServerUrl} from '@context/server';
@@ -231,15 +233,13 @@ const AgentChat = ({
                         );
 
                         return (
-                            <SlideUpPanelItem
+                            <BotSelectorItem
                                 key={bot.id}
-                                leftIcon={{uri: avatarUrl}}
-                                leftImageStyles={{borderRadius: 12}}
-                                onPress={() => handleBotSelect(bot)}
-                                testID={`agent_chat.bot_selector.bot_item.${bot.id}`}
-                                text={bot.displayName}
-                                rightIcon={selectedBot?.id === bot.id ? 'check' : undefined}
-                                rightIconStyles={{color: theme.linkColor}}
+                                bot={bot}
+                                avatarUrl={avatarUrl}
+                                isSelected={selectedBot?.id === bot.id}
+                                onSelect={handleBotSelect}
+                                theme={theme}
                             />
                         );
                     })}
@@ -271,12 +271,11 @@ const AgentChat = ({
     if (loading) {
         return (
             <View style={[styles.container, {paddingTop: insets.top}]}>
-                <View style={styles.loadingContainer}>
-                    <ActivityIndicator
-                        size='large'
-                        color={theme.buttonBg}
-                    />
-                </View>
+                <Loading
+                    containerStyle={styles.loadingContainer}
+                    size='large'
+                    color={theme.buttonBg}
+                />
             </View>
         );
     }

app/products/agents/screens/agent_chat/bot_selector_item.tsx

@@ -0,0 +1,36 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React, {useCallback} from 'react';
+
+import SlideUpPanelItem from '@components/slide_up_panel_item';
+
+import type {LLMBot} from '@agents/types';
+
+type Props = {
+    bot: LLMBot;
+    avatarUrl?: string;
+    isSelected: boolean;
+    onSelect: (bot: LLMBot) => void;
+    theme: Theme;
+};
+
+const BotSelectorItem = ({bot, avatarUrl, isSelected, onSelect, theme}: Props) => {
+    const handlePress = useCallback(() => {
+        onSelect(bot);
+    }, [bot, onSelect]);
+
+    return (
+        <SlideUpPanelItem
+            leftIcon={avatarUrl ? {uri: avatarUrl} : 'account-outline'}
+            leftImageStyles={{borderRadius: 12}}
+            onPress={handlePress}
+            testID={`agent_chat.bot_selector.bot_item.${bot.id}`}
+            text={bot.displayName}
+            rightIcon={isSelected ? 'check' : undefined}
+            rightIconStyles={{color: theme.linkColor}}
+        />
+    );
+};
+
+export default BotSelectorItem;