make infra research threads open by default in progress view (#3047)

Author: jsladerman

assets/design-system/package.json

@@ -78,7 +78,6 @@
     "react-stately": "3.42.0",
     "react-use-measure": "2.1.1",
     "rehype-raw": "7.0.0",
-    "remark-gfm": "4.0.0",
     "resize-observer-polyfill": "1.5.1",
     "type-fest": "4.8.3",
     "use-immer": "0.9.0",

assets/package.json

@@ -102,6 +102,7 @@
     "react-virtualized-auto-sizer": "1.0.26",
     "react-window": "1.8.11",
     "react-window-reversed": "1.4.1",
+    "remark-gfm": "4.0.0",
     "semver": "7.5.4",
     "streamsaver": "2.0.6",
     "styled-components": "6.1.15",

assets/src/components/ai/chatbot/ChatMessage.tsx

@@ -245,7 +245,7 @@ export function PrLinkoutCard({ url, title }: { url: string; title: string }) {
         window.open(url, '_blank')
       }}
       css={{
-        padding: `${theme.spacing.small}px ${theme.spacing.large}px`,
+        padding: `${theme.spacing.xsmall}px ${theme.spacing.small}px`,
         width: '100%',
       }}
     >
@@ -258,8 +258,8 @@ export function PrLinkoutCard({ url, title }: { url: string; title: string }) {
           align="center"
         >
           <AppIcon
-            icon={<GitHubLogoIcon size={32} />}
-            size="xsmall"
+            icon={<GitHubLogoIcon size={24} />}
+            size="xxsmall"
           />
           <Body2BoldP $color="text-light">{title}</Body2BoldP>
         </Flex>

assets/src/components/ai/chatbot/multithread/ChatbotMultiThreadViewer.tsx

@@ -14,7 +14,7 @@ const DOT_GAP = 16
 const STEPPER_LEFT_OFFSET = 16
 const THREAD_GAP: SemanticSpacingKey = 'small'
 // trigger height with compact padding (padding + content + padding)
-const TRIGGER_HEIGHT = 36
+const TRIGGER_HEIGHT = 46
 
 export function ChatbotMultiThreadViewer({
   threads,
@@ -24,9 +24,13 @@ export function ChatbotMultiThreadViewer({
   isExpectingStream?: boolean
 }) {
   const { borders, borderRadiuses } = useTheme()
-
+  const threadIdList = threads.map((thread) => thread.id)
   return (
-    <WrapperAccordionSC type="multiple">
+    <WrapperAccordionSC
+      type="multiple"
+      key={threadIdList.join('-')} // force re-render when threads change
+      defaultValue={threadIdList}
+    >
       {threads.map((thread) => (
         <StepperAccordionItemSC
           key={thread.id}

assets/src/components/ai/chatbot/multithread/MultiThreadViewerMessage.tsx

@@ -1,29 +1,17 @@
+import { Code, getLastStringChild, Modal } from '@pluralsh/design-system'
+import { CaptionP } from 'components/utils/typography/Text'
+import { ChatFragment, ChatType } from 'generated/graphql'
 import { ReactElement, ReactNode, useState } from 'react'
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import styled from 'styled-components'
-import { Code, getLastStringChild, Modal } from '@pluralsh/design-system'
-import { ChatFragment, ChatType } from 'generated/graphql'
-import { CaptionP } from 'components/utils/typography/Text'
 import { ToolCallContent } from '../ToolCallContent'
 
 export function MultiThreadViewerMessage({
   message,
 }: {
   message: ChatFragment
 }) {
-  return (
-    <WrapperSC>
-      <MessageContent message={message} />
-    </WrapperSC>
-  )
-}
-
-function MessageContent({
-  message,
-}: {
-  message: ChatFragment
-}): ReactElement | null {
   switch (message.type) {
     case ChatType.Tool:
       return <ToolCallLabel message={message} />
@@ -143,10 +131,6 @@ function SimplifiedMarkdown({ text }: { text: string }) {
   )
 }
 
-const WrapperSC = styled.div(({ theme }) => ({
-  padding: `${theme.spacing.xxsmall}px 0`,
-}))
-
 const ClickableLabelSC = styled.button(({ theme }) => ({
   background: 'none',
   border: 'none',

assets/src/components/ai/chatbot/multithread/MultiThreadViewerThreadMessages.tsx

@@ -77,6 +77,9 @@ const WrapperSC = styled.div(({ theme }) => ({
   display: 'flex',
   flexDirection: 'column',
   gap: theme.spacing.small,
+  padding: theme.spacing.small,
+  wordBreak: 'break-word',
+  textWrap: 'pretty',
   color: theme.colors['text-long-form'],
   maxHeight: 320,
   overflow: 'auto',

assets/src/components/ai/infra-research/details/InfraResearch.tsx

@@ -29,7 +29,7 @@ import {
   useFixResearchDiagramMutation,
   useInfraResearchQuery,
 } from 'generated/graphql'
-import { capitalize, isEmpty, truncate } from 'lodash'
+import { capitalize, truncate } from 'lodash'
 import { ReactNode, useMemo, useState } from 'react'
 import { useMatch, useNavigate } from 'react-router-dom'
 import {
@@ -112,7 +112,7 @@ export function InfraResearch() {
   if (!(infraResearch || loading))
     return <EmptyState message="Infra research not found." />
 
-  const { status, analysis, diagram } = infraResearch ?? {}
+  const { status, analysis, diagram, threads } = infraResearch ?? {}
   const isRunning = status === InfraResearchStatus.Running
 
   const headerButtons =
@@ -169,8 +169,10 @@ export function InfraResearch() {
             {status && (
               <InfraResearchStatusChip
                 status={status}
-                clickable={!isEmpty(infraResearch?.threads)}
-                onClick={() => goToInfraResearch(id)}
+                {...((isRunning || (threads?.length ?? 0) > 1) && {
+                  clickable: true,
+                  onClick: () => goToInfraResearch(id),
+                })}
               />
             )}
             {!isChatbotOpen && headerButtons}

assets/src/components/ai/insights/InsightDisplay.tsx

@@ -74,7 +74,7 @@ export function InsightDisplay({
               <ContentHeaderSC css={{ paddingRight: 0 }}>
                 <Flex gap="small">
                   <SearchIcon />
-                  <span>{"insight's evidence"}</span>
+                  <span>evidence</span>
                 </Flex>
                 <IconFrame
                   clickable

assets/src/components/ai/insights/LogsEvidencePanel.tsx

@@ -93,7 +93,7 @@ export function BasicEvidenceLine({
       <IconFrame
         icon={icon}
         css={{ flexShrink: 0 }}
-        type="floating"
+        type="secondary"
       />
       <span css={{ ...TRUNCATE, flex: 1 }}>{content}</span>
       <IconFrame
@@ -123,7 +123,7 @@ const EvidenceLineSC = styled.div<{ $table: boolean }>(({ theme, $table }) => ({
   alignItems: 'center',
   gap: theme.spacing.small,
   cursor: 'pointer',
-  padding: `${theme.spacing.small}px ${theme.spacing.medium}px`,
+  padding: `${theme.spacing.xsmall}px ${theme.spacing.small}px`,
   borderBottom: $table ? theme.borders.input : 'none',
   '&:hover': {
     backgroundColor: $table ? theme.colors['fill-one-hover'] : 'transparent',

assets/src/components/utils/tableFetchHelpers.tsx

@@ -81,7 +81,7 @@ export function useFetchSlice<
   const [endCursors, setEndCursors] = useState<
     { index: number; cursor: string }[]
   >([])
-  const endCursor = queryResult?.data?.[queryKey]?.pageInfo.endCursor
+  const endCursor = queryResult?.data?.[queryKey]?.pageInfo?.endCursor
   const endCursorIndex = (queryResult?.data?.[queryKey]?.edges?.length ?? 0) - 1
   const prevEndCursor = usePrevious(endCursor)