Feature: Docker Containers API

src/__fixtures__/integrations.ts

@@ -53,6 +53,8 @@ export const INTEGRATIONS_RESPONSE: Integration = {
       },
     ],
     docker: {
+      filter_image: "postgres",
+      filter_label: "",
       new_container_default: {
         image: "postgres:13",
         environment: {

src/app/middleware.ts

@@ -13,6 +13,7 @@ import {
 } from "../features/Chat/Thread";
 import { statisticsApi } from "../services/refact/statistics";
 import { integrationsApi } from "../services/refact/integrations";
+import { dockerApi } from "../services/refact/docker";
 import { capsApi, isCapsErrorResponse } from "../services/refact/caps";
 import { promptsApi } from "../services/refact/prompts";
 import { toolsApi } from "../services/refact/tools";
@@ -108,6 +109,52 @@ startListening({
       listenerApi.dispatch(setError(errorMessage));
     }
 
+    if (
+      dockerApi.endpoints.getAllDockerContainers.matchRejected(action) &&
+      !action.meta.condition
+    ) {
+      // getting first 2 lines of error message to show to user
+      const errorMessage = isDetailMessage(action.payload?.data)
+        ? action.payload.data.detail
+        : `fetching docker containers.`;
+      listenerApi.dispatch(setError(errorMessage));
+    }
+
+    if (
+      dockerApi.endpoints.getDockerContainersByImage.matchRejected(action) &&
+      !action.meta.condition
+    ) {
+      // getting first 2 lines of error message to show to user
+      const errorMessage = isDetailMessage(action.payload?.data)
+        ? action.payload.data.detail
+        : `fetching docker containers.`;
+      listenerApi.dispatch(setError(errorMessage));
+    }
+
+    if (
+      dockerApi.endpoints.getDockerContainersByLabel.matchRejected(action) &&
+      !action.meta.condition
+    ) {
+      // getting first 2 lines of error message to show to user
+      const errorMessage = isDetailMessage(action.payload?.data)
+        ? action.payload.data.detail
+        : `fetching docker containers.`;
+      listenerApi.dispatch(setError(errorMessage));
+    }
+
+    if (
+      dockerApi.endpoints.executeActionForDockerContainer.matchRejected(
+        action,
+      ) &&
+      !action.meta.condition
+    ) {
+      // getting first 2 lines of error message to show to user
+      const errorMessage = isDetailMessage(action.payload?.data)
+        ? action.payload.data.detail
+        : `fetching docker containers.`;
+      listenerApi.dispatch(setError(errorMessage));
+    }
+
     if (
       pathApi.endpoints.getFullPath.matchRejected(action) &&
       !action.meta.condition

src/app/store.ts

@@ -20,6 +20,7 @@ import {
   pathApi,
   pingApi,
   integrationsApi,
+  dockerApi,
 } from "../services/refact";
 import { smallCloudApi } from "../services/smallcloud";
 import { reducer as fimReducer } from "../features/FIM/reducer";
@@ -82,6 +83,7 @@ const rootReducer = combineSlices(
   informationSlice,
   pagesSlice,
   integrationsApi,
+  dockerApi,
   confirmationSlice,
   attachedImagesSlice,
   userSurveySlice,
@@ -148,6 +150,7 @@ export function setUpStore(preloadedState?: Partial<RootState>) {
             smallCloudApi.middleware,
             pathApi.middleware,
             integrationsApi.middleware,
+            dockerApi.middleware,
           )
           .prepend(historyMiddleware.middleware)
           // .prepend(errorMiddleware.middleware)

src/components/ChatContent/ToolsContent.tsx

@@ -31,7 +31,7 @@ const Result: React.FC<ResultProps> = ({
 }) => {
   const lines = children.split("\n");
   return (
-    <Reveal defaultOpen={lines.length < 9}>
+    <Reveal defaultOpen={lines.length < 9} isRevealingCode>
       <ResultMarkdown
         className={styles.tool_result}
         isInsideScrollArea={isInsideScrollArea}
@@ -167,44 +167,14 @@ export const SingleModelToolContent: React.FC<{
     <Container>
       <Collapsible.Root open={open} onOpenChange={setOpen}>
         <Collapsible.Trigger asChild>
-          {/**TODO: reuse this */}
-          <Flex gap="2" align="end">
-            <Flex gap="1" align="start" direction="column">
-              <Text weight="light" size="1">
-                🔨{" "}
-                {toolUsageAmount.map(
-                  ({ functionName, amountOfCalls }, index) => (
-                    <span key={functionName}>
-                      <ToolUsageDisplay
-                        functionName={functionName}
-                        amountOfCalls={amountOfCalls}
-                      />
-                      {index === toolUsageAmount.length - 1 ? "" : ", "}
-                    </span>
-                  ),
-                )}
-              </Text>
-              {hiddenFiles > 0 && (
-                <Text weight="light" size="1" ml="4">
-                  {`🔎 <${hiddenFiles} files hidden>`}
-                </Text>
-              )}
-              {shownAttachedFiles.map((file, index) => (
-                <Text weight="light" size="1" key={index} ml="4">
-                  🔎 {file}
-                </Text>
-              ))}
-              {subchat && (
-                <Flex ml="4">
-                  <Spinner />
-                  <Text weight="light" size="1" ml="4px">
-                    {subchat}
-                  </Text>
-                </Flex>
-              )}
-            </Flex>
-            <Chevron open={open} />
-          </Flex>
+          <ToolUsageSummary
+            toolUsageAmount={toolUsageAmount}
+            hiddenFiles={hiddenFiles}
+            shownAttachedFiles={shownAttachedFiles}
+            subchat={subchat}
+            open={open}
+            onClick={() => setOpen((prev) => !prev)}
+          />
         </Collapsible.Trigger>
         <Collapsible.Content>
           {toolCalls.map((toolCall) => {
@@ -331,27 +301,12 @@ const MultiModalToolContent: React.FC<{
   return (
     <Container>
       <Collapsible.Root open={open} onOpenChange={setOpen}>
-        <Collapsible.Trigger asChild>
-          {/**TODO: duplicated */}
-          <Flex gap="2" align="end">
-            <Flex gap="1" align="start" direction="column">
-              <Text weight="light" size="1">
-                🔨{" "}
-                {toolUsageAmount.map(
-                  ({ functionName, amountOfCalls }, index) => (
-                    <span key={`${functionName}-${index}`}>
-                      <ToolUsageDisplay
-                        functionName={functionName}
-                        amountOfCalls={amountOfCalls}
-                      />
-                      {index === toolUsageAmount.length - 1 ? "" : ", "}
-                    </span>
-                  ),
-                )}
-              </Text>
-            </Flex>
-            <Chevron open={open} />
-          </Flex>
+        <Collapsible.Trigger>
+          <ToolUsageSummary
+            toolUsageAmount={toolUsageAmount}
+            open={open}
+            onClick={() => setOpen((prev) => !prev)}
+          />
         </Collapsible.Trigger>
         <Collapsible.Content>
           {/** TODO: tool call name and text result */}
@@ -430,3 +385,61 @@ const MultiModalToolContent: React.FC<{
     </Container>
   );
 };
+
+const ToolUsageSummary: React.FC<{
+  toolUsageAmount: ToolUsage[];
+  hiddenFiles?: number;
+  shownAttachedFiles?: (string | undefined)[];
+  subchat?: string;
+  open: boolean;
+  onClick?: () => void;
+}> = ({
+  toolUsageAmount,
+  hiddenFiles,
+  shownAttachedFiles,
+  subchat,
+  open,
+  onClick,
+}) => {
+  return (
+    <Flex gap="2" align="end" onClick={onClick}>
+      <Flex gap="1" align="start" direction="column">
+        <Text weight="light" size="1">
+          🔨{" "}
+          {toolUsageAmount.map(({ functionName, amountOfCalls }, index) => (
+            <span key={functionName}>
+              <ToolUsageDisplay
+                functionName={functionName}
+                amountOfCalls={amountOfCalls}
+              />
+              {index === toolUsageAmount.length - 1 ? "" : ", "}
+            </span>
+          ))}
+        </Text>
+        {hiddenFiles && hiddenFiles > 0 && (
+          <Text weight="light" size="1" ml="4">
+            {`🔎 <${hiddenFiles} files hidden>`}
+          </Text>
+        )}
+        {shownAttachedFiles?.map((file, index) => {
+          if (!file) return null;
+
+          return (
+            <Text weight="light" size="1" key={index} ml="4">
+              🔎 {file}
+            </Text>
+          );
+        })}
+        {subchat && (
+          <Flex ml="4">
+            <Spinner />
+            <Text weight="light" size="1" ml="4px">
+              {subchat}
+            </Text>
+          </Flex>
+        )}
+      </Flex>
+      <Chevron open={open} />
+    </Flex>
+  );
+};

src/components/Collapsible/Chevron.tsx

@@ -6,12 +6,24 @@ import styles from "./Chevron.module.css";
 export type ChevronProps = {
   open: boolean;
   className?: string;
+  isUpDownChevron?: boolean;
 };
 
-export const Chevron: React.FC<ChevronProps> = ({ open, className }) => {
+export const Chevron: React.FC<ChevronProps> = ({
+  open,
+  className,
+  isUpDownChevron = false,
+}) => {
   return (
     <ChevronDownIcon
-      className={classNames(open ? styles.down : styles.right, className)}
+      className={classNames(
+        {
+          [styles.down]: open,
+          [styles.right]: !open && !isUpDownChevron,
+          [styles.up]: !open && isUpDownChevron,
+        },
+        className,
+      )}
       style={{ minWidth: 16, minHeight: 16 }}
     />
   );