Merge pull request #176 from l3vels/fix/ui-fix

Fix: UI
l3vels · Sep 27, 2023 · f92a575 · f92a575
2 parents ff5d33b + a181d0f
commit f92a575
Show file tree

Hide file tree

Showing 8 changed files with 119 additions and 74 deletions.
diff --git a/apps/ui/src/components/CommandMenu/defaultData.tsx b/apps/ui/src/components/CommandMenu/defaultData.tsx
@@ -94,14 +94,14 @@ export const defaultData = (path_id?: any) => {
       ),
     },
 
-    {
-      id: uuidv4(),
-      name: 'General',
-      url: '/chat',
-      option: 'open-chat',
-      group_name: 'chat',
-      icon: <Home />,
-    },
+    // {
+    //   id: uuidv4(),
+    //   name: 'General',
+    //   url: '/chat',
+    //   option: 'open-chat',
+    //   group_name: 'chat',
+    //   icon: <Home />,
+    // },
 
     // {
     //   id: uuidv4(),

diff --git a/apps/ui/src/modals/AIChatModal/components/ChatMessageList/components/AiMessage.tsx b/apps/ui/src/modals/AIChatModal/components/ChatMessageList/components/AiMessage.tsx
@@ -18,6 +18,7 @@ import MessageActions from './MessageActions'
 import AiMessageMarkdown from './AiMessageMarkdown'
 import Typewriter from 'components/ChatTypingEffect/Typewriter'
 import AvatarGenerator from 'components/AvatarGenerator/AvatarGenerator'
+import { copyMessageText } from 'modals/AIChatModal/utils/copyMessageText'
 
 type AiMessageProps = {
   agentName?: string
@@ -76,7 +77,10 @@ const AiMessage = ({
             </StyledMessageInfo>
 
             <StyledMessageActionsWrapper className='actions'>
-              {onReplyClick && <MessageActions onReplyClick={onReplyClick} />}
+              <MessageActions
+                onReplyClick={onReplyClick}
+                onCopyClick={() => copyMessageText(messageText)}
+              />
             </StyledMessageActionsWrapper>
           </StyledMessageTop>
           <StyledMessageText secondary>

diff --git a/apps/ui/src/modals/AIChatModal/components/ChatMessageList/components/HumanMessage.tsx b/apps/ui/src/modals/AIChatModal/components/ChatMessageList/components/HumanMessage.tsx
@@ -9,6 +9,7 @@ import HumanMessageText from './HumanMessageText'
 import MessageActions from './MessageActions'
 import { useHumanMessage } from './useHumanMessage'
 import AvatarGenerator from 'components/AvatarGenerator/AvatarGenerator'
+import { copyMessageText } from 'modals/AIChatModal/utils/copyMessageText'
 
 type HumanMessageProps = {
   avatarImg: string
@@ -57,7 +58,10 @@ const HumanMessage = ({
             </StyledMessageInfo>
 
             <StyledMessageActionsWrapper className='actions'>
-              {onReplyClick && <MessageActions onReplyClick={onReplyClick} />}
+              <MessageActions
+                onReplyClick={onReplyClick}
+                onCopyClick={() => copyMessageText(messageText)}
+              />
             </StyledMessageActionsWrapper>
           </StyledMessageTop>
           <StyledMessageText>

diff --git a/apps/ui/src/modals/AIChatModal/components/ChatMessageList/components/MessageActions.tsx b/apps/ui/src/modals/AIChatModal/components/ChatMessageList/components/MessageActions.tsx
@@ -1,12 +1,42 @@
+import { useState } from 'react'
+
 import styled from 'styled-components'
+
 import ReplyIcon from '@l3-lib/ui-core/dist/icons/Replay'
+import Copy from '@l3-lib/ui-core/dist/icons/Copy'
+import Check from '@l3-lib/ui-core/dist/icons/Check'
+
+type MessageActionsProps = {
+  onReplyClick?: () => void
+  onCopyClick?: () => void
+}
+
+const MessageActions = ({ onReplyClick, onCopyClick }: MessageActionsProps) => {
+  const [copied, setCopied] = useState(false)
+
+  const handleCopyClick = () => {
+    if (onCopyClick) {
+      onCopyClick()
+      setCopied(true)
+
+      setTimeout(() => {
+        setCopied(false)
+      }, 2000)
+    }
+  }
 
-const MessageActions = ({ onReplyClick }: { onReplyClick: () => void }) => {
   return (
     <StyledWrapper>
-      <StyledReplyButton onClick={onReplyClick}>
-        <ReplyIcon />
-      </StyledReplyButton>
+      {onCopyClick && (
+        <StyledActionButton onClick={handleCopyClick}>
+          {copied ? <Check size={20} /> : <Copy size={20} />}
+        </StyledActionButton>
+      )}
+      {onReplyClick && (
+        <StyledActionButton onClick={onReplyClick}>
+          <ReplyIcon />
+        </StyledActionButton>
+      )}
     </StyledWrapper>
   )
 }
@@ -19,7 +49,7 @@ const StyledWrapper = styled.div`
   gap: 5px;
   padding: 0 10px;
 `
-const StyledReplyButton = styled.div`
+const StyledActionButton = styled.div`
   opacity: 0.5;
   :hover {
     opacity: 1;

diff --git a/apps/ui/src/modals/AIChatModal/utils/copyMessageText.ts b/apps/ui/src/modals/AIChatModal/utils/copyMessageText.ts
@@ -0,0 +1,9 @@
+export const copyMessageText = (text: string) => {
+  // Remove Markdown links
+  const textWithoutLinks = text.replace(/\[([^\]]+)\]\([^)]+\)/g, '$1')
+
+  // Remove other Markdown formatting (e.g., *bold*, _italic_)
+  const plainText = textWithoutLinks.replace(/[*_]{1,3}([^*_]+)[*_]{1,3}/g, '$1')
+
+  navigator.clipboard.writeText(plainText)
+}
diff --git a/apps/ui/src/pages/Agents/AgentCard/AgentCard.tsx b/apps/ui/src/pages/Agents/AgentCard/AgentCard.tsx
@@ -12,6 +12,10 @@ import Edit from '@l3-lib/ui-core/dist/icons/Edit'
 import MoveArrowRight from '@l3-lib/ui-core/dist/icons/MoveArrowRight'
 
 import AvatarGenerator from 'components/AvatarGenerator/AvatarGenerator'
+import {
+  StyledChatButtonWrapper,
+  StyledInnerButtonWrapper,
+} from 'pages/TeamOfAgents/TeamOfAgentsCard/TeamOfAgentsCard'
 
 type AgentCardProps = {
   name: string
@@ -69,18 +73,6 @@ const AgentCard = ({
       <StyledCardBody>
         <StyledAvatarWrapper>
           <AvatarGenerator name={name} size={50} avatar={avatar} />
-          {onChatClick && (
-            <StyledChatButton className='chatButton'>
-              <Button
-                size={Button.sizes.SMALL}
-                kind={Button.kinds.PRIMARY}
-                onClick={onChatClick}
-                rightIcon={() => <MoveArrowRight size={14} />}
-              >
-                <StyledInnerButtonWrapper>Chat</StyledInnerButtonWrapper>
-              </Button>
-            </StyledChatButton>
-          )}
         </StyledAvatarWrapper>
         <StyledBodyTextWrapper>
           <Typography
@@ -117,41 +109,57 @@ const AgentCard = ({
         )}
         <StyledButtonsWrapper className='footerButtons'>
           {onDeleteClick && (
-            <IconButton
-              onClick={onDeleteClick}
-              icon={() => <Delete />}
-              size={Button.sizes.SMALL}
-              kind={IconButton.kinds.TERTIARY}
-              // ariaLabel='Delete'
-            />
+            <StyledHiddenButton className='hiddenButton'>
+              <IconButton
+                onClick={onDeleteClick}
+                icon={() => <Delete />}
+                size={Button.sizes.SMALL}
+                kind={IconButton.kinds.TERTIARY}
+                // ariaLabel='Delete'
+              />
+            </StyledHiddenButton>
           )}
           {onEditClick && (
-            <IconButton
-              onClick={onEditClick}
-              icon={() => <Edit />}
-              size={IconButton.sizes.SMALL}
-              kind={IconButton.kinds.TERTIARY}
-              // ariaLabel='Edit'
-            />
+            <StyledHiddenButton className='hiddenButton'>
+              <IconButton
+                onClick={onEditClick}
+                icon={() => <Edit />}
+                size={IconButton.sizes.SMALL}
+                kind={IconButton.kinds.TERTIARY}
+                // ariaLabel='Edit'
+              />
+            </StyledHiddenButton>
           )}
           {onViewClick && (
-            <IconButton
-              onClick={onViewClick}
-              icon={() => (
-                <StyledIconWrapper>
-                  <EyeOpen size={50} />
-                </StyledIconWrapper>
-              )}
-              size={Button.sizes.SMALL}
-              kind={IconButton.kinds.TERTIARY}
-              // ariaLabel='View'
-            />
+            <StyledHiddenButton className='hiddenButton'>
+              <IconButton
+                onClick={onViewClick}
+                icon={() => (
+                  <StyledIconWrapper>
+                    <EyeOpen size={50} />
+                  </StyledIconWrapper>
+                )}
+                size={Button.sizes.SMALL}
+                kind={IconButton.kinds.TERTIARY}
+                // ariaLabel='View'
+              />
+            </StyledHiddenButton>
           )}
           {onCreateClick && (
             <Button size={Button.sizes.SMALL} kind={Button.kinds.PRIMARY} onClick={onCreateClick}>
               Create
             </Button>
           )}
+          {onChatClick && (
+            <StyledChatButtonWrapper>
+              <Button size={Button.sizes.SMALL} kind={Button.kinds.PRIMARY} onClick={onChatClick}>
+                <StyledInnerButtonWrapper secondary>
+                  Chat
+                  <MoveArrowRight size={14} />
+                </StyledInnerButtonWrapper>
+              </Button>
+            </StyledChatButtonWrapper>
+          )}
         </StyledButtonsWrapper>
       </StyledCardFooter>
     </StyledAgentCard>
@@ -180,7 +188,7 @@ export const StyledAgentCard = styled.div`
   justify-content: center;
 
   :hover {
-    .chatButton {
+    .hiddenButton {
       opacity: 1;
     }
   }
@@ -244,20 +252,10 @@ const StyledAvatarWrapper = styled.div`
   /* position: relative; */
   text-align: center;
   height: fit-content;
-
-  :hover {
-    .chatButton {
-      opacity: 1;
-    }
-  }
 `
-const StyledChatButton = styled.div`
+const StyledHiddenButton = styled.div`
   width: fit-content;
   height: fit-content;
-  position: absolute;
-  top: 75px;
-  left: 10px;
-  /* transform: translateX(-50%); */
 
   opacity: 0;
   transition: opacity 300ms;
@@ -266,12 +264,6 @@ const StyledIconWrapper = styled.div`
   /* color: #000; */
   color: transparent;
 `
-const StyledInnerButtonWrapper = styled.div`
-  display: flex;
-  /* align-items: flex-end; */
-  color: #fff;
-  gap: 5px;
-`
 
 const StyledCreatorWrapper = styled.div`
   display: flex;

diff --git a/apps/ui/src/pages/TeamOfAgents/TeamOfAgentsCard/TeamOfAgentsCard.tsx b/apps/ui/src/pages/TeamOfAgents/TeamOfAgentsCard/TeamOfAgentsCard.tsx
@@ -1,4 +1,4 @@
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 
 import Button from '@l3-lib/ui-core/dist/Button'
 
@@ -236,13 +236,19 @@ const StyledIconWrapper = styled.div`
   /* color: #000; */
   color: transparent;
 `
-const StyledInnerButtonWrapper = styled.div`
+export const StyledInnerButtonWrapper = styled.div<{ secondary?: boolean }>`
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   gap: 10px;
   padding: 10px 18px;
+
+  ${p =>
+    p.secondary &&
+    css`
+      padding: 5px;
+    `};
 `
 
 const StyledRowWrapper = styled.div`
@@ -264,7 +270,7 @@ const StyledAvatarsContainer = styled.div`
   display: flex;
   align-items: center;
 `
-const StyledChatButtonWrapper = styled.div`
+export const StyledChatButtonWrapper = styled.div`
   margin-left: auto;
 `
 const StyledCreatorWrapper = styled.div`

diff --git a/apps/ui/src/routes/RootLayout.tsx b/apps/ui/src/routes/RootLayout.tsx
@@ -33,7 +33,7 @@ const RootLayout = () => {
         {user && <Spotlight />}
       </StyledChatInputWrapper>
 
-      {user && <ChatSwitcher isChatOpen={isCheckedRoute} />}
+      {/* {user && <ChatSwitcher isChatOpen={isCheckedRoute} />} */}
     </>
   )
 }