jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

✨ (chatInput): add helper function to generate class names for file preview

Browse source 
♻️ (chatInput): refactor file preview class name logic to use helper function
This commit is contained in:
cristhianzl 2024-05-29 12:39:44 -03:00
commit a1d1ad22ce
2 changed files with 12 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/frontend/src/modals/IOModal/components/chatView/chatInput/helpers/get-class-file-preview.ts Normal file
View file

@ -0,0 +1,7 @@
export const getClassNamesFilePreview = (inputFocus) => {
return `flex w-full items-center gap-2 rounded-t-md bg-background px-10 py-5 ${
inputFocus
? "border-2 border-b-0 border-ring"
: "border border-b-0 border-border"
}`;
};

13
src/frontend/src/modals/IOModal/components/chatView/chatInput/index.tsx
View file

@ -12,6 +12,7 @@ import {
import FilePreview from "../filePreviewChat";
import ButtonSendWrapper from "./components/buttonSendWrapper";
import TextAreaWrapper from "./components/textAreaWrapper";
import { getClassNamesFilePreview } from "./helpers/get-class-file-preview";
import useAutoResizeTextArea from "./hooks/use-auto-resize-text-area";
import useDragAndDrop from "./hooks/use-drag-and-drop";
import useFocusOnUnlock from "./hooks/use-focus-unlock";
@ -38,7 +39,7 @@ export default function ChatInput({
const { dragOver, dragEnter, dragLeave, onDrop } = useDragAndDrop(
setIsDragging,
setFiles,
currentFlowId,
currentFlowId
);
const send = () => {
@ -59,6 +60,8 @@ export default function ChatInput({
);
};
const classNameFilePreview = getClassNamesFilePreview(inputFocus);
return (
<div className="flex w-full flex-col-reverse">
<div className="relative w-full">
@ -92,13 +95,7 @@ export default function ChatInput({
</div>
</div>
{files.length > 0 && (
<div
className={`flex w-full items-center gap-2 rounded-t-md bg-background px-10 py-5 ${
inputFocus
? "border-2 border-b-0 border-ring"
: "border border-b-0 border-border"
}`}
>
<div className={classNameFilePreview}>
{files.map((file) => (
<FilePreview
error={file.error}