From 45f9f428dbf578eeeca8033c8df0801e9267bc8d Mon Sep 17 00:00:00 2001
From: Atsushi Hatakeyama <atu729@icloud.com>
Date: Mon, 22 Sep 2025 11:37:34 +0900
Subject: [PATCH] Fix: enable scrolling at chat setting (#10184)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

### What problem does this PR solve?

This PR is related to
[#9961](https://github.com/infiniflow/ragflow/issues/9961).
In the Chat Settings screen, the textarea did not support scrolling when
the content grew longer than its visible area, which made it less
convenient to use.
Also, there was no Japanese placeholder text to guide users on what to
enter in the field.

This PR improves the user experience by:
- Adding `overflow-y-auto` to the textarea so that long content can be
scrolled smoothly.
- Introducing a placeholder (`メッセージを入力してください...`) to provide clearer
guidance for users.


https://github.com/user-attachments/assets/95553331-087b-42c5-a41d-5dfe08047bae

### What has been considered

As an alternative solution, I explored replacing the textarea with the
existing `PromptEditor` component.
However, this approach triggered a `canvas not found.` alert.
The current implementation of `PromptEditor` internally attempts to
fetch **agent (canvas) information**, but in the Chat Settings screen no
such ID exists. As a result, the API call fails and the backend returns
`canvas not found.`.

One possible workaround would be to extend `PromptEditor` with a
**“disable variable picker” flag**, ensuring that plugins are not loaded
in contexts like Chat Settings. While feasible, this would have a
broader impact across the codebase.

Given these considerations, I decided to address the issue in a simpler
way by applying a Tailwind utility (`overflow-y-auto`). Since the UI
design is expected to change in the future, this solution is considered
sufficient for now.
<img width="1501" height="794" alt="Screenshot 2025-09-20 at 15 00 12"
src="https://github.com/user-attachments/assets/85578ee8-489f-4ede-b3af-bafd7afe95bd"
/>


### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)
- [ ] New Feature (non-breaking change which adds functionality)
- [ ] Documentation Update
- [ ] Refactoring
- [ ] Performance Improvement
- [ ] Other (please describe):
---
 web/src/locales/ja.ts                                      | 1 +
 .../next-chats/chat/app-settings/chat-prompt-engine.tsx    | 7 ++++++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/web/src/locales/ja.ts b/web/src/locales/ja.ts
index 690a5fd0d..46a5e8e53 100644
--- a/web/src/locales/ja.ts
+++ b/web/src/locales/ja.ts
@@ -332,6 +332,7 @@ export default {
       questionTip: `質問が指定されている場合、チャンクの埋め込みはそれらに基づきます。`,
     },
     chat: {
+      messagePlaceholder: 'メッセージを入力してください...',
       newConversation: '新しい会話',
       createAssistant: 'アシスタントを作成',
       assistantSetting: 'アシスタント設定',
diff --git a/web/src/pages/next-chats/chat/app-settings/chat-prompt-engine.tsx b/web/src/pages/next-chats/chat/app-settings/chat-prompt-engine.tsx
index 836073335..a5a635efa 100644
--- a/web/src/pages/next-chats/chat/app-settings/chat-prompt-engine.tsx
+++ b/web/src/pages/next-chats/chat/app-settings/chat-prompt-engine.tsx
@@ -31,7 +31,12 @@ export function ChatPromptEngine() {
           <FormItem>
             <FormLabel>{t('system')}</FormLabel>
             <FormControl>
-              <Textarea {...field} rows={8} />
+              <Textarea
+                {...field}
+                rows={8}
+                placeholder={t('messagePlaceholder')}
+                className="overflow-y-auto"
+              />
             </FormControl>
             <FormMessage />
           </FormItem>