Skip to content

Commit 9aa34be

Browse files
iamfaranraheeliftikhar5
iamfaran
authored and
raheeliftikhar5
committed
add translations for the chat component
1 parent 30ac72f commit 9aa34be

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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy