Project summary (#220)

* ui(chat links): add link_tool tip to title.

* ui(chat links): add loading state.

* chore(links fixtures): update link_tool tip property.

* ui: remove green save button.

* add pointer for buttons and other clickable elements

* add web.css to storybook

---------

Co-authored-by: Nick Frolov <nikolai.frolov@gmail.com>

.storybook/preview.tsx

@@ -1,5 +1,7 @@
 import type { Preview } from "@storybook/react";
 import "@radix-ui/themes/styles.css";
+import "../src/lib/render/web.css";
+
 import { initialize, mswLoader } from "msw-storybook-addon";
 
 initialize();

src/__fixtures__/chat_links_response.ts

@@ -6,10 +6,19 @@ export const STUB_LINKS_FOR_CHAT_RESPONSE: LinksForChatResponse = {
       text: "Save and return",
       action: "patch-all",
       goto: "SETTINGS:/path/to/config/file.yaml",
+      link_tooltip: "",
+    },
+    {
+      text: "Can you fix it?",
+      action: "follow-up",
+      link_tooltip: "a nice tool tip message",
+    },
+    { text: 'git commit -m "message"', action: "commit", link_tooltip: "" },
+    { text: "Save and return", goto: "SETTINGS:postgres", link_tooltip: "" },
+    {
+      text: "Investigate Project",
+      action: "summarize-project",
+      link_tooltip: "",
     },
-    { text: "Can you fix it?", action: "follow-up" },
-    { text: 'git commit -m "message"', action: "commit" },
-    { text: "Save and return", goto: "SETTINGS:postgres" },
-    { text: "Investigate Project", action: "summarize-project" },
   ],
 };

src/components/ChatContent/ChatContent.tsx

@@ -1,8 +1,6 @@
-import React, { useCallback, useRef, useMemo } from "react";
+import React, { useCallback, useRef } from "react";
 import {
   ChatMessages,
-  diffApi,
-  isAssistantMessage,
   isChatContextFileMessage,
   isDiffMessage,
   isToolMessage,
@@ -122,20 +120,6 @@ export const ChatContent: React.FC<ChatContentProps> = ({
   const thread = useAppSelector(selectThread);
   const isConfig = !!thread.integration;
   const isWaiting = useAppSelector(selectIsWaiting);
-  const [applyAll, applyAllResult] =
-    diffApi.useApplyAllPatchesInMessagesMutation();
-
-  const hasPins = useMemo(
-    () =>
-      messages.some((message) => {
-        if (!isAssistantMessage(message)) return false;
-        if (!message.content) return false;
-        return message.content
-          .split("\n")
-          .some((line) => line.startsWith("📍"));
-      }),
-    [messages],
-  );
 
   const {
     handleScroll,
@@ -170,13 +154,6 @@ export const ChatContent: React.FC<ChatContentProps> = ({
     thread.integration?.path,
   ]);
 
-  const handleSaveAndReturn = useCallback(async () => {
-    const result = await applyAll(messages);
-    if (!result.error) {
-      handleReturnToConfigurationClick();
-    }
-  }, [applyAll, handleReturnToConfigurationClick, messages]);
-
   return (
     <ScrollArea
       ref={scrollRef}
@@ -221,20 +198,6 @@ export const ChatContent: React.FC<ChatContentProps> = ({
             Return
           </Button>
         )}
-
-        {isConfig && hasPins && (
-          <Button
-            ml="auto"
-            color="green"
-            title="Save and return"
-            disabled={isStreaming || applyAllResult.isLoading}
-            onClick={() => {
-              void handleSaveAndReturn();
-            }}
-          >
-            Save
-          </Button>
-        )}
       </Flex>
     </ScrollArea>
   );

src/components/ChatContent/ContextFiles.tsx

@@ -147,7 +147,7 @@ export const ContextFiles: React.FC<{
     <Container>
       <Collapsible.Root open={open} onOpenChange={setOpen}>
         <Collapsible.Trigger asChild>
-          <Flex gap="2" align="start" py="2">
+          <Flex gap="2" align="start" py="2" style={{ cursor: "pointer" }}>
             <Text weight="light" size="1">
               📎 {fileNames.join(", ")}
             </Text>

src/components/ChatContent/ToolsContent.tsx

@@ -406,7 +406,12 @@ const ToolUsageSummary: React.FC<{
 }) => {
   return (
     <Flex gap="2" align="end" onClick={onClick}>
-      <Flex gap="1" align="start" direction="column">
+      <Flex
+        gap="1"
+        align="start"
+        direction="column"
+        style={{ cursor: "pointer" }}
+      >
         <Text weight="light" size="1">
           🔨{" "}
           {toolUsageAmount.map(({ functionName, amountOfCalls }, index) => (

src/components/ChatLinks/ChatLinks.tsx

@@ -20,6 +20,7 @@ import {
   setIntegrationData,
 } from "../../features/Chat";
 import { popBackTo } from "../../features/Pages/pagesSlice";
+import { Spinner } from "@radix-ui/themes";
 import { TruncateRight } from "../Text/TruncateRight";
 
 function maybeConcatActionAndGoToStrings(link: ChatLink): string | undefined {
@@ -186,34 +187,46 @@ export const ChatLinks: React.FC = () => {
 
   // TODO: waiting, errors, maybe add a title
 
-  if (
-    !linksResult.data ||
-    isStreaming ||
-    isWaiting ||
-    unCalledTools ||
-    linksResult.data.links.length === 0
-  ) {
+  if (isStreaming || isWaiting || unCalledTools) {
     return null;
   }
 
   const Wrapper = messages.length === 0 ? Box : Container;
-  return (
-    <Wrapper position="relative" mt="6">
-      <Flex gap="2" wrap="wrap" direction="column" align="start">
-        {linksResult.data.links.map((link, index) => {
-          const key = `chat-link-${index}`;
-          return <ChatLinkButton key={key} link={link} onClick={handleClick} />;
-        })}
-      </Flex>
-    </Wrapper>
-  );
+
+  if (linksResult.isLoading) {
+    return (
+      <Wrapper position="relative" mt="6">
+        <Button variant="surface" disabled>
+          <Spinner loading />
+          Checking for actions
+        </Button>
+      </Wrapper>
+    );
+  }
+
+  if (linksResult.data && linksResult.data.links.length > 0) {
+    return (
+      <Wrapper position="relative" mt="6">
+        <Flex gap="2" wrap="wrap" direction="column" align="start">
+          {linksResult.data.links.map((link, index) => {
+            const key = `chat-link-${index}`;
+            return (
+              <ChatLinkButton key={key} link={link} onClick={handleClick} />
+            );
+          })}
+        </Flex>
+      </Wrapper>
+    );
+  }
+
+  return null;
 };
 
 const ChatLinkButton: React.FC<{
   link: ChatLink;
   onClick: (link: ChatLink) => void;
 }> = ({ link, onClick }) => {
-  const title = maybeConcatActionAndGoToStrings(link);
+  const title = link.link_tooltip || maybeConcatActionAndGoToStrings(link);
   const handleClick = React.useCallback(() => onClick(link), [link, onClick]);
 
   return (

src/components/Toolbar/Toolbar.tsx

@@ -145,6 +145,7 @@ export const Toolbar = ({ activeTab }: ToolbarProps) => {
             active={isDashboardTab(activeTab)}
             ref={(x) => refs.setBack(x)}
             onClick={() => goToTab({ type: "dashboard" })}
+            style={{ cursor: "pointer" }}
           >
             {windowWidth < 400 || shouldCollapse ? <HomeIcon /> : "Home"}
           </TabNav.Link>
@@ -158,7 +159,7 @@ export const Toolbar = ({ activeTab }: ToolbarProps) => {
                 active={isActive}
                 key={chat.id}
                 onClick={() => goToTab({ type: "chat", id: chat.id })}
-                style={{ minWidth: 0, maxWidth: "140px" }}
+                style={{ minWidth: 0, maxWidth: "140px", cursor: "pointer" }}
                 ref={isActive ? setFocus : undefined}
                 title={chat.title}
               >

src/lib/render/web.css

@@ -7,3 +7,9 @@ body {
   width: 260px;
   flex-shrink: 0;
 }
+
+.radix-themes {
+  --cursor-button: pointer;
+  --cursor-menu-item: pointer;
+  --cursor-link: pointer;
+}

src/services/refact/links.ts

@@ -11,11 +11,20 @@ import { CHAT_LINKS_URL } from "./consts";
 // link_action
 // link_tooltip
 export type ChatLink =
-  | { text: string; goto: string; action: string }
-  | { text: string; goto: string /* action: undefined */ }
-  | { text: string; /* goto: undefined; */ action: string }
-  | { text: string; goto: string; action: "go-to" }
-  | { text: string; action: "summarize-project"; current_config_file?: string };
+  | { text: string; goto: string; action: string; link_tooltip: string }
+  | { text: string; goto: string; link_tooltip: string /* action: undefined */ }
+  | {
+      text: string;
+      /* goto: undefined; */ action: string;
+      link_tooltip: string;
+    }
+  | { text: string; goto: string; action: "go-to"; link_tooltip: string }
+  | {
+      text: string;
+      action: "summarize-project";
+      current_config_file?: string;
+      link_tooltip: string;
+    };
 
 function isChatLink(json: unknown): json is ChatLink {
   if (!json || typeof json !== "object") return false;