feat(settings): Integrate commit language control into AI commit messages experimental feature

The commit language setting has been refactored and moved from the general language settings section. It is now managed by a new dedicated component, .

This component is conditionally rendered within the  section, specifically when the  experimental feature is active. This change ensures that the commit language option is logically grouped with the AI commit message functionality it directly supports, improving the clarity and organization of settings.

Additionally, minor styling adjustments were applied to the  component for improved layout.

Author: zapp88

webview-ui/src/components/settings/CommitLanguageSettings.tsx

@@ -0,0 +1,54 @@
+import { HTMLAttributes } from "react"
+import type { Language } from "@roo-code/types"
+import { LANGUAGES } from "@roo/language"
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@src/components/ui"
+import { cn } from "@src/lib/utils"
+import { useAppTranslation } from "@/i18n/TranslationContext"
+import { SetCachedStateField } from "./types"
+
+type CommitLanguageSettingsProps = HTMLAttributes<HTMLDivElement> & {
+	commitLanguage: string
+	setCachedStateField: SetCachedStateField<"commitLanguage">
+	aiCommitMessagesEnabled?: boolean // Dodano prop
+}
+
+export const CommitLanguageSettings = ({
+	commitLanguage,
+	setCachedStateField,
+	aiCommitMessagesEnabled, // Dodano do destrukturyzacji
+	className,
+	...props
+}: CommitLanguageSettingsProps) => {
+	const { t } = useAppTranslation()
+
+	return (
+		<>
+			{aiCommitMessagesEnabled && ( // Warunkowe renderowanie z wcięciem i paskiem
+				<div
+					className={cn("flex flex-col gap-3 pl-3 border-l-2 border-vscode-button-background", className)}
+					{...props}>
+					<div className="text-sm text-vscode-descriptionForeground">
+						{t("settings:sections.commitLanguage")}
+					</div>
+					<Select
+						value={commitLanguage}
+						onValueChange={(value) => setCachedStateField("commitLanguage", value as Language)}>
+						<SelectTrigger className="w-full">
+							<SelectValue placeholder={t("settings:common.select")} />
+						</SelectTrigger>
+						<SelectContent>
+							<SelectGroup>
+								{Object.entries(LANGUAGES).map(([code, name]) => (
+									<SelectItem key={code} value={code}>
+										{name}
+										<span className="text-muted-foreground">({code})</span>
+									</SelectItem>
+								))}
+							</SelectGroup>
+						</SelectContent>
+					</Select>
+				</div>
+			)}
+		</>
+	)
+}

webview-ui/src/components/settings/ExperimentalFeature.tsx

@@ -16,7 +16,9 @@ export const ExperimentalFeature = ({ enabled, onChange, experimentKey }: Experi
 	const descriptionKey = experimentKey ? `settings:experimental.${experimentKey}.description` : ""
 
 	return (
-		<div>
+		<div className="flex flex-col gap-2">
+			{" "}
+			{/* Dodano flex-col i gap-2 */}
 			<div className="flex items-center gap-2">
 				<VSCodeCheckbox checked={enabled} onChange={(e: any) => onChange(e.target.checked)}>
 					<span className="font-medium">{t(nameKey)}</span>

webview-ui/src/components/settings/ExperimentalSettings.tsx

@@ -1,7 +1,7 @@
 import { HTMLAttributes } from "react"
 import { FlaskConical } from "lucide-react"
 
-import type { Experiments, CodebaseIndexConfig, CodebaseIndexModels, ProviderSettings } from "@roo-code/types"
+import type { Experiments, CodebaseIndexConfig, CodebaseIndexModels, ProviderSettings, Language } from "@roo-code/types"
 
 import { EXPERIMENT_IDS, experimentConfigsMap } from "@roo/experiments"
 
@@ -14,17 +14,19 @@ import { SectionHeader } from "./SectionHeader"
 import { Section } from "./Section"
 import { ExperimentalFeature } from "./ExperimentalFeature"
 import { CodeIndexSettings } from "./CodeIndexSettings"
+import { CommitLanguageSettings } from "./CommitLanguageSettings"
 
 type ExperimentalSettingsProps = HTMLAttributes<HTMLDivElement> & {
 	experiments: Experiments
 	setExperimentEnabled: SetExperimentEnabled
-	setCachedStateField: SetCachedStateField<"codebaseIndexConfig">
+	setCachedStateField: SetCachedStateField<"codebaseIndexConfig" | "commitLanguage"> // Combined the types
 	// CodeIndexSettings props
 	codebaseIndexModels: CodebaseIndexModels | undefined
 	codebaseIndexConfig: CodebaseIndexConfig | undefined
 	apiConfiguration: ProviderSettings
 	setApiConfigurationField: <K extends keyof ProviderSettings>(field: K, value: ProviderSettings[K]) => void
 	areSettingsCommitted: boolean
+	commitLanguage: Language
 }
 
 export const ExperimentalSettings = ({
@@ -36,6 +38,7 @@ export const ExperimentalSettings = ({
 	apiConfiguration,
 	setApiConfigurationField,
 	areSettingsCommitted,
+	commitLanguage,
 	className,
 	...props
 }: ExperimentalSettingsProps) => {
@@ -65,6 +68,27 @@ export const ExperimentalSettings = ({
 									}
 								/>
 							)
+						} else if (config[0] === "AI_COMMIT_MESSAGES") {
+							// Dodano warunek dla AI_COMMIT_MESSAGES
+							return (
+								<>
+									<ExperimentalFeature
+										key={config[0]}
+										experimentKey={config[0]}
+										enabled={experiments[EXPERIMENT_IDS.AI_COMMIT_MESSAGES] ?? false}
+										onChange={(enabled) =>
+											setExperimentEnabled(EXPERIMENT_IDS.AI_COMMIT_MESSAGES, enabled)
+										}
+									/>
+									<CommitLanguageSettings
+										commitLanguage={commitLanguage}
+										setCachedStateField={
+											setCachedStateField as SetCachedStateField<"commitLanguage">
+										}
+										aiCommitMessagesEnabled={experiments?.aiCommitMessages} // Przekazujemy prop
+									/>
+								</>
+							)
 						}
 						return (
 							<ExperimentalFeature

webview-ui/src/components/settings/LanguageSettings.tsx

@@ -15,19 +15,10 @@ import { Section } from "./Section"
 
 type LanguageSettingsProps = HTMLAttributes<HTMLDivElement> & {
 	language: string
-	commitLanguage: string
-	setCachedStateField: SetCachedStateField<"language" | "commitLanguage">
-	aiCommitMessagesEnabled?: boolean
+	setCachedStateField: SetCachedStateField<"language">
 }
 
-export const LanguageSettings = ({
-	language,
-	commitLanguage,
-	setCachedStateField,
-	aiCommitMessagesEnabled,
-	className,
-	...props
-}: LanguageSettingsProps) => {
+export const LanguageSettings = ({ language, setCachedStateField, className, ...props }: LanguageSettingsProps) => {
 	const { t } = useAppTranslation()
 
 	return (
@@ -56,30 +47,6 @@ export const LanguageSettings = ({
 						</SelectGroup>
 					</SelectContent>
 				</Select>
-				{aiCommitMessagesEnabled && (
-					<>
-						<div className="text-sm text-vscode-descriptionForeground">
-							{t("settings:sections.commitLanguage")}
-						</div>
-						<Select
-							value={commitLanguage}
-							onValueChange={(value) => setCachedStateField("commitLanguage", value as Language)}>
-							<SelectTrigger className="w-full">
-								<SelectValue placeholder={t("settings:common.select")} />
-							</SelectTrigger>
-							<SelectContent>
-								<SelectGroup>
-									{Object.entries(LANGUAGES).map(([code, name]) => (
-										<SelectItem key={code} value={code}>
-											{name}
-											<span className="text-muted-foreground">({code})</span>
-										</SelectItem>
-									))}
-								</SelectGroup>
-							</SelectContent>
-						</Select>
-					</>
-				)}
 			</Section>
 		</div>
 	)

webview-ui/src/components/settings/SettingsView.tsx

@@ -685,22 +685,23 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 						<ExperimentalSettings
 							setExperimentEnabled={setExperimentEnabled}
 							experiments={experiments}
-							setCachedStateField={setCachedStateField}
+							setCachedStateField={
+								setCachedStateField as SetCachedStateField<"codebaseIndexConfig" | "commitLanguage">
+							}
 							codebaseIndexModels={codebaseIndexModels}
 							codebaseIndexConfig={codebaseIndexConfig}
 							apiConfiguration={apiConfiguration}
 							setApiConfigurationField={setApiConfigurationField}
 							areSettingsCommitted={!isChangeDetected}
+							commitLanguage={commitLanguage || "en"}
 						/>
 					)}
 
 					{/* Language Section */}
 					{activeTab === "language" && (
 						<LanguageSettings
 							language={language || "en"}
-							commitLanguage={commitLanguage || "en"}
-							setCachedStateField={setCachedStateField}
-							aiCommitMessagesEnabled={experiments?.aiCommitMessages}
+							setCachedStateField={setCachedStateField as SetCachedStateField<"language">}
 						/>
 					)}