.

components/sidebar/items/models/model-item.tsx

@@ -6,11 +6,15 @@ import { IconSparkles } from "@tabler/icons-react"
 import { FC, useState } from "react"
 import { SidebarItem } from "../all/sidebar-display-item"
 
+import { useTranslation } from 'react-i18next'
+
 interface ModelItemProps {
   model: Tables<"models">
 }
 
 export const ModelItem: FC<ModelItemProps> = ({ model }) => {
+  const { t } = useTranslation()
+
   const [isTyping, setIsTyping] = useState(false)
 
   const [apiKey, setApiKey] = useState(model.api_key)
@@ -39,10 +43,10 @@ export const ModelItem: FC<ModelItemProps> = ({ model }) => {
       renderInputs={() => (
         <>
           <div className="space-y-1">
-            <Label>Name</Label>
+            <Label>{t("side.name")}</Label>
 
             <Input
-              placeholder="Model name..."
+              placeholder={t("side.modelNamePlaceholder")}
               value={name}
               onChange={e => setName(e.target.value)}
               maxLength={MODEL_NAME_MAX}
@@ -50,42 +54,42 @@ export const ModelItem: FC<ModelItemProps> = ({ model }) => {
           </div>
 
           <div className="space-y-1">
-            <Label>Model ID</Label>
+            <Label>{t("side.modelId")}</Label>
 
             <Input
-              placeholder="Model ID..."
+              placeholder={t("side.modelIdPlaceholder")}
               value={modelId}
               onChange={e => setModelId(e.target.value)}
             />
           </div>
 
           <div className="space-y-1">
-            <Label>Base URL</Label>
+            <Label>{t("side.baseUrl")}</Label>
 
             <Input
-              placeholder="Base URL..."
+              placeholder={t("side.baseUrlPlaceholder")}
               value={baseUrl}
               onChange={e => setBaseUrl(e.target.value)}
             />
 
             <div className="pt-1 text-xs italic">
-              Your API must be compatible with the OpenAI SDK.
+            {t("side.apiCompatibilityNotice")}
             </div>
           </div>
 
           <div className="space-y-1">
-            <Label>API Key</Label>
+            <Label>{t("side.apiKey")}</Label>
 
             <Input
               type="password"
-              placeholder="API Key..."
+              placeholder={t("side.apiKeyPlaceholder")}
               value={apiKey}
               onChange={e => setApiKey(e.target.value)}
             />
           </div>
 
           <div className="space-y-1">
-            <Label>Max Context Length</Label>
+            <Label>{t("side.maxContextLength")}</Label>
 
             <Input
               type="number"

components/sidebar/items/presets/create-preset.tsx

@@ -7,6 +7,8 @@ import { PRESET_NAME_MAX } from "@/db/limits"
 import { TablesInsert } from "@/supabase/types"
 import { FC, useContext, useState } from "react"
 
+import { useTranslation } from 'react-i18next'
+
 interface CreatePresetProps {
   isOpen: boolean
   onOpenChange: (isOpen: boolean) => void
@@ -16,6 +18,7 @@ export const CreatePreset: FC<CreatePresetProps> = ({
   isOpen,
   onOpenChange
 }) => {
+  const { t } = useTranslation()
   const { profile, selectedWorkspace } = useContext(ChatbotUIContext)
 
   const [name, setName] = useState("")
@@ -59,10 +62,10 @@ export const CreatePreset: FC<CreatePresetProps> = ({
       renderInputs={() => (
         <>
           <div className="space-y-1">
-            <Label>Name</Label>
+            <Label>{t("side.name")}</Label>
 
             <Input
-              placeholder="Preset name..."
+              placeholder={t("side.presetNamePlaceholder")}
               value={name}
               onChange={e => setName(e.target.value)}
               maxLength={PRESET_NAME_MAX}

components/sidebar/items/presets/preset-item.tsx

@@ -8,11 +8,14 @@ import { Tables } from "@/supabase/types"
 import { FC, useState } from "react"
 import { SidebarItem } from "../all/sidebar-display-item"
 
+import { useTranslation } from 'react-i18next'
+
 interface PresetItemProps {
   preset: Tables<"presets">
 }
 
 export const PresetItem: FC<PresetItemProps> = ({ preset }) => {
+  const { t } = useTranslation()
   const [name, setName] = useState(preset.name)
   const [isTyping, setIsTyping] = useState(false)
   const [description, setDescription] = useState(preset.description)
@@ -53,10 +56,10 @@ export const PresetItem: FC<PresetItemProps> = ({ preset }) => {
       renderInputs={() => (
         <>
           <div className="space-y-1">
-            <Label>Name</Label>
+            <Label>{t("side.name")}</Label>
 
             <Input
-              placeholder="Preset name..."
+              placeholder={t("side.presetNamePlaceholder")}
               value={name}
               onChange={e => setName(e.target.value)}
               maxLength={PRESET_NAME_MAX}

components/sidebar/items/prompts/create-prompt.tsx

@@ -6,6 +6,7 @@ import { ChatbotUIContext } from "@/context/context"
 import { PROMPT_NAME_MAX } from "@/db/limits"
 import { TablesInsert } from "@/supabase/types"
 import { FC, useContext, useState } from "react"
+import { useTranslation } from 'react-i18next'
 
 interface CreatePromptProps {
   isOpen: boolean
@@ -16,6 +17,7 @@ export const CreatePrompt: FC<CreatePromptProps> = ({
   isOpen,
   onOpenChange
 }) => {
+  const { t } = useTranslation()
   const { profile, selectedWorkspace } = useContext(ChatbotUIContext)
   const [isTyping, setIsTyping] = useState(false)
   const [name, setName] = useState("")
@@ -40,10 +42,10 @@ export const CreatePrompt: FC<CreatePromptProps> = ({
       renderInputs={() => (
         <>
           <div className="space-y-1">
-            <Label>Name</Label>
+            <Label>{t("side.name")}</Label>
 
             <Input
-              placeholder="Prompt name..."
+              placeholder={t("side.promptNamePlaceholder")}
               value={name}
               onChange={e => setName(e.target.value)}
               maxLength={PROMPT_NAME_MAX}
@@ -53,10 +55,10 @@ export const CreatePrompt: FC<CreatePromptProps> = ({
           </div>
 
           <div className="space-y-1">
-            <Label>Prompt</Label>
+            <Label>{t("side.promptLabel")}</Label>
 
             <TextareaAutosize
-              placeholder="Prompt content..."
+              placeholder={t("side.promptContentPlaceholder")}
               value={content}
               onValueChange={setContent}
               minRows={6}

components/sidebar/items/prompts/prompt-item.tsx

@@ -25,10 +25,10 @@ export const PromptItem: FC<PromptItemProps> = ({ prompt }) => {
       renderInputs={() => (
         <>
           <div className="space-y-1">
-            <Label>Name</Label>
+            <Label>{t("side.name")}</Label>
 
             <Input
-              placeholder="Prompt name..."
+              placeholder={t("side.promptNamePlaceholder")}
               value={name}
               onChange={e => setName(e.target.value)}
               maxLength={PROMPT_NAME_MAX}
@@ -38,10 +38,10 @@ export const PromptItem: FC<PromptItemProps> = ({ prompt }) => {
           </div>
 
           <div className="space-y-1">
-            <Label>Prompt</Label>
+            <Label>{t("side.promptLabel")}</Label>
 
             <TextareaAutosize
-              placeholder="Prompt..."
+              placeholder={t("side.promptPlaceholderShort")} 
               value={content}
               onValueChange={setContent}
               minRows={6}

components/sidebar/items/tools/create-tool.tsx

@@ -44,10 +44,10 @@ export const CreateTool: FC<CreateToolProps> = ({ isOpen, onOpenChange }) => {
       renderInputs={() => (
         <>
           <div className="space-y-1">
-            <Label>Name</Label>
+            <Label>{t("side.name")}</Label>
 
             <Input
-              placeholder="Tool name..."
+              placeholder={t("side.toolNamePlaceholder")}
               value={name}
               onChange={e => setName(e.target.value)}
               maxLength={TOOL_NAME_MAX}
@@ -55,10 +55,10 @@ export const CreateTool: FC<CreateToolProps> = ({ isOpen, onOpenChange }) => {
           </div>
 
           <div className="space-y-1">
-            <Label>Description</Label>
+            <Label>{t("side.description")}</Label>
 
             <Input
-              placeholder="Tool description..."
+              placeholder={t("side.toolDescriptionPlaceholder")}
               value={description}
               onChange={e => setDescription(e.target.value)}
               maxLength={TOOL_DESCRIPTION_MAX}
@@ -96,7 +96,7 @@ export const CreateTool: FC<CreateToolProps> = ({ isOpen, onOpenChange }) => {
           </div> */}
 
           <div className="space-y-1">
-            <Label>Custom Headers</Label>
+            <Label>{t("side.customHeadersLabel")}</Label>
 
             <TextareaAutosize
               placeholder={`{"X-api-key": "1234567890"}`}
@@ -107,7 +107,7 @@ export const CreateTool: FC<CreateToolProps> = ({ isOpen, onOpenChange }) => {
           </div>
 
           <div className="space-y-1">
-            <Label>Schema</Label>
+            <Label>{t("side.schemaLabel")}</Label>
 
             <TextareaAutosize
               placeholder={`{

components/sidebar/items/tools/tool-item.tsx

@@ -39,7 +39,7 @@ export const ToolItem: FC<ToolItemProps> = ({ tool }) => {
       renderInputs={() => (
         <>
           <div className="space-y-1">
-            <Label>Name</Label>
+            <Label>{t("side.name")}</Label>
 
             <Input
               placeholder="Tool name..."
@@ -50,10 +50,10 @@ export const ToolItem: FC<ToolItemProps> = ({ tool }) => {
           </div>
 
           <div className="space-y-1">
-            <Label>Description</Label>
+            <Label>{t("side.description")}</Label>
 
             <Input
-              placeholder="Tool description..."
+              placeholder={t("side.toolDescriptionPlaceholder")}
               value={description}
               onChange={e => setDescription(e.target.value)}
               maxLength={TOOL_DESCRIPTION_MAX}
@@ -91,7 +91,7 @@ export const ToolItem: FC<ToolItemProps> = ({ tool }) => {
           </div> */}
 
           <div className="space-y-1">
-            <Label>Custom Headers</Label>
+            <Label>{t("side.customHeadersLabel")}</Label>
 
             <TextareaAutosize
               placeholder={`{"X-api-key": "1234567890"}`}
@@ -102,7 +102,7 @@ export const ToolItem: FC<ToolItemProps> = ({ tool }) => {
           </div>
 
           <div className="space-y-1">
-            <Label>Schema</Label>
+            <Label>{t("side.schemaLabel")}</Label>
 
             <TextareaAutosize
               placeholder={`{

public/locales/en/translation.json

@@ -192,7 +192,16 @@
     "baseUrlPlaceholder": "Base URL...",
     "apiKey": "API Key",
     "apiKeyPlaceholder": "API Key...",
-    "maxContextLength": "Max Context Length"         
+    "maxContextLength": "Max Context Length",
+    "presetNamePlaceholder": "Preset name...",
+    "promptLabel": "Prompt",
+    "promptNamePlaceholder": "Prompt name...",
+    "promptContentPlaceholder": "Prompt content...",
+    "promptPlaceholderShort": "Prompt...",
+    "toolNamePlaceholder": "Tool name...",
+    "toolDescriptionPlaceholder": "Tool description...",
+    "customHeadersLabel": "Custom Headers",
+    "schemaLabel": "Schema"         
   },
 
   "contentType": {

public/locales/ja/translation.json

@@ -191,7 +191,17 @@
       "baseUrlPlaceholder": "ベース URL...",
       "apiKey": "API キー",
       "apiKeyPlaceholder": "API キー...",
-      "maxContextLength": "最大コンテキスト長"                         
+      "maxContextLength": "最大コンテキスト長",
+      "presetNamePlaceholder": "プリセット名...",
+      "promptLabel": "プロンプト",
+      "promptNamePlaceholder": "プロンプト名...",
+      "promptContentPlaceholder": "プロンプトの内容...",
+      "promptPlaceholderShort": "プロンプト...",
+      "toolNamePlaceholder": "ツール名...",
+      "toolDescriptionPlaceholder": "ツールの説明...",
+      "customHeadersLabel": "カスタムヘッダー",
+      "schemaLabel": "スキーマ"
+                         
     },
 
     "contentType": {

public/locales/zh/translation.json

@@ -191,7 +191,16 @@
     "baseUrlPlaceholder": "基础地址...",
     "apiKey": "API 密钥",
     "apiKeyPlaceholder": "API 密钥...",
-    "maxContextLength": "最大上下文长度"                
+    "maxContextLength": "最大上下文长度",
+    "presetNamePlaceholder": "预设名称...",
+    "promptLabel": "提示词",
+    "promptNamePlaceholder": "提示词名称...",
+    "promptContentPlaceholder": "提示词内容...",
+    "promptPlaceholderShort": "提示词...",
+    "toolNamePlaceholder": "工具名称...",
+    "toolDescriptionPlaceholder": "工具描述...",
+    "customHeadersLabel": "自定义请求头",
+    "schemaLabel": "Schema"                
   },
 
   "contentType": {