langflow-ai / langflow

⛓️ Langflow is a visual framework for building multi-agent and RAG applications. It's open-source, Python-powered, fully customizable, LLM and vector store agnostic.
http://www.langflow.org
MIT License
18.48k stars 2.77k forks source link

On a component box, it is not clear that the red "X" will re-run the component unless you hover over or click #1906

Open zznate opened 2 weeks ago

zznate commented 2 weeks ago

See attached images. On a failed step, the component will outline in red, which is helpful. However the "Play" triangle is lost, and only a red "X" appears. It is not clear that this "X" will rerun until you mouse-over or click on it. See attached pictures.

Screenshot 2024-05-15 at 10 35 24 AM Screenshot 2024-05-15 at 10 35 16 AM

Version:

Starting Langflow v1.0.0a33...
dosubot[bot] commented 2 weeks ago

To address the confusion caused by the "X" icon for rerunning a component in Langflow, consider replacing it with a more intuitive icon, such as RefreshCw from "lucide-react", which is commonly associated with refresh or retry actions. This change can make the UI more user-friendly by clearly indicating the rerun functionality. Here's how you could implement this in your code:

import { RefreshCw } from "lucide-react"; // Import the RefreshCw icon

// In the CardHeader, replace the XCircle icon with RefreshCw
<CardHeader>
  <div className="m-auto">
    <RefreshCw strokeWidth={1.5} className="h-16 w-16" /> // Changed icon
  </div>
  <div>
    <p className="mb-4 text-xl text-foreground">
      Sorry, we found an unexpected error!
    </p>
  </div>
</CardHeader>

This modification replaces the XCircle icon with a RefreshCw icon, making it clearer that the button is meant to rerun the failed component. Ensure to test these changes in a development branch before merging them into the main project to maintain stability and follow best practices.

#### Details **Sources** - [src/frontend/src/components/crashErrorComponent/index.tsx](https://github.com/langflow-ai/langflow/blob/dev/src/frontend/src/components/crashErrorComponent/index.tsx) - [CONTRIBUTING.md](https://github.com/logspace-ai/langflow/blob/dev/CONTRIBUTING.md) - [src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx](https://github.com/logspace-ai/langflow/blob/dev/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx) - [src/frontend/src/utils/styleUtils.ts](https://github.com/logspace-ai/langflow/blob/dev/src/frontend/src/utils/styleUtils.ts) - [src/frontend/src/components/fetchErrorComponent/index.tsx](https://github.com/logspace-ai/langflow/blob/dev/src/frontend/src/components/fetchErrorComponent/index.tsx) - [src/frontend/tests/end-to-end/langflowShortcuts.spec.ts](https://github.com/logspace-ai/langflow/blob/dev/src/frontend/tests/end-to-end/langflowShortcuts.spec.ts) - [src/frontend/run-tests.sh](https://github.com/logspace-ai/langflow/blob/dev/src/frontend/run-tests.sh) - [src/frontend/tests/end-to-end/codeAreaModalComponent.spec.ts](https://github.com/logspace-ai/langflow/blob/dev/src/frontend/tests/end-to-end/codeAreaModalComponent.spec.ts) - [src/frontend/tests/onlyFront/dragAndDrop.spec.ts](https://github.com/logspace-ai/langflow/blob/dev/src/frontend/tests/onlyFront/dragAndDrop.spec.ts) - [src/frontend/package.json](https://github.com/logspace-ai/langflow/blob/dev/src/frontend/package.json) - [src/frontend/package.json](https://github.com/langflow-ai/langflow/blob/dev/src/frontend/package.json) - [pyproject.toml](https://github.com/logspace-ai/langflow/blob/dev/pyproject.toml) - [pyproject.toml](https://github.com/langflow-ai/langflow/blob/dev/pyproject.toml) - [docs/docs/whats-new/a-new-chapter-langflow.mdx](https://github.com/langflow-ai/langflow/blob/dev/docs/docs/whats-new/a-new-chapter-langflow.mdx) - [docs/docs/contributing/community.md](https://github.com/logspace-ai/langflow/blob/dev/docs/docs/contributing/community.md) - [docs/docs/contributing/github-issues.md](https://github.com/logspace-ai/langflow/blob/dev/docs/docs/contributing/github-issues.md)
**About Dosu** This response is meant to be useful and save you time. It is **not meant to be a precise solution**, but rather a starting point for your own research. Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

To continue the conversation, mention @dosu.