diff --git a/client/cody-ui/src/Chat.tsx b/client/cody-ui/src/Chat.tsx index 76dd72eacb2..346f2638eda 100644 --- a/client/cody-ui/src/Chat.tsx +++ b/client/cody-ui/src/Chat.tsx @@ -213,6 +213,8 @@ export const Chat: React.FunctionComponent = ({ FeedbackButtonsContainer={FeedbackButtonsContainer} feedbackButtonsOnSubmit={feedbackButtonsOnSubmit} copyButtonOnSubmit={copyButtonOnSubmit} + submitButtonComponent={SubmitButton} + chatInputClassName={chatInputClassName} />
diff --git a/client/cody-ui/src/chat/Transcript.tsx b/client/cody-ui/src/chat/Transcript.tsx index 7bc24bfa16f..a360aba1b42 100644 --- a/client/cody-ui/src/chat/Transcript.tsx +++ b/client/cody-ui/src/chat/Transcript.tsx @@ -4,7 +4,13 @@ import classNames from 'classnames' import { ChatMessage } from '@sourcegraph/cody-shared/src/chat/transcript/messages' -import { ChatUITextAreaProps, EditButtonProps, FeedbackButtonsProps, CopyButtonProps } from '../Chat' +import { + ChatUITextAreaProps, + EditButtonProps, + FeedbackButtonsProps, + CopyButtonProps, + ChatUISubmitButtonProps, +} from '../Chat' import { FileLinkProps } from './ContextFiles' import { TranscriptItem, TranscriptItemClassNames } from './TranscriptItem' @@ -25,6 +31,7 @@ export const Transcript: React.FunctionComponent< FeedbackButtonsContainer?: React.FunctionComponent feedbackButtonsOnSubmit?: (text: string) => void copyButtonOnSubmit?: CopyButtonProps['copyButtonOnSubmit'] + submitButtonComponent?: React.FunctionComponent } & TranscriptItemClassNames > = ({ transcript, @@ -44,6 +51,8 @@ export const Transcript: React.FunctionComponent< FeedbackButtonsContainer, feedbackButtonsOnSubmit, copyButtonOnSubmit, + submitButtonComponent, + chatInputClassName, }) => { const transcriptContainerRef = useRef(null) useEffect(() => { @@ -103,6 +112,8 @@ export const Transcript: React.FunctionComponent< feedbackButtonsOnSubmit={feedbackButtonsOnSubmit} copyButtonOnSubmit={copyButtonOnSubmit} showFeedbackButtons={index > 0 && transcript.length - index === 1} + submitButtonComponent={submitButtonComponent} + chatInputClassName={chatInputClassName} /> ) )} @@ -120,6 +131,8 @@ export const Transcript: React.FunctionComponent< showEditButton={false} showFeedbackButtons={false} copyButtonOnSubmit={copyButtonOnSubmit} + submitButtonComponent={submitButtonComponent} + chatInputClassName={chatInputClassName} /> )} diff --git a/client/cody-ui/src/chat/TranscriptItem.module.css b/client/cody-ui/src/chat/TranscriptItem.module.css index 0bfb021c9f9..1ebeeb3075e 100644 --- a/client/cody-ui/src/chat/TranscriptItem.module.css +++ b/client/cody-ui/src/chat/TranscriptItem.module.css @@ -58,8 +58,11 @@ padding: 0 var(--spacing); } -.content { +.content-padding { padding: 0 var(--spacing) var(--spacing) var(--spacing); +} + +.content { word-break: break-word; line-height: 150%; } @@ -97,8 +100,30 @@ margin: 0; } +.text-area-container { + position: relative; +} + .chat-input { width: 100%; height: 100%; resize: none; } + +.submit-button { + position: absolute; + right: 0; + bottom: 0.125rem; + fill: currentColor; + opacity: 0.8; + margin: 0.25rem !important; + background: none; + border: none; + cursor: pointer; + height: 2rem; + width: 2rem; +} + +.submit-button:hover { + opacity: 1; +} diff --git a/client/cody-ui/src/chat/TranscriptItem.tsx b/client/cody-ui/src/chat/TranscriptItem.tsx index ccba7afb4fc..bfe8ff10e32 100644 --- a/client/cody-ui/src/chat/TranscriptItem.tsx +++ b/client/cody-ui/src/chat/TranscriptItem.tsx @@ -4,7 +4,13 @@ import classNames from 'classnames' import { ChatMessage } from '@sourcegraph/cody-shared/src/chat/transcript/messages' -import { ChatUITextAreaProps, EditButtonProps, FeedbackButtonsProps, CopyButtonProps } from '../Chat' +import { + ChatUITextAreaProps, + EditButtonProps, + FeedbackButtonsProps, + CopyButtonProps, + ChatUISubmitButtonProps, +} from '../Chat' import { CodySvg } from '../utils/icons' import { BlinkingCursor } from './BlinkingCursor' @@ -22,6 +28,7 @@ export interface TranscriptItemClassNames { transcriptItemParticipantClassName?: string codeBlocksCopyButtonClassName?: string transcriptActionClassName?: string + chatInputClassName?: string } /** @@ -42,6 +49,7 @@ export const TranscriptItem: React.FunctionComponent< feedbackButtonsOnSubmit?: (text: string) => void showFeedbackButtons: boolean copyButtonOnSubmit?: CopyButtonProps['copyButtonOnSubmit'] + submitButtonComponent?: React.FunctionComponent } & TranscriptItemClassNames > = ({ message, @@ -62,39 +70,46 @@ export const TranscriptItem: React.FunctionComponent< feedbackButtonsOnSubmit, showFeedbackButtons, copyButtonOnSubmit, + submitButtonComponent: SubmitButton, + chatInputClassName, }) => { const [formInput, setFormInput] = useState(message.displayText ?? '') const textarea = - TextArea && beingEdited && editButtonOnSubmit ? ( -