@@ -2,6 +2,11 @@ import React, { useState, useEffect } from 'react';
2
2
import { SettingsService , SETTINGS_CHANGE_EVENT } from '../../services/settings-service' ;
3
3
import { Orbit , Languages , ArrowRight } from 'lucide-react' ;
4
4
import { useTranslation } from 'react-i18next' ;
5
+ import { v4 as uuidv4 } from 'uuid' ;
6
+ import { Message , MessageRole } from '../../types/chat' ;
7
+ import { AIService } from '../../services/ai-service' ;
8
+ import { StreamControlHandler } from '../../services/streaming-control' ;
9
+ import { MessageHelper } from '../../services/message-helper' ;
5
10
6
11
export const TranslationPage : React . FC = ( ) => {
7
12
const { t } = useTranslation ( ) ;
@@ -36,18 +41,115 @@ export const TranslationPage: React.FC = () => {
36
41
setError ( null ) ;
37
42
38
43
try {
39
- // This would be replaced with actual translation logic
40
- // using a language model API
41
- setTimeout ( ( ) => {
42
- setTranslatedText ( sourceText ) ;
43
- setIsTranslating ( false ) ;
44
- } , 1000 ) ;
44
+ const settingsService = SettingsService . getInstance ( ) ;
45
+ const provider = settingsService . getSelectedProvider ( ) ;
46
+ const model = settingsService . getSelectedModel ( ) ;
47
+
48
+ // Create conversation ID (just for streaming handler, won't be stored)
49
+ const tempConversationId = uuidv4 ( ) ;
50
+
51
+ // Create messages for translation
52
+ const messages = createTranslationMessages ( tempConversationId , sourceText , targetLanguage ) ;
53
+
54
+ // Create placeholder message for streaming
55
+ const placeholderMessage = MessageHelper . getPlaceholderMessage ( model , provider , tempConversationId ) ;
56
+ placeholderMessage . fatherMessageId = messages [ 0 ] . messageId ;
57
+
58
+ // Create stream controller for handling the response
59
+ const streamController = new StreamControlHandler (
60
+ // We create a minimal conversation object just for the StreamControlHandler
61
+ {
62
+ conversationId : tempConversationId ,
63
+ folderId : '' ,
64
+ title : 'Translation' ,
65
+ firstMessageId : messages [ 0 ] . messageId ,
66
+ messages : new Map ( [ [ placeholderMessage . messageId , placeholderMessage ] ] ) ,
67
+ createdAt : new Date ( ) ,
68
+ updatedAt : new Date ( ) ,
69
+ messageInput : ''
70
+ } ,
71
+ placeholderMessage ,
72
+ // On chunk callback
73
+ ( updatedConversation ) => {
74
+ const updatedMessage = updatedConversation . messages . get ( placeholderMessage . messageId ) ;
75
+ if ( updatedMessage ) {
76
+ setTranslatedText ( MessageHelper . MessageContentToText ( updatedMessage . content ) ) ;
77
+ }
78
+ } ,
79
+ // On finish callback
80
+ ( aiResponse ) => {
81
+ setIsTranslating ( false ) ;
82
+ if ( aiResponse ) {
83
+ setTranslatedText ( MessageHelper . MessageContentToText ( aiResponse . content ) ) ;
84
+ }
85
+ }
86
+ ) ;
87
+
88
+ // Send to AI service
89
+ await AIService . getInstance ( ) . getChatCompletion (
90
+ messages ,
91
+ {
92
+ model,
93
+ provider,
94
+ stream : true
95
+ } ,
96
+ streamController
97
+ ) ;
45
98
} catch ( err ) {
46
99
setError ( err as Error ) ;
47
100
setIsTranslating ( false ) ;
48
101
}
49
102
} ;
50
103
104
+ // Create messages for translation
105
+ const createTranslationMessages = ( conversationId : string , text : string , targetLang : string ) : Message [ ] => {
106
+ // Create a system message with translation instructions
107
+ const systemMessage : Message = {
108
+ messageId : uuidv4 ( ) ,
109
+ conversationId,
110
+ role : 'system' as MessageRole ,
111
+ content : MessageHelper . pureTextMessage (
112
+ `You are a translation assistant. Detect the source language of the text and translate it to ${ getLanguageName ( targetLang ) } .
113
+ Only return the translated text without any explanations, notes, or decorations.
114
+ Do not include any text that is not in the original input.`
115
+ ) ,
116
+ timestamp : new Date ( ) ,
117
+ provider : SettingsService . getInstance ( ) . getSelectedProvider ( ) ,
118
+ model : SettingsService . getInstance ( ) . getSelectedModel ( ) ,
119
+ tokens : 0 ,
120
+ fatherMessageId : null ,
121
+ childrenMessageIds : [ ] ,
122
+ preferIndex : - 1
123
+ } ;
124
+
125
+ // Create the user message with text to translate
126
+ const userMessage : Message = {
127
+ messageId : uuidv4 ( ) ,
128
+ conversationId,
129
+ role : 'user' as MessageRole ,
130
+ content : MessageHelper . pureTextMessage ( text ) ,
131
+ timestamp : new Date ( ) ,
132
+ provider : 'user' ,
133
+ model : 'user' ,
134
+ tokens : 0 ,
135
+ fatherMessageId : systemMessage . messageId ,
136
+ childrenMessageIds : [ ] ,
137
+ preferIndex : - 1
138
+ } ;
139
+
140
+ // Link messages
141
+ systemMessage . childrenMessageIds . push ( userMessage . messageId ) ;
142
+ systemMessage . preferIndex = 0 ;
143
+
144
+ return [ systemMessage , userMessage ] ;
145
+ } ;
146
+
147
+ // Get language name from code
148
+ const getLanguageName = ( code : string ) : string => {
149
+ const language = languages . find ( lang => lang . code === code ) ;
150
+ return language ? language . name : code ;
151
+ } ;
152
+
51
153
// Languages for dropdown
52
154
const languages = [
53
155
{ code : 'auto' , name : t ( 'translation.autoDetect' ) } ,
@@ -83,17 +185,9 @@ export const TranslationPage: React.FC = () => {
83
185
{ t ( 'translation.title' ) }
84
186
</ h1 >
85
187
86
- < select
87
- value = { sourceLanguage }
88
- onChange = { ( e ) => setSourceLanguage ( e . target . value ) }
89
- className = "px-4 py-2 input-box"
90
- >
91
- { languages . map ( ( lang ) => (
92
- < option key = { `source-${ lang . code } ` } value = { lang . code } >
93
- { lang . name }
94
- </ option >
95
- ) ) }
96
- </ select >
188
+ < span className = "text-sm text-light-hint" >
189
+ { t ( 'translation.sourceLanguageWithAutoSelected' ) }
190
+ </ span >
97
191
</ div >
98
192
99
193
< button
0 commit comments