|
|
@@ -1,6 +1,6 @@
|
|
|
import { VSCodeButton, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
|
|
|
import debounce from "debounce"
|
|
|
-import { useCallback, useEffect, useMemo, useRef, useState } from "react"
|
|
|
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react"
|
|
|
import { useDeepCompareEffect, useEvent, useMount } from "react-use"
|
|
|
import { Virtuoso, type VirtuosoHandle } from "react-virtuoso"
|
|
|
import styled from "styled-components"
|
|
|
@@ -40,11 +40,18 @@ interface ChatViewProps {
|
|
|
showHistoryView: () => void
|
|
|
}
|
|
|
|
|
|
+export interface ChatViewRef {
|
|
|
+ acceptInput: () => void
|
|
|
+}
|
|
|
+
|
|
|
export const MAX_IMAGES_PER_MESSAGE = 20 // Anthropic limits to 20 images
|
|
|
|
|
|
const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0
|
|
|
|
|
|
-const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryView }: ChatViewProps) => {
|
|
|
+const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewProps> = (
|
|
|
+ { isHidden, showAnnouncement, hideAnnouncement, showHistoryView },
|
|
|
+ ref,
|
|
|
+) => {
|
|
|
const { t } = useAppTranslation()
|
|
|
const modeShortcutText = `${isMac ? "⌘" : "Ctrl"} + . ${t("chat:forNextMode")}`
|
|
|
const {
|
|
|
@@ -1162,6 +1169,16 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
|
|
|
}
|
|
|
}, [handleKeyDown])
|
|
|
|
|
|
+ useImperativeHandle(ref, () => ({
|
|
|
+ acceptInput: () => {
|
|
|
+ if (enableButtons && primaryButtonText) {
|
|
|
+ handlePrimaryButtonClick(inputValue, selectedImages)
|
|
|
+ } else if (!textAreaDisabled && (inputValue.trim() || selectedImages.length > 0)) {
|
|
|
+ handleSendMessage(inputValue, selectedImages)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }))
|
|
|
+
|
|
|
return (
|
|
|
<div
|
|
|
style={{
|
|
|
@@ -1386,6 +1403,8 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
|
|
|
)
|
|
|
}
|
|
|
|
|
|
+const ChatView = forwardRef(ChatViewComponent)
|
|
|
+
|
|
|
const ScrollToBottomButton = styled.div`
|
|
|
background-color: color-mix(in srgb, var(--vscode-toolbar-hoverBackground) 55%, transparent);
|
|
|
border-radius: 3px;
|