Skip to content

Commit 8aa7438

Browse files
iamfaraniamfaran
committed
add translations for the chat component
1 parent e164f09 commit 8aa7438

File tree

9 files changed

+146
-69
lines changed

9 files changed

+146
-69
lines changed

‎client/packages/lowcoder/src/comps/comps/chatComp/chatComp.tsx

Lines changed: 18 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import { QueryHandler, createMessageHandler } from "./handlers/messageHandlers";
1616
import { useMemo, useRef, useEffect } from "react";
1717
import { changeChildAction } from "lowcoder-core";
1818
import { ChatMessage } from "./types/chatTypes";
19+
import { trans } from "i18n";
1920

2021
import "@assistant-ui/styles/index.css";
2122
import "@assistant-ui/styles/markdown.css";
@@ -25,39 +26,39 @@ import "@assistant-ui/styles/markdown.css";
2526
// ============================================================================
2627

2728
export const componentLoadEvent: EventConfigType = {
28-
label: "Component Load",
29+
label: trans("chat.componentLoad"),
2930
value: "componentLoad",
30-
description: "Triggered when the chat component finishes loading - Load existing data from backend",
31+
description: trans("chat.componentLoadDesc"),
3132
};
3233

3334
export const messageSentEvent: EventConfigType = {
34-
label: "Message Sent",
35+
label: trans("chat.messageSent"),
3536
value: "messageSent",
36-
description: "Triggered when a user sends a message - Auto-save user messages",
37+
description: trans("chat.messageSentDesc"),
3738
};
3839

3940
export const messageReceivedEvent: EventConfigType = {
40-
label: "Message Received",
41-
value: "messageReceived",
42-
description: "Triggered when a response is received from the AI - Auto-save AI responses",
41+
label: trans("chat.messageReceived"),
42+
value: "messageReceived",
43+
description: trans("chat.messageReceivedDesc"),
4344
};
4445

4546
export const threadCreatedEvent: EventConfigType = {
46-
label: "Thread Created",
47+
label: trans("chat.threadCreated"),
4748
value: "threadCreated",
48-
description: "Triggered when a new thread is created - Auto-save new threads",
49+
description: trans("chat.threadCreatedDesc"),
4950
};
5051

5152
export const threadUpdatedEvent: EventConfigType = {
52-
label: "Thread Updated",
53+
label: trans("chat.threadUpdated"),
5354
value: "threadUpdated",
54-
description: "Triggered when a thread is updated - Auto-save thread changes",
55+
description: trans("chat.threadUpdatedDesc"),
5556
};
5657

5758
export const threadDeletedEvent: EventConfigType = {
58-
label: "Thread Deleted",
59+
label: trans("chat.threadDeleted"),
5960
value: "threadDeleted",
60-
description: "Triggered when a thread is deleted - Delete thread from backend",
61+
description: trans("chat.threadDeletedDesc"),
6162
};
6263

6364
const ChatEventOptions = [
@@ -104,8 +105,8 @@ function generateUniqueTableName(): string {
104105
}
105106

106107
const ModelTypeOptions = [
107-
{ label: "Query", value: "query" },
108-
{ label: "N8N Workflow", value: "n8n" },
108+
{ label: trans("chat.handlerTypeQuery"), value: "query" },
109+
{ label: trans("chat.handlerTypeN8N"), value: "n8n" },
109110
] as const;
110111

111112
export const chatChildrenMap = {
@@ -116,11 +117,11 @@ export const chatChildrenMap = {
116117
handlerType: dropdownControl(ModelTypeOptions, "query"),
117118
chatQuery: QuerySelectControl, // Only used for "query" type
118119
modelHost: withDefault(StringControl, ""), // Only used for "n8n" type
119-
systemPrompt: withDefault(StringControl, "You are a helpful assistant."),
120+
systemPrompt: withDefault(StringControl, trans("chat.defaultSystemPrompt")),
120121
streaming: BoolControl.DEFAULT_TRUE,
121122

122123
// UI Configuration
123-
placeholder: withDefault(StringControl, "Chat Component"),
124+
placeholder: withDefault(StringControl, trans("chat.defaultPlaceholder")),
124125

125126
// Database Information (read-only)
126127
databaseName: withDefault(StringControl, ""),

‎client/packages/lowcoder/src/comps/comps/chatComp/chatPropertyView.tsx

Lines changed: 34 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
import React, { useMemo } from "react";
44
import { Section, sectionNames, DocLink } from "lowcoder-design";
55
import { placeholderPropertyView } from "../../utils/propertyUtils";
6+
import { trans } from "i18n";
67

78
// ============================================================================
89
// CLEAN PROPERTY VIEW - FOCUSED ON ESSENTIAL CONFIGURATION
@@ -25,51 +26,56 @@ export const ChatPropertyView = React.memo((props: any) => {
2526
</div>
2627

2728
{/* Message Handler Configuration */}
28-
<Section name="Message Handler">
29+
<Section name={trans("chat.messageHandler")}>
2930
{children.handlerType.propertyView({
30-
label: "Handler Type",
31-
tooltip: "How messages are processed"
31+
label: trans("chat.handlerType"),
32+
tooltip: trans("chat.handlerTypeTooltip"),
3233
})}
33-
34-
{/* Show chatQuery field only for "query" handler */}
35-
{children.handlerType.value === "query" && (
34+
35+
{/* Conditional Query Selection */}
36+
{children.handlerType.getView() === "query" && (
3637
children.chatQuery.propertyView({
37-
label: "Chat Query",
38-
placeholder: "Select a query to handle messages"
38+
label: trans("chat.chatQuery"),
39+
placeholder: trans("chat.chatQueryPlaceholder"),
3940
})
4041
)}
41-
42-
{/* Show modelHost field only for "n8n" handler */}
43-
{children.handlerType.value === "n8n" && (
42+
43+
{/* Conditional N8N Configuration */}
44+
{children.handlerType.getView() === "n8n" && (
4445
children.modelHost.propertyView({
45-
label: "N8N Webhook URL",
46-
placeholder: "http://localhost:5678/webhook/...",
47-
tooltip: "N8N webhook endpoint for processing messages"
46+
label: trans("chat.modelHost"),
47+
placeholder: trans("chat.modelHostPlaceholder"),
48+
tooltip: trans("chat.modelHostTooltip"),
4849
})
4950
)}
50-
51+
5152
{children.systemPrompt.propertyView({
52-
label: "System Prompt",
53-
placeholder: "You are a helpful assistant...",
54-
tooltip: "Initial instructions for the AI"
53+
label: trans("chat.systemPrompt"),
54+
placeholder: trans("chat.systemPromptPlaceholder"),
55+
tooltip: trans("chat.systemPromptTooltip"),
5556
})}
56-
57-
{children.streaming.propertyView({
58-
label: "Enable Streaming",
59-
tooltip: "Stream responses in real-time (when supported)"
57+
58+
{children.streaming.propertyView({
59+
label: trans("chat.streaming"),
60+
tooltip: trans("chat.streamingTooltip"),
6061
})}
6162
</Section>
6263

6364
{/* UI Configuration */}
64-
<Section name="UI Configuration">
65-
{placeholderPropertyView(children)}
65+
<Section name={trans("chat.uiConfiguration")}>
66+
{children.placeholder.propertyView({
67+
label: trans("chat.placeholderLabel"),
68+
placeholder: trans("chat.defaultPlaceholder"),
69+
tooltip: trans("chat.placeholderTooltip"),
70+
})}
6671
</Section>
6772

68-
{/* Database Information */}
69-
<Section name="Database">
73+
{/* Database Section */}
74+
<Section name={trans("chat.database")}>
7075
{children.databaseName.propertyView({
71-
label: "Database Name",
72-
tooltip: "Auto-generated database name for this chat component (read-only)"
76+
label: trans("chat.databaseName"),
77+
tooltip: trans("chat.databaseNameTooltip"),
78+
readonly: true
7379
})}
7480
</Section>
7581

‎client/packages/lowcoder/src/comps/comps/chatComp/components/ChatCoreMain.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import {
1818
} from "./context/ChatContext";
1919
import { MessageHandler } from "../types/chatTypes";
2020
import styled from "styled-components";
21+
import { trans } from "i18n";
2122

2223
// ============================================================================
2324
// STYLED COMPONENTS (same as your current ChatMain)
@@ -147,7 +148,7 @@ export function ChatCoreMain({
147148
const errorMessage: ChatMessage = {
148149
id: generateId(),
149150
role: "assistant",
150-
text: `Sorry, I encountered an error: ${error instanceof Error ? error.message : 'Unknown error'}`,
151+
text: trans("chat.errorUnknown"),
151152
timestamp: Date.now(),
152153
};
153154

@@ -204,7 +205,7 @@ export function ChatCoreMain({
204205
const errorMessage: ChatMessage = {
205206
id: generateId(),
206207
role: "assistant",
207-
text: `Sorry, I encountered an error: ${error instanceof Error ? error.message : 'Unknown error'}`,
208+
text: trans("chat.errorUnknown"),
208209
timestamp: Date.now(),
209210
};
210211

@@ -222,7 +223,7 @@ export function ChatCoreMain({
222223
archivedThreads: state.threadList.filter((t): t is ArchivedThreadData => t.status === "archived"),
223224

224225
onSwitchToNewThread: async () => {
225-
const threadId = await actions.createThread("New Chat");
226+
const threadId = await actions.createThread(trans("chat.newChatTitle"));
226227
actions.setCurrentThread(threadId);
227228
onEvent?.("threadCreated");
228229
},

‎client/packages/lowcoder/src/comps/comps/chatComp/components/ChatPanel.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { ChatCore } from "./ChatCore";
55
import { createChatStorage } from "../utils/storageFactory";
66
import { N8NHandler } from "../handlers/messageHandlers";
77
import { ChatPanelProps } from "../types/chatTypes";
8+
import { trans } from "i18n";
89

910
import "@assistant-ui/styles/index.css";
1011
import "@assistant-ui/styles/markdown.css";
@@ -16,7 +17,7 @@ import "@assistant-ui/styles/markdown.css";
1617
export function ChatPanel({
1718
tableName,
1819
modelHost,
19-
systemPrompt = "You are a helpful assistant.",
20+
systemPrompt = trans("chat.defaultSystemPrompt"),
2021
streaming = true,
2122
onMessageUpdate
2223
}: ChatPanelProps) {

‎client/packages/lowcoder/src/comps/comps/chatComp/components/assistant-ui/thread-list.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { PencilIcon, PlusIcon, Trash2Icon } from "lucide-react";
99
import { TooltipIconButton } from "./tooltip-icon-button";
1010
import { useThreadListItemRuntime } from "@assistant-ui/react";
1111
import { Button, Flex, Input } from "antd";
12+
import { trans } from "i18n";
1213

1314
import styled from "styled-components";
1415

@@ -33,7 +34,7 @@ const ThreadListNew: FC = () => {
3334
return (
3435
<ThreadListPrimitive.New asChild>
3536
<StyledPrimaryButton size="middle" type="primary" icon={<PlusIcon size={16}/>}>
36-
New Thread
37+
{trans("chat.newThread")}
3738
</StyledPrimaryButton>
3839
</ThreadListPrimitive.New>
3940
);
@@ -69,7 +70,7 @@ const ThreadListItem: FC = () => {
6970
const ThreadListItemTitle: FC = () => {
7071
return (
7172
<p className="aui-thread-list-item-title" style={{margin: 0}}>
72-
<ThreadListItemPrimitive.Title fallback="New Chat" />
73+
<ThreadListItemPrimitive.Title fallback={trans("chat.newChatTitle")} />
7374
</p>
7475
);
7576
};
@@ -94,7 +95,7 @@ const ThreadListItemEditInput: FC<{ onFinish: () => void }> = ({ onFinish }) =>
9495
const threadItem = useThreadListItem();
9596
const threadRuntime = useThreadListItemRuntime();
9697

97-
const currentTitle = threadItem?.title || "New Chat";
98+
const currentTitle = threadItem?.title || trans("chat.newChatTitle");
9899

99100
const handleRename = async (newTitle: string) => {
100101
if (!newTitle.trim() || newTitle === currentTitle){

‎client/packages/lowcoder/src/comps/comps/chatComp/components/assistant-ui/thread.tsx

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
ThreadPrimitive,
77
} from "@assistant-ui/react";
88
import type { FC } from "react";
9+
import { trans } from "i18n";
910
import {
1011
ArrowDownIcon,
1112
CheckIcon,
@@ -54,7 +55,7 @@ import {
5455
placeholder?: string;
5556
}
5657

57-
export const Thread: FC<ThreadProps> = ({ placeholder = "Write a message..." }) => {
58+
export const Thread: FC<ThreadProps> = ({ placeholder = trans("chat.composerPlaceholder") }) => {
5859
return (
5960
<StyledThreadRoot
6061
className="aui-root aui-thread-root"
@@ -110,7 +111,7 @@ import {
110111
<div className="aui-thread-welcome-root">
111112
<div className="aui-thread-welcome-center">
112113
<p className="aui-thread-welcome-message">
113-
How can I help you today?
114+
{trans("chat.welcomeMessage")}
114115
</p>
115116
</div>
116117
<ThreadWelcomeSuggestions />
@@ -124,29 +125,29 @@ import {
124125
<div className="aui-thread-welcome-suggestions">
125126
<ThreadPrimitive.Suggestion
126127
className="aui-thread-welcome-suggestion"
127-
prompt="What is the weather in Tokyo?"
128+
prompt={trans("chat.suggestionWeather")}
128129
method="replace"
129130
autoSend
130131
>
131132
<span className="aui-thread-welcome-suggestion-text">
132-
What is the weather in Tokyo?
133+
{trans("chat.suggestionWeather")}
133134
</span>
134135
</ThreadPrimitive.Suggestion>
135136
<ThreadPrimitive.Suggestion
136137
className="aui-thread-welcome-suggestion"
137-
prompt="What is assistant-ui?"
138+
prompt={trans("chat.suggestionAssistant")}
138139
method="replace"
139140
autoSend
140141
>
141142
<span className="aui-thread-welcome-suggestion-text">
142-
What is assistant-ui?
143+
{trans("chat.suggestionAssistant")}
143144
</span>
144145
</ThreadPrimitive.Suggestion>
145146
</div>
146147
);
147148
};
148149

149-
const Composer: FC<{ placeholder?: string }> = ({ placeholder = "Write a message..." }) => {
150+
const Composer: FC<{ placeholder?: string }> = ({ placeholder = trans("chat.composerPlaceholder") }) => {
150151
return (
151152
<ComposerPrimitive.Root className="aui-composer-root">
152153
<ComposerPrimitive.Input

‎client/packages/lowcoder/src/comps/comps/chatComp/components/context/ChatContext.tsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
import React, { createContext, useContext, useReducer, useEffect, ReactNode } from "react";
44
import { ChatStorage, ChatMessage, ChatThread } from "../../types/chatTypes";
5+
import { trans } from "i18n";
56

67
// ============================================================================
78
// UPDATED CONTEXT WITH CLEAN TYPES
@@ -51,7 +52,7 @@ const initialState: ChatState = {
5152
isInitialized: false,
5253
isLoading: false,
5354
currentThreadId: "default",
54-
threadList: [{ threadId: "default", status: "regular", title: "New Chat" }],
55+
threadList: [{ threadId: "default", status: "regular", title: trans("chat.newChatTitle") }],
5556
threads: new Map([["default", []]]),
5657
lastSaved: 0,
5758
};
@@ -228,7 +229,7 @@ export function ChatProvider({ children, storage }: {
228229
const defaultThread: ChatThread = {
229230
threadId: "default",
230231
status: "regular",
231-
title: "New Chat",
232+
title: trans("chat.newChatTitle"),
232233
createdAt: Date.now(),
233234
updatedAt: Date.now(),
234235
};
@@ -252,7 +253,7 @@ export function ChatProvider({ children, storage }: {
252253
dispatch({ type: "SET_CURRENT_THREAD", threadId });
253254
};
254255

255-
const createThread = async (title: string = "New Chat"): Promise<string> => {
256+
const createThread = async (title: string = trans("chat.newChatTitle")): Promise<string> => {
256257
const threadId = `thread-${Date.now()}`;
257258
const newThread: ThreadData = {
258259
threadId,
@@ -317,7 +318,7 @@ export function ChatProvider({ children, storage }: {
317318
// if there are no threads left, create a new one
318319
// avoid infinite re-renders
319320
if (isLastThread) {
320-
const newThreadId = await createThread("New Chat");
321+
const newThreadId = await createThread(trans("chat.newChatTitle"));
321322
setCurrentThread(newThreadId);
322323
}
323324
} catch (error) {

‎client/packages/lowcoder/src/comps/index.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1684,12 +1684,12 @@ export var uiCompMap: Registry = {
16841684
},
16851685
},
16861686
chat: {
1687-
name: "Chat",
1688-
enName: "Chat",
1689-
description: "Chat Component",
1687+
name: trans("uiComp.chatCompName"),
1688+
enName: "AI Chat",
1689+
description: trans("uiComp.chatCompDesc"),
16901690
categories: ["collaboration"],
16911691
icon: CommentCompIcon, // Use existing icon for now
1692-
keywords: "chat,conversation",
1692+
keywords: trans("uiComp.chatCompKeywords"),
16931693
comp: ChatComp,
16941694
layoutInfo: {
16951695
w: 12,

0 commit comments

Comments
 (0)