🔧 chore(textarea.tsx): refactor textarea component class names for improved readability and maintainability
🔧 chore(index.css): refactor input-primary class to remove unnecessary styles and improve readability 🔧 chore(index.css): add new textarea-primary class for textarea component with similar styles as input-primary but without truncation 🔧 chore(chatInput/index.tsx): replace textarea element with Textarea component for consistency and reusability
This commit is contained in:
parent
3e99fa431b
commit
25235a0d11
3 changed files with 10 additions and 5 deletions
|
|
@ -9,7 +9,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
|
|||
return (
|
||||
<textarea
|
||||
className={cn(
|
||||
"flex min-h-[80px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
||||
"textarea-primary nopan nodrag noundo nocopy",
|
||||
className
|
||||
)}
|
||||
ref={ref}
|
||||
|
|
|
|||
|
|
@ -239,11 +239,15 @@ The cursor: default; property value restores the browser's default cursor style
|
|||
.button-div-style {
|
||||
@apply gap-2 flex
|
||||
}
|
||||
|
||||
.input-primary{
|
||||
@apply placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 focus:placeholder-transparent focus:ring-ring focus:border-ring bg-background block text-left border-border form-input px-3 placeholder:text-muted-foreground rounded-md shadow-sm sm:text-sm truncate w-full
|
||||
@apply disabled:cursor-not-allowed disabled:opacity-50 focus:placeholder-transparent focus:ring-ring focus:border-ring bg-background block text-left border-border form-input px-3 placeholder:text-muted-foreground rounded-md shadow-sm sm:text-sm w-full truncate
|
||||
}
|
||||
|
||||
|
||||
/* The same as input-primary but no-truncate*/
|
||||
.textarea-primary{
|
||||
@apply disabled:cursor-not-allowed disabled:opacity-50 focus:placeholder-transparent focus:ring-ring focus:border-ring bg-background block text-left border-border form-input px-3 placeholder:text-muted-foreground rounded-md shadow-sm sm:text-sm w-full
|
||||
}
|
||||
|
||||
.input-edit-node{
|
||||
@apply input-primary border-border pt-0.5 pb-0.5 text-left w-full
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { useEffect } from "react";
|
||||
import IconComponent from "../../../components/genericIconComponent";
|
||||
import { classNames } from "../../../utils/utils";
|
||||
import { Textarea } from "../../../components/ui/textarea";
|
||||
|
||||
export default function ChatInput({
|
||||
lockChat,
|
||||
|
|
@ -25,7 +26,7 @@ export default function ChatInput({
|
|||
|
||||
return (
|
||||
<div className="relative">
|
||||
<textarea
|
||||
<Textarea
|
||||
onKeyDown={(event) => {
|
||||
if (event.key === "Enter" && !lockChat && !event.shiftKey) {
|
||||
sendMessage();
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue