chore: remove unused chat files (#36861)
## Description I forgot to delete it in the previous issue. ## Automation /ok-to-test tags="@tag.Sanity" ### 🔍 Cypress test results <!-- This is an auto-generated comment: Cypress test results --> > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: <https://github.com/appsmithorg/appsmith/actions/runs/11325795465> > Commit: 6ec1c0f877a1af03bdfc97059e598c6b4218f64b > <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=11325795465&attempt=1" target="_blank">Cypress dashboard</a>. > Tags: `@tag.Sanity` > Spec: > <hr>Mon, 14 Oct 2024 11:06:16 UTC <!-- end of auto-generated comment: Cypress test results --> ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [x] No <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **Bug Fixes** - Removed the `ChatInput` component, which previously provided a customizable text input area with features for error handling and dynamic resizing. - **Chores** - Deleted the associated TypeScript type definitions for `ChatInputProps`, simplifying the component structure. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
parent
add980838a
commit
e094bf2c4c
|
|
@ -1,171 +0,0 @@
|
|||
import clsx from "clsx";
|
||||
import {
|
||||
FieldError,
|
||||
FieldLabel,
|
||||
inputFieldStyles,
|
||||
IconButton,
|
||||
TextAreaInput,
|
||||
} from "@appsmith/wds";
|
||||
import { useControlledState } from "@react-stately/utils";
|
||||
import { chain, useLayoutEffect } from "@react-aria/utils";
|
||||
import { TextField as HeadlessTextField } from "react-aria-components";
|
||||
import React, { useCallback, useRef, useEffect, useState } from "react";
|
||||
|
||||
import type { ChatInputProps } from "./types";
|
||||
|
||||
export function ChatInput(props: ChatInputProps) {
|
||||
const {
|
||||
contextualHelp,
|
||||
errorMessage,
|
||||
isDisabled,
|
||||
isInvalid,
|
||||
isLoading,
|
||||
isReadOnly,
|
||||
isRequired,
|
||||
isSubmitDisabled,
|
||||
label,
|
||||
onChange,
|
||||
onSubmit,
|
||||
prefix,
|
||||
suffix: suffixProp,
|
||||
value,
|
||||
...rest
|
||||
} = props;
|
||||
|
||||
const inputRef = useRef<HTMLTextAreaElement>(null);
|
||||
const [initialHeight, setInitialHeight] = useState<number | null>(null);
|
||||
const [inputValue, setInputValue] = useControlledState(
|
||||
props.value,
|
||||
props.defaultValue ?? "",
|
||||
() => {
|
||||
//
|
||||
},
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (inputRef.current && initialHeight === null) {
|
||||
const input = inputRef.current;
|
||||
const computedStyle = window.getComputedStyle(input);
|
||||
const height = parseFloat(computedStyle.height) || 0;
|
||||
const paddingTop = parseFloat(computedStyle.paddingTop) || 0;
|
||||
const paddingBottom = parseFloat(computedStyle.paddingBottom) || 0;
|
||||
|
||||
setInitialHeight(height + paddingTop + paddingBottom);
|
||||
}
|
||||
}, [initialHeight]);
|
||||
|
||||
const onHeightChange = useCallback(() => {
|
||||
// Quiet textareas always grow based on their text content.
|
||||
// Standard textareas also grow by default, unless an explicit height is set.
|
||||
if (props.height == null && inputRef.current) {
|
||||
const input = inputRef.current;
|
||||
const prevAlignment = input.style.alignSelf;
|
||||
const prevOverflow = input.style.overflow;
|
||||
// Firefox scroll position is lost when overflow: 'hidden' is applied so we skip applying it.
|
||||
// The measure/applied height is also incorrect/reset if we turn on and off
|
||||
// overflow: hidden in Firefox https://bugzilla.mozilla.org/show_bug.cgi?id=1787062
|
||||
const isFirefox = "MozAppearance" in input.style;
|
||||
|
||||
if (!isFirefox) {
|
||||
input.style.overflow = "hidden";
|
||||
}
|
||||
|
||||
input.style.alignSelf = "start";
|
||||
input.style.height = "auto";
|
||||
|
||||
const computedStyle = window.getComputedStyle(input);
|
||||
const height = parseFloat(computedStyle.height) || 0;
|
||||
const paddingTop = parseFloat(computedStyle.paddingTop) || 0;
|
||||
const paddingBottom = parseFloat(computedStyle.paddingBottom) || 0;
|
||||
const textHeight = input.scrollHeight - paddingTop - paddingBottom + 1;
|
||||
|
||||
if (Math.abs(textHeight - height) > 10) {
|
||||
input.style.height = `${textHeight}px`;
|
||||
} else {
|
||||
input.style.height = "auto";
|
||||
}
|
||||
|
||||
input.style.overflow = prevOverflow;
|
||||
input.style.alignSelf = prevAlignment;
|
||||
}
|
||||
}, [inputRef, props.height]);
|
||||
|
||||
const handleKeyDown = useCallback(
|
||||
(event: React.KeyboardEvent<HTMLTextAreaElement>) => {
|
||||
if (Boolean(isSubmitDisabled)) return;
|
||||
|
||||
if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
|
||||
event.preventDefault();
|
||||
onSubmit?.();
|
||||
}
|
||||
},
|
||||
[onSubmit, isSubmitDisabled],
|
||||
);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
if (inputRef.current) {
|
||||
onHeightChange();
|
||||
}
|
||||
}, [onHeightChange, inputValue]);
|
||||
|
||||
const suffix = (function () {
|
||||
if (Boolean(suffixProp)) return suffixProp;
|
||||
|
||||
if (Boolean(isLoading)) {
|
||||
return (
|
||||
<IconButton
|
||||
icon="player-stop-filled"
|
||||
isDisabled={Boolean(isDisabled) || Boolean(isSubmitDisabled)}
|
||||
onPress={onSubmit}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<IconButton
|
||||
icon="arrow-up"
|
||||
isDisabled={Boolean(isDisabled) || Boolean(isSubmitDisabled)}
|
||||
onPress={onSubmit}
|
||||
/>
|
||||
);
|
||||
})();
|
||||
|
||||
const styles = {
|
||||
// The --input-height is required to make the icon button vertically centered.
|
||||
// Why can't we do this with CSS? Reason is that the height of the input is calculated based on the content.
|
||||
"--input-height": Boolean(initialHeight) ? `${initialHeight}px` : "auto",
|
||||
} as React.CSSProperties;
|
||||
|
||||
return (
|
||||
<HeadlessTextField
|
||||
{...rest}
|
||||
className={clsx(inputFieldStyles.field)}
|
||||
isDisabled={Boolean(isDisabled)}
|
||||
isInvalid={isInvalid}
|
||||
isReadOnly={isReadOnly}
|
||||
isRequired={isRequired}
|
||||
onChange={chain(onChange, setInputValue)}
|
||||
style={styles}
|
||||
value={value}
|
||||
>
|
||||
<FieldLabel
|
||||
contextualHelp={contextualHelp}
|
||||
isDisabled={isDisabled}
|
||||
isRequired={isRequired}
|
||||
>
|
||||
{label}
|
||||
</FieldLabel>
|
||||
<TextAreaInput
|
||||
isReadOnly={isReadOnly}
|
||||
onKeyDown={handleKeyDown}
|
||||
prefix={prefix}
|
||||
ref={inputRef}
|
||||
rows={1}
|
||||
size="large"
|
||||
suffix={suffix}
|
||||
value={value}
|
||||
/>
|
||||
<FieldError>{errorMessage}</FieldError>
|
||||
</HeadlessTextField>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
import type { TextAreaProps } from "@appsmith/wds";
|
||||
|
||||
export interface ChatInputProps extends TextAreaProps {
|
||||
/** callback function when the user submits the chat input */
|
||||
onSubmit?: () => void;
|
||||
/** flag for disable the submit button */
|
||||
isSubmitDisabled?: boolean;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user