Merge pull request #359 from l3vels/fix/logs-ui

Fix/logs UI

apps/ui/src/modals/AIChatModal/components/ChatMessageList/components/HumanMessage.tsx

@@ -13,8 +13,7 @@ import { copyMessageText } from 'modals/AIChatModal/utils/copyMessageText'
 import TypographyPrimary from 'components/Typography/Primary'
 import TypographyTertiary from 'components/Typography/Tertiary'
 import AiMessageMarkdown from './AiMessageMarkdown'
-import { RUN_LOGS_MODAL_NAME } from 'modals/RunLogsModal'
-import { useModal } from 'hooks'
+
 import AudioPlayer from 'components/AudioPlayer'
 
 type HumanMessageProps = {
@@ -43,10 +42,6 @@ const HumanMessage = ({
     messageText,
   })
 
-  const { openModal } = useModal()
-
-  const handleLogsClick = () => openModal({ name: RUN_LOGS_MODAL_NAME, data: { runId } })
-
   return (
     <>
       <StyledMessageWrapper>
@@ -72,7 +67,6 @@ const HumanMessage = ({
 
             <StyledMessageActionsWrapper className='actions'>
               <MessageActions
-                onLogsClick={runId ? handleLogsClick : undefined}
                 onReplyClick={onReplyClick}
                 onCopyClick={() => copyMessageText(messageText)}
               />

apps/ui/src/modals/AIChatModal/components/ChatV2.tsx

@@ -361,22 +361,24 @@ const ChatV2 = () => {
       <StyledChatFooter>
         <StyledChatInputWrapper>
           <StyledButtonGroup>
-            <StyledSuggestionsContainer>
-              {chatSuggestions.map((chatSuggestion: string, index: number) => {
-                const { shortText: shortSuggestion } = textSlicer(chatSuggestion, 110)
-
-                return (
-                  <StyledOption
-                    key={index}
-                    onClick={() => {
-                      handlePickedSuggestion(chatSuggestion)
-                    }}
-                  >
-                    {shortSuggestion}
-                  </StyledOption>
-                )
-              })}
-            </StyledSuggestionsContainer>
+            {!canStopGenerating && (
+              <StyledSuggestionsContainer>
+                {chatSuggestions.map((chatSuggestion: string, index: number) => {
+                  const { shortText: shortSuggestion } = textSlicer(chatSuggestion, 110)
+
+                  return (
+                    <StyledOption
+                      key={index}
+                      onClick={() => {
+                        handlePickedSuggestion(chatSuggestion)
+                      }}
+                    >
+                      {shortSuggestion}
+                    </StyledOption>
+                  )
+                })}
+              </StyledSuggestionsContainer>
+            )}
 
             {canStopGenerating && (
               <StyledStopGeneratingButton>
@@ -631,6 +633,9 @@ const StyledSuggestionsContainer = styled.div`
 
 const StyledStopGeneratingButton = styled.div`
   margin-right: 94px;
+
+  position: absolute;
+  backdrop-filter: blur(100px);
 `
 
 const StyledFileWrapper = styled.div`

apps/ui/src/modals/RunLogsModal/RunLogs/RunLogMessages/HistoryCollapse.tsx

@@ -0,0 +1,80 @@
+import styled, { css } from 'styled-components'
+import { StyledTitle } from './RunLogMessages'
+import { useState, useEffect, useRef } from 'react'
+import {
+  StyledNavigationChevronDown,
+  StyledNavigationChevronUp,
+} from 'pages/Agents/AgentForm/components/ShowAdvancedButton'
+
+const HistoryCollapse = ({ historyMessages }: { historyMessages: any }) => {
+  const [show, setShow] = useState(false)
+
+  const historyContainerRef = useRef(null as any)
+
+  useEffect(() => {
+    if (show) {
+      historyContainerRef.current.scrollIntoView({ behavior: 'smooth', block: 'end' })
+    }
+  }, [show])
+
+  return (
+    <StyledHistoryContainer show={show} onClick={() => setShow(!show)} ref={historyContainerRef}>
+      <StyledHeaderWrapper onClick={() => setShow(!show)}>
+        <StyledTitle>History</StyledTitle>
+
+        {show ? <StyledNavigationChevronUp /> : <StyledNavigationChevronDown />}
+      </StyledHeaderWrapper>
+
+      {historyMessages.map(({ content }: { content: string }, index: number) => {
+        return (
+          <>
+            {content && (
+              <StyledCodeContent>
+                {index + 1}. {content}
+              </StyledCodeContent>
+            )}
+          </>
+        )
+      })}
+    </StyledHistoryContainer>
+  )
+}
+
+export default HistoryCollapse
+
+//todo colors from theme
+const StyledHistoryContainer = styled.div<{ show: boolean }>`
+  padding: 16px;
+  background-color: #fff;
+  border-radius: 10px;
+
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  max-height: 55px;
+  overflow: hidden;
+
+  ${props =>
+    props.show &&
+    css`
+      max-height: fit-content;
+    `}
+`
+
+const StyledCodeContent = styled.pre`
+  margin: 0;
+  padding: 0;
+  font-family: monospace;
+  white-space: pre-wrap;
+  font-size: 12px;
+  color: #000;
+`
+const StyledHeaderWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+
+  cursor: pointer;
+`

apps/ui/src/modals/RunLogsModal/RunLogs/RunLogMessages/RunLogMessages.tsx

@@ -1,5 +1,6 @@
 import styled from 'styled-components'
 import { RunLog } from 'types'
+import HistoryCollapse from './HistoryCollapse'
 
 type RunLogMessagesProps = {
   log: RunLog
@@ -8,10 +9,17 @@ type RunLogMessagesProps = {
 const RunLogMessages = ({ log }: RunLogMessagesProps) => {
   const { messages } = log
 
+  const filteredMessages = messages?.filter((message: any) => message.is_chat_history !== true)
+  const historyMessages = messages?.filter((message: any) => message.is_chat_history === true)
+
   return (
     <StyledCards>
-      {messages.map(({ name, content, is_chat_history }, index: number) => {
+      <HistoryCollapse historyMessages={historyMessages} />
+
+      {filteredMessages.map(({ name, content, is_chat_history }, index: number) => {
         // TODO: use is_chat_history to render chat history in collapse
+        if (content?.length === 0) return <div />
+
         return (
           <StyledCard key={index}>
             <StyledTitle>{name}</StyledTitle>
@@ -37,7 +45,7 @@ const StyledCards = styled.div`
   width: 100%;
   gap: 20px;
 `
-
+//todo colors from theme
 const StyledCard = styled.div`
   border-radius: 10px;
   padding: 20px;
@@ -46,7 +54,7 @@ const StyledCard = styled.div`
   color: #000;
 `
 
-const StyledTitle = styled.h2`
+export const StyledTitle = styled.h2`
   margin: 0;
   padding: 0;
   font-size: 18px;

apps/ui/src/modals/RunLogsModal/RunLogs/RunLogs.tsx

@@ -1,7 +1,7 @@
 import styled from 'styled-components'
 import { useRunLogsService } from 'services/run'
 import Loader from '@l3-lib/ui-core/dist/Loader'
-import { StyledTab, StyledTabListSpan } from 'styles/tabStyles.css'
+import { StyledTab } from 'styles/tabStyles.css'
 import TabPanel from '@l3-lib/ui-core/dist/TabPanel'
 import TabPanels from '@l3-lib/ui-core/dist/TabPanels'
 import TabsContext from '@l3-lib/ui-core/dist/TabsContext'
@@ -34,23 +34,25 @@ const RunLogs = ({ runId }: RunLogsProps) => {
         <StyledFormTabList size='small' activeTabId={activeTab}>
           {data.map(({ name }, index) => (
             <StyledTab key={index} onClick={() => handleTabClick(index)}>
-              <StyledTabListSpan>
+              <StyledSpan>
                 {index + 1}. {name}
-              </StyledTabListSpan>
+              </StyledSpan>
             </StyledTab>
           ))}
         </StyledFormTabList>
       </StyledFormTabsWrapper>
 
-      <TabsContext activeTabId={activeTab}>
-        <TabPanels noAnimation>
-          {data.map((log, index) => (
-            <TabPanel key={index}>
-              <RunLogMessages log={log} />
-            </TabPanel>
-          ))}
-        </TabPanels>
-      </TabsContext>
+      <StyledTabContextWrapper>
+        <TabsContext activeTabId={activeTab}>
+          <TabPanels noAnimation>
+            {data.map((log, index) => (
+              <TabPanel key={index}>
+                <RunLogMessages log={log} />
+              </TabPanel>
+            ))}
+          </TabPanels>
+        </TabsContext>
+      </StyledTabContextWrapper>
     </StyledWrapper>
   )
 }
@@ -75,3 +77,12 @@ const StyledLoaderWrapper = styled.div`
   margin-bottom: 20px;
   margin-left: 5px;
 `
+const StyledTabContextWrapper = styled.div`
+  /* overflow: hidden; */
+  max-height: calc(100vh - 120px);
+  margin-right: 10px;
+`
+const StyledSpan = styled.span`
+  color: ${({ theme }) => theme.body.textColorPrimary};
+  width: 150px;
+`

apps/ui/src/pages/Agents/AgentForm/components/ShowAdvancedButton.tsx

@@ -30,12 +30,12 @@ const StyledAdvancedButton = styled.div`
   gap: 5px;
 `
 
-const StyledNavigationChevronUp = styled(NavigationChevronUp)`
+export const StyledNavigationChevronUp = styled(NavigationChevronUp)`
   path {
     color: ${({ theme }) => theme.body.iconColor};
   }
 `
-const StyledNavigationChevronDown = styled(NavigationChevronDown)`
+export const StyledNavigationChevronDown = styled(NavigationChevronDown)`
   path {
     color: ${({ theme }) => theme.body.iconColor};
   }