diff --git a/apps/ui/src/components/CommandMenu/defaultData.tsx b/apps/ui/src/components/CommandMenu/defaultData.tsx index 876eba55a..c7b1b1d21 100644 --- 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: , - }, + // { + // id: uuidv4(), + // name: 'General', + // url: '/chat', + // option: 'open-chat', + // group_name: 'chat', + // icon: , + // }, // { // 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 index 3bad2ef91..335330613 100644 --- 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 = ({ - {onReplyClick && } + copyMessageText(messageText)} + /> diff --git a/apps/ui/src/modals/AIChatModal/components/ChatMessageList/components/HumanMessage.tsx b/apps/ui/src/modals/AIChatModal/components/ChatMessageList/components/HumanMessage.tsx index be0bfcf89..5d2e87941 100644 --- 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 = ({ - {onReplyClick && } + copyMessageText(messageText)} + /> diff --git a/apps/ui/src/modals/AIChatModal/components/ChatMessageList/components/MessageActions.tsx b/apps/ui/src/modals/AIChatModal/components/ChatMessageList/components/MessageActions.tsx index 011d3c651..e702a74e7 100644 --- 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 ( - - - + {onCopyClick && ( + + {copied ? : } + + )} + {onReplyClick && ( + + + + )} ) } @@ -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 new file mode 100644 index 000000000..f32e1c128 --- /dev/null +++ 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 index 0fa194312..132a344d4 100644 --- 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 = ({ - {onChatClick && ( - - - - )} {onDeleteClick && ( - } - size={Button.sizes.SMALL} - kind={IconButton.kinds.TERTIARY} - // ariaLabel='Delete' - /> + + } + size={Button.sizes.SMALL} + kind={IconButton.kinds.TERTIARY} + // ariaLabel='Delete' + /> + )} {onEditClick && ( - } - size={IconButton.sizes.SMALL} - kind={IconButton.kinds.TERTIARY} - // ariaLabel='Edit' - /> + + } + size={IconButton.sizes.SMALL} + kind={IconButton.kinds.TERTIARY} + // ariaLabel='Edit' + /> + )} {onViewClick && ( - ( - - - - )} - size={Button.sizes.SMALL} - kind={IconButton.kinds.TERTIARY} - // ariaLabel='View' - /> + + ( + + + + )} + size={Button.sizes.SMALL} + kind={IconButton.kinds.TERTIARY} + // ariaLabel='View' + /> + )} {onCreateClick && ( )} + {onChatClick && ( + + + + )} @@ -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 index c852300c5..0b1950090 100644 --- 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 index cdde350d4..7d66a0519 100644 --- a/apps/ui/src/routes/RootLayout.tsx +++ b/apps/ui/src/routes/RootLayout.tsx @@ -33,7 +33,7 @@ const RootLayout = () => { {user && } - {user && } + {/* {user && } */} ) }