feat: providers clear logs #921

webapp/components/views/Providers/Provider.tsx

@@ -14,13 +14,14 @@
 
 'use client';
 
-import { Bug, Settings2 } from 'lucide-react';
+import { Bug, Settings2, Trash } from 'lucide-react';
 import useTranslation from '@/hooks/useTranslation';
 import useBackend from '@/hooks/useBackendContext';
 import useProviderState from '@/hooks/useProviderState';
 import { ProviderType, ServerStatus } from '@/types';
 import ContentView from '@/components/common/ContentView';
 import CopyToClipBoard from '@/components/common/CopyToClipBoard';
+import { Button } from '@/components/ui/button';
 import Toolbar from './Toolbar';
 import Server from './server';
 import OpenAI from './openai';
@@ -36,9 +37,15 @@ type ProviderViewProps = {
 function ProviderView({ selectedId: selectedProviderId }: ProviderViewProps) {
   const { t } = useTranslation();
 
-  const { provider, hasParametersChanged, onParametersSave, onParameterChange, onProviderToggle } =
-    useProviderState(selectedProviderId);
-  const { server } = useBackend();
+  const {
+    provider,
+    hasParametersChanged,
+    onParametersSave,
+    onParameterChange,
+    onProviderToggle,
+    updateProvider,
+  } = useProviderState(selectedProviderId);
+  const { server, updateBackendServer } = useBackend();
 
   const buildLogs = () => {
     let logs = '';
@@ -51,6 +58,20 @@ function ProviderView({ selectedId: selectedProviderId }: ProviderViewProps) {
     return logs;
   };
 
+  const handleClearLogs = () => {
+    if (provider?.type === ProviderType.opla) {
+      updateBackendServer({ stderr: [], stdout: [] });
+    } else {
+      updateProvider({ errors: [] });
+    }
+  };
+
+  let emptyLogs = true;
+  if (provider?.type === ProviderType.opla) {
+    emptyLogs = (server.stderr?.length ?? 0) + (server.stdout?.length ?? 0) === 0;
+  } else {
+    emptyLogs = (provider?.errors?.length ?? 0) === 0;
+  }
   return (
     <Tabs defaultValue="settings" className="h-full">
       <ContentView
@@ -114,16 +135,26 @@ function ProviderView({ selectedId: selectedProviderId }: ProviderViewProps) {
               </ScrollArea>
             )}
           </TabsContent>
-          <TabsContent value="debug" className="h-full w-full p-4">
-            <div className="flex w-full flex-row-reverse">
+          <TabsContent value="debug" className="h-full w-full">
+            <div className="flex w-full flex-row-reverse items-center px-4">
+              <Button
+                variant="ghost"
+                size="sm"
+                aria-label={t('Clear logs')}
+                title={t('Clear logs')}
+                disabled={emptyLogs}
+                onClick={handleClearLogs}
+              >
+                <Trash className="h-4 w-4 text-muted-foreground" strokeWidth={1.5} />
+              </Button>
               <CopyToClipBoard
                 title={t('Copy logs to clipboard')}
                 message={t('Logs copied to clipboard')}
                 text={buildLogs()}
               />
             </div>
             {provider && (
-              <ScrollArea>
+              <ScrollArea className="h-full  p-4">
                 {provider.type === ProviderType.opla && (
                   <>
                     {server.status === ServerStatus.ERROR && (

webapp/hooks/useBackendContext.tsx

@@ -87,6 +87,7 @@ type Context = OplaContext & {
   disconnectBackend: () => Promise<void>;
   setSettings: (settings: Settings) => Promise<void>;
   updateBackendStore: () => Promise<void>;
+  updateBackendServer: (partials: Partial<OplaServer>) => Promise<void>;
   start: (params: ServerParameters | undefined) => Promise<BackendResult>;
   stop: () => Promise<BackendResult>;
   restart: (params: ServerParameters | undefined) => Promise<BackendResult>;
@@ -101,6 +102,7 @@ const defaultContext: Context = {
   disconnectBackend: async () => {},
   setSettings: async () => {},
   updateBackendStore: async () => {},
+  updateBackendServer: async () => {},
   start: async () => ({ status: 'error', error: 'not implemented' }),
   stop: async () => ({ status: 'error', error: 'not implemented' }),
   restart: async () => ({ status: 'error', error: 'not implemented' }),
@@ -160,6 +162,10 @@ function BackendProvider({ children }: { children: React.ReactNode }) {
     updateConfig(store);
   }, []);
 
+  const updateBackendServer = useCallback(async (partials: Partial<OplaServer>) => {
+    updateServer(partials);
+  }, []);
+
   const updateMessageContent = useCallback(
     async (
       message_or_id: Message | String,
@@ -503,6 +509,7 @@ function BackendProvider({ children }: { children: React.ReactNode }) {
       disconnectBackend,
       setSettings,
       updateBackendStore,
+      updateBackendServer,
       start,
       stop,
       restart,
@@ -524,6 +531,7 @@ function BackendProvider({ children }: { children: React.ReactNode }) {
       startBackend,
       stop,
       updateBackendStore,
+      updateBackendServer,
     ],
   );
 

webapp/hooks/useProviderState.ts

@@ -62,14 +62,28 @@ const useProviderState = (providerId?: string, newProvider?: Provider) => {
     setUpdatedProvider(mergedProvider);
   };
 
-  const handleParametersSave = (partialProvider: Partial<Provider> = {}) => {
+  const update = (partialProvider: Partial<Provider> = {}): Provider | undefined => {
     if (!provider) {
+      return undefined;
+    }
+    const mergedProvider = deepMerge<Provider>(provider, partialProvider);
+    const updatedProviders = updateProvider(mergedProvider, providers);
+    setProviders(updatedProviders);
+    logger.info('update Provider', mergedProvider, updatedProviders);
+    return mergedProvider;
+  };
+
+  const handleParametersSave = (partialProvider: Partial<Provider> = {}) => {
+    const mergedProvider = update(partialProvider);
+    if (!mergedProvider) {
+      return;
+    }
+    /* if (!provider) {
       return;
     }
     const mergedProvider = deepMerge<Provider>(provider, partialProvider);
     const newProviders = updateProvider(mergedProvider, providers);
-    logger.info('handleParametersSave', mergedProvider, newProviders);
-    setProviders(newProviders);
+    setProviders(newProviders); */
     setUpdatedProvider({ id: providerId });
     if (mergedProvider.type === ProviderType.opla) {
       const providerServer = mergedProvider.metadata?.server;
@@ -108,6 +122,7 @@ const useProviderState = (providerId?: string, newProvider?: Provider) => {
     onParameterChange: handleParameterChange,
     onParametersSave: handleParametersSave,
     onProviderToggle: handleProviderToggle,
+    updateProvider: update,
   };
 };