UI Layout Issues

[Yeon1007]

If i want to change the UI of RAGFlow frontend:

1. The RAGflow logo in the top left corner of the home page
2. ‘Welcom to RAGFlow’ in home page
3. Hide the github and discord logo
4. the floating widget logo (now it is blue chat logo).
   If i want to change the above items, I need to find which files in the source code and know the file paths. @dosu

[dosubot[bot]]

Here’s where to find and change each UI element in the RAGFlow frontend:

• The top-left RAGFlow logo is rendered as an <img src="/logo.svg" /> in web/src/layouts/next-header.tsx (source). To change the logo image itself, update web/public/logo.svg (source).
• The GitHub and Discord logos are rendered as <IconFontFill name="GitHub" /> and <IconFontFill name="a-DiscordIconSVGVectorIcon" /> in the same header file. Remove or comment out those elements in web/src/layouts/next-header.tsx (source).
• The “Welcome to RAGFlow” text is in web/src/pages/home/banner.tsx, inside the Banner component (source). Edit the text in the relevant <div> or check the NextBanner component in the same file for other welcome headers.
• The floating widget logo (blue chat icon) is set by the MessageCircle icon from the lucide-react library in web/src/components/floating-chat-widget.tsx. Change the icon import or replace <MessageCircle /> with your preferred icon (source).

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[dosubot[bot]]

1. To change the RAGFlow logo and the "RAG Flow" text in the Fullscreen Chat (iframe) embed, edit the EmbedContainer component in web/src/components/embed-container.tsx. The logo is rendered as <img src="/logo.svg" /> and the text comes from {appConf.appName}. Replace web/public/logo.svg for the logo, and update the value returned by useFetchAppConf() (which may come from web/public/conf.json or can be hardcoded) for the app name.
   See code reference

2. The "cannot load the dialog" error in Floating Widget (Intercom-style) mode was fixed in a recent update. The fix is in web/src/components/floating-chat-widget.tsx and related files. If you are on v0.22.1, upgrade to the latest version to resolve this issue.
   See PR details

To customize the floating widget's window size and color, edit the Tailwind CSS classes and inline styles in web/src/components/floating-chat-widget.tsx. For example, the main chat window uses w-[380px] h-[500px] bg-blue-600 and the header uses bg-gradient-to-r from-blue-600 to-blue-700. Change these classes to adjust size and color as needed.
See code reference

If you are embedding an agent that requires input parameters in the Begin node, iframe embedding will not work—use the API or Python SDK instead. For widget appearance, you can also adjust the inline styles in the generated embed code for the iframe (width, height, position).
More details

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[Yeon1007]

Every time I modify the UI code and want to apply the new UI, I have to rebuild the Docker image? it takes a lot of time because the image size is large. Is there any other solution? @dosu

[dosubot[bot]]

You don't have to rebuild the Docker image every time you change the UI if you're just developing or testing locally. The fastest workflow is to run the frontend in development mode with hot-reload:

1. In the web directory, run:

   npm install
   npm run dev
   

   This starts a local dev server (usually at http://localhost:9222) that instantly reflects UI changes.

2. Make sure your backend (API) is running—this can still be in Docker Compose. Update web/.umirc.ts to set proxy.target to your backend API (e.g., http://127.0.0.1:9380).

3. Access the UI at http://localhost:9222 and you'll see your changes immediately.

This approach is great for development and debugging. For production, you still need to rebuild the Docker image to bake in your changes before deployment.

Mounting the built dist folder into the container or editing files inside the running container is not officially supported and can cause errors (like 500 Internal Server Error) because the container expects assets to be present in a specific way inside the image. For quick local testing, you can also serve the dist folder with a static file server (e.g., npx serve dist), but this won't integrate with the backend APIs unless configured.

References:

• Official dev workflow: hot-reload frontend
• Why mounting dist or copying files doesn't work in Docker
• web/README.md: npm run dev

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[Yeon1007]

If I have already applied the iframe code embedded to a webpage, and later I modify the UI but do not rebuild the Docker image, but only Docker Compose down and then up again, will the UI of the embedded to webpage change? @dosu

[dosubot[bot]]

No, the UI in your embedded iframe will not change if you only restart Docker Compose after modifying the UI code. The container serves static assets that were baked into the Docker image at build time, so unless you rebuild the image, your changes won't be reflected. For development, you can run the frontend locally with npm run dev for instant updates, but for production (including embedded iframes), you must rebuild the Docker image to apply UI changes. Mounting or copying files into the running container is not officially supported and can cause errors.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[Yeon1007]

I'm currently using GPU accelerate the DeepDoc, but why does it re-download something relate to CUDA and PyTorch components every time I run Docker Compose down and then up again? Is this normal? @dosu

[dosubot[bot]]

Yes, this is normal for the default RAGFlow Docker image. In v0.22.1, PyTorch (and its CUDA components) are installed at runtime every time the container starts with GPU acceleration enabled. This happens because the image does not include PyTorch by default; the function responsible is pip_install_torch, which runs on each fresh start unless you set DEVICE=cpu source.

To avoid repeated downloads, build a custom Docker image with PyTorch pre-installed: add PyTorch to your pyproject.toml and uv.lock files, then build the image so PyTorch is installed at build time, not runtime. This way, the image already contains PyTorch and CUDA, and startup will be much faster source.

A recent PR is working to improve this experience, but for now, building your own image is the recommended solution source.

If you see PyTorch downloading from a PyPI mirror and some startup delays, that's expected—especially on first launch or after database migrations. Once the service is up, everything should work normally source.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[Yeon1007]

When using RAGflow, sometimes after running the agent or completing a chat, it gets stuck. Refreshing the page only gets stuck on the homepage, unable to load the dataset and agent. It eventually recovers on its own after a while. Why is this happening? @dosu

[dosubot[bot]]

This is a known issue in RAGFlow, especially in v0.22.1: after running an agent or completing a chat, the backend can get stuck due to deadlocks, resource exhaustion, or long-running tasks. When this happens, the frontend waits for backend API responses to load datasets and agents, but if the backend is slow or unresponsive, the UI hangs in a loading state until the backend recovers or restarts. This is why refreshing the page doesn't help immediately, but things eventually recover on their own once the backend clears the stuck state or retries succeed.

Common causes include backend deadlocks after partial chat responses (especially with DeepSeek API and Tavily), database connection failures, stack overflow errors in tokenization, slow retrieval steps, or GPU resource contention. The frontend uses React Query hooks and waits up to 5 minutes for backend responses before timing out, so any backend delay or error will block the UI from loading data details and examples more technical explanation agent-specific stalls.

To reduce these issues: monitor backend logs for errors, limit input size, reduce concurrency (set MAX_CONCURRENT_TASKS=1), ensure database health, and restart services if stuck. Upgrading to the latest nightly version is recommended, as recent updates have fixed many bugs in agent orchestration and retrieval logic troubleshooting steps. For persistent stuck states, you may need to manually reset or rerun tasks via the UI or API, and clean up stuck tasks in MySQL/Redis step-by-step recovery guide.

Let me know if you want help with specific diagnostics or configuration!

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[Magicbook1108]

Officially we don't support questions on ui change.