@@ -17,7 +17,7 @@ import { useSideBarContext } from "app.hooks.sideBar";
1717import { useBibleContext } from "app.hooks.bibleVariables" ;
1818
1919const CanvasAiSettings = ( ) => {
20- const { sidebarMode, setSideBarMode, closePopupSettings } =
20+ const { sidebarMode, setSideBarMode, closePopupSettings, t } =
2121 useSideBarContext ( ) ;
2222
2323 // Chat AI
@@ -143,11 +143,11 @@ const CanvasAiSettings = () => {
143143 < div onClick = { ( ) => setSideBarMode ( "settings" ) } className = "blackText" >
144144 < MenuIcon name = "arrow_back" />
145145 </ div >
146- < div className = "softText" > Canvas AI settings </ div >
146+ < div className = "softText" > { t ( "canvasAiSettings" ) } </ div >
147147 < div className = "softText" >
148148 < MenuIcon name = "chevron_right" />
149149 </ div >
150- < div className = "softText" > Toolbar </ div >
150+ < div className = "softText" > { t ( "toolbar" ) } </ div >
151151 </ div >
152152
153153 < div className = "routerTitle blackText" >
@@ -157,22 +157,22 @@ const CanvasAiSettings = () => {
157157 < div > AI</ div >
158158 </ div >
159159
160- < div className = "mediumText" > Settings for AI features in the canvas </ div >
160+ < div className = "mediumText" > { t ( "canvasAiSettingsDesc" ) } </ div >
161161
162162 < div className = "ai-chat" >
163163 < div
164164 onClick = { ( ) => setSwitcher ( ( prev ) => ( prev === 1 ? null : 1 ) ) }
165165 className = "ai-chat"
166166 >
167167 < AiChatIcon />
168- < div className = "blackText" > AI Chat </ div >
168+ < div className = "blackText" > { t ( "aiChat" ) } </ div >
169169 < MenuIcon name = { `keyboard_arrow_${ switcher === 1 ? "up" : "down" } } />
170170 </ div >
171171 </ div >
172172 < div style = { { height : "20px" } } > </ div >
173173 { switcher === 1 && (
174174 < >
175- < div className = "blackText" > Select model </ div >
175+ < div className = "blackText" > { t ( "selectModel" ) } </ div >
176176 < div style = { { height : "20px" } } > </ div >
177177 < select
178178 value = { JSON . stringify ( selectedChatAI ) }
@@ -196,10 +196,9 @@ const CanvasAiSettings = () => {
196196 } ) }
197197 </ select >
198198 < div style = { { marginTop : "10px" } } className = "mediumText" >
199- Different AI models can produce different or better results so feel
200- free to experiment.
199+ { t ( "aiModelsExperiment" ) }
201200 </ div >
202- < div className = "blackText" > Positive prompt </ div >
201+ < div className = "blackText" > { t ( "positivePrompt" ) } </ div >
203202 < div style = { { height : "10px" } } > </ div >
204203 < textarea
205204 style = { { height : "150px" , width : "100%" } }
@@ -218,14 +217,14 @@ const CanvasAiSettings = () => {
218217 className = "ai-chat"
219218 >
220219 < AiChatIcon />
221- < div className = "blackText" > AI Image </ div >
220+ < div className = "blackText" > { t ( "aiImage" ) } </ div >
222221 < MenuIcon name = { `keyboard_arrow_${ switcher === 2 ? "up" : "down" } } />
223222 </ div >
224223 </ div >
225224 < div style = { { height : "20px" } } > </ div >
226225 { switcher === 2 && (
227226 < >
228- < div className = "blackText" > Select model </ div >
227+ < div className = "blackText" > { t ( "selectModel" ) } </ div >
229228 < div style = { { height : "20px" } } > </ div >
230229 < select
231230 value = { JSON . stringify ( selectedImageAI ) }
@@ -249,10 +248,9 @@ const CanvasAiSettings = () => {
249248 } ) }
250249 </ select >
251250 < div style = { { marginTop : "10px" } } className = "mediumText" >
252- Different AI models can produce different or better results so feel
253- free to experiment.
251+ { t ( "aiModelsExperiment" ) }
254252 </ div >
255- < div className = "blackText" > Positive prompt </ div >
253+ < div className = "blackText" > { t ( "positivePrompt" ) } </ div >
256254 < div style = { { height : "10px" } } > </ div >
257255 < textarea
258256 style = { { height : "150px" , width : "100%" } }
@@ -271,14 +269,14 @@ const CanvasAiSettings = () => {
271269 className = "ai-chat"
272270 >
273271 < AiChatIcon />
274- < div className = "blackText" > AI Assistant </ div >
272+ < div className = "blackText" > { t ( "aiAssistant" ) } </ div >
275273 < MenuIcon name = { `keyboard_arrow_${ switcher === 3 ? "up" : "down" } } />
276274 </ div >
277275 </ div >
278276 < div style = { { height : "20px" } } > </ div >
279277 { switcher === 3 && (
280278 < >
281- < div className = "blackText" > Select model </ div >
279+ < div className = "blackText" > { t ( "selectModel" ) } </ div >
282280 < div style = { { height : "20px" } } > </ div >
283281 < select
284282 value = { JSON . stringify ( selectedAssistantAI ) }
@@ -301,7 +299,7 @@ const CanvasAiSettings = () => {
301299 ) ;
302300 } ) }
303301 </ select >
304- < div className = "blackText" > Select voice </ div >
302+ < div className = "blackText" > { t ( "selectVoice" ) } </ div >
305303 < div style = { { height : "20px" } } > </ div >
306304 < select
307305 value = { JSON . stringify ( selectedAssistantVoice ) }
0 commit comments