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

Pull Request: UI Feature Enhancements (#393)

Browse source 
Description:
This pull request implements several UI feature enhancements to improve
the user experience. The changes include title casing on names and
titles, fixing and changing icons, and adding a cursor pointer on the
chat interface.

Changes Made:

Title case on names and titles: Modified the code to convert names and
titles to title case. This ensures consistent capitalization and
enhances readability throughout the application.

Fixing/Changing icons: Replaced outdated or inconsistent icons with
updated versions to provide a more visually appealing and cohesive user
interface.

Cursor on chat: Added a cursor pointer to the chat interface to indicate
interactivity and enhance user engagement. The cursor appears when
hovering over the chat area, making it clear that the chat is responsive
to user input.
This commit is contained in:
anovazzi1 2023-05-29 11:10:01 -03:00 • committed by GitHub
commit 8e81a21722
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 78 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/frontend/src/CustomNodes/GenericNode/index.tsx
View file

@ -1,13 +1,17 @@
import {
BugAntIcon,
CheckCircleIcon,
Cog6ToothIcon,
EllipsisHorizontalCircleIcon,
ExclamationCircleIcon,
InformationCircleIcon,
TrashIcon,
} from "@heroicons/react/24/outline";
import { classNames, nodeColors, nodeIcons, toNormalCase } from "../../utils";
import {
CheckCircleIcon,
EllipsisHorizontalCircleIcon,
ExclamationCircleIcon,
} from "@heroicons/react/24/solid";
import { classNames, nodeColors, nodeIcons, toNormalCase, toTitleCase } from "../../utils";
import ParameterComponent from "./components/parameterComponent";
import { typesContext } from "../../contexts/typesContext";
import { useContext, useState, useEffect, useRef, Fragment } from "react";
@ -101,7 +105,9 @@ export default function GenericNode({
color: nodeColors[types[data.type]] ?? nodeColors.unknown,
}}
/>
<div className="ml-2 truncate">{data.type}</div>
<Tooltip title={data.type} placement="top">
<div className="ml-2 truncate">{data.type}</div>
</Tooltip>
<div>
<Tooltip
title={
@ -170,7 +176,7 @@ export default function GenericNode({
)
? ""
: "hidden",
"w-6 h-6 dark:text-gray-300 hover:animate-spin"
"w-6 h-6 dark:text-gray-300 hover:animate-spin-once"
)}
></Cog6ToothIcon>
</button>
@ -225,8 +231,8 @@ export default function GenericNode({
data.node.template[t].display_name
? data.node.template[t].display_name
: data.node.template[t].name
? toNormalCase(data.node.template[t].name)
: toNormalCase(t)
? toTitleCase(data.node.template[t].name)
: toTitleCase(t)
}
name={t}
tooltipTitle={

12
src/frontend/src/components/chatComponent/chatTrigger/index.tsx
View file

@ -23,14 +23,12 @@ export default function ChatTrigger({ open, setOpen }) {
>
<div className="absolute bottom-4 right-3">
<div
// style={{ backgroundColor: nodeColors["chat"] }}
className="border flex justify-center align-center py-1 px-3 w-12 h-12 rounded-full bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 dark:border-gray-600"
className="border flex justify-center align-center py-1 px-3 w-12 h-12 rounded-full bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 dark:border-gray-600 cursor-pointer"
onClick={() => {
setOpen(true);
}}
>
<button
onClick={() => {
setOpen(true);
}}
>
<button>
<div className="flex gap-3 items-center">
<ChatBubbleBottomCenterTextIcon
className="h-6 w-6 mt-1"

6
src/frontend/src/modals/NodeModal/index.tsx
View file

@ -3,7 +3,7 @@ import { XMarkIcon } from "@heroicons/react/24/outline";
import { Fragment, useContext, useRef, useState } from "react";
import { PopUpContext } from "../../contexts/popUpContext";
import { NodeDataType } from "../../types/flow";
import { nodeColors, nodeIcons, toNormalCase } from "../../utils";
import { nodeColors, nodeIcons, toNormalCase, toTitleCase } from "../../utils";
import { typesContext } from "../../contexts/typesContext";
import ModalField from "./components/ModalField";
@ -103,8 +103,8 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
data.node.template[t].display_name
? data.node.template[t].display_name
: data.node.template[t].name
? toNormalCase(data.node.template[t].name)
: toNormalCase(t)
? toTitleCase(data.node.template[t].name)
: toTitleCase(t)
}
required={data.node.template[t].required}
id={

43
src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
View file

@ -4,6 +4,7 @@ import { nodeColors, nodeIcons, nodeNames } from "../../../../utils";
import { useContext, useEffect, useState } from "react";
import { typesContext } from "../../../../contexts/typesContext";
import { APIClassType, APIObjectType } from "../../../../types/api";
import Tooltip from "../../../../components/TooltipComponent";
export default function ExtraSidebar() {
const { data } = useContext(typesContext);
@ -33,28 +34,30 @@ export default function ExtraSidebar() {
{Object.keys(data[d])
.sort()
.map((t: string, k) => (
<div key={k}>
<div
draggable
className={" cursor-grab border-l-8 rounded-l-md"}
style={{
borderLeftColor: nodeColors[d] ?? nodeColors.unknown,
}}
onDragStart={(event) =>
onDragStart(event, {
type: t,
node: data[d][t],
})
}
>
<div className="flex w-full justify-between text-sm px-3 py-1 items-center border-dashed border-gray-400 dark:border-gray-600 border-l-0 rounded-md rounded-l-none border">
<span className="text-black dark:text-white w-36 pr-1 truncate text-xs">
{t}
</span>
<Bars2Icon className="w-4 h-6 text-gray-400 dark:text-gray-600" />
<Tooltip title={t.length > 21 ? t : ''} placement="right">
<div key={k}>
<div
draggable
className={" cursor-grab border-l-8 rounded-l-md"}
style={{
borderLeftColor: nodeColors[d] ?? nodeColors.unknown,
}}
onDragStart={(event) =>
onDragStart(event, {
type: t,
node: data[d][t],
})
}
>
<div className="flex w-full justify-between text-sm px-3 py-1 items-center border-dashed border-gray-400 dark:border-gray-600 border-l-0 rounded-md rounded-l-none border">
<span className="text-black dark:text-white w-36 pr-1 truncate text-xs">
{t}
</span>
<Bars2Icon className="w-4 h-6 text-gray-400 dark:text-gray-600" />
</div>
</div>
</div>
</div>
</Tooltip>
))}
{Object.keys(data[d]).length === 0 && (
<div className="text-gray-400 text-center">Coming soon</div>

32
src/frontend/src/utils.ts
View file

@ -497,3 +497,35 @@ export const programmingLanguages: languageMap = {
css: ".css",
// add more file extensions here, make sure the key is same as language prop in CodeBlock.tsx component
};
export function toTitleCase(str: string) {
let result = str
.split("_")
.map((word, index) => {
if (index === 0) {
return checkUpperWords(word[0].toUpperCase() + word.slice(1).toLowerCase());
}
return checkUpperWords(word.toLowerCase());
})
.join(" ");
return result
.split("-")
.map((word, index) => {
if (index === 0) {
return checkUpperWords(word[0].toUpperCase() + word.slice(1).toLowerCase());
}
return checkUpperWords(word.toLowerCase());
})
.join(" ");
}
export const upperCaseWords: string[] = ["llm", "uri"];
export function checkUpperWords(str: string) {
const words = str.split(' ').map((word) => {
return upperCaseWords.includes(word.toLowerCase()) ? word.toUpperCase() : word[0].toUpperCase() + word.slice(1).toLowerCase();
});
return words.join(' ');
}

1
src/frontend/tailwind.config.js
View file

@ -17,6 +17,7 @@ module.exports = {
animation: {
"pulse-green": "pulseGreen 1s linear",
'spin-once': 'spin 1s linear 0.7'
},
keyframes: {
pulseGreen: {