feat(ui): expose database dialect selection and sync backend

Author: KariHall619

frontend/src/App.vue

@@ -17,6 +17,8 @@
         :provider="config.provider"
         :status="inputStatus"
         :disabled="isInputDisabled"
+        v-model:database-dialect="databaseDialect"
+        :dialect-options="dialectOptions"
         @submit="handleQuery"
         @open-settings="showSettings = true"
       />
@@ -29,7 +31,6 @@
       :models-map="modelsByProvider"
       v-model:include-explanation="includeExplanation"
       @save="handleSave"
-      @test-connection="handleTest"
       @refresh-models="refreshModels"
     />
   </div>
@@ -38,7 +39,7 @@
 <script setup lang="ts">
 import { ref, provide, computed } from 'vue'
 import { ElMessage } from 'element-plus'
-import type { AppContext, AIConfig } from './types'
+import type { AppContext, AIConfig, DatabaseDialect } from './types'
 import { useAIChat } from './composables/useAIChat'
 import AIChatHeader from './components/AIChatHeader.vue'
 import AIChatMessages from './components/AIChatMessages.vue'
@@ -72,9 +73,19 @@ const {
   refreshModels
 } = useAIChat(pluginContext)
 
+if (!config.value.databaseDialect) {
+  config.value.databaseDialect = 'mysql'
+}
+
 // UI state
 const showSettings = ref(false)
 const includeExplanation = ref(false)
+const databaseDialect = computed<DatabaseDialect>({
+  get: () => config.value.databaseDialect ?? 'mysql',
+  set: (value) => {
+    config.value.databaseDialect = value
+  }
+})
 
 const inputStatus = computed<'connected' | 'disconnected' | 'connecting' | 'setup'>(() => {
   if (!isConfigured.value) {
@@ -87,6 +98,11 @@ const isInputDisabled = computed(() => inputStatus.value !== 'connected')
 
 // Get translation function from context
 const { t } = pluginContext.i18n
+const dialectOptions = computed(() => ([
+  { value: 'mysql' as DatabaseDialect, label: t('ai.dialect.mysql') },
+  { value: 'postgresql' as DatabaseDialect, label: t('ai.dialect.postgresql') },
+  { value: 'sqlite' as DatabaseDialect, label: t('ai.dialect.sqlite') }
+]))
 
 // Save configuration
 async function handleSave() {
@@ -137,6 +153,7 @@ async function handleTest(updatedConfig?: AIConfig) {
   flex-direction: column;
   width: 100%;
   height: 100%;
+  max-height: 100%;
   min-height: 0;
   padding: clamp(16px, 4vw, 32px);
   box-sizing: border-box;
@@ -162,6 +179,7 @@ async function handleTest(updatedConfig?: AIConfig) {
   box-shadow: var(--atest-shadow-md);
   padding: clamp(12px, 3vw, 24px);
   min-height: 0;
+  max-height: 100%;
 }
 
 @media (max-width: 1024px) {
@@ -194,6 +212,20 @@ async function handleTest(updatedConfig?: AIConfig) {
 </style>
 
 <style>
+:global(html) {
+  height: 100%;
+}
+
+:global(body) {
+  height: 100%;
+  margin: 0;
+  background: var(--atest-bg-base);
+}
+
+:global(#app) {
+  height: 100%;
+}
+
 :global(#plugin-container) {
   height: 100%;
   display: flex;

frontend/src/components/AIChatInput.vue

@@ -37,11 +37,26 @@
 
     <div class="input-footer">
       <div class="footer-left">
+        <el-tooltip :content="dialectTooltip" placement="top">
+          <el-select
+            v-model="dialectModel"
+            class="dialect-select"
+            size="small"
+            :disabled="props.loading"
+          >
+            <el-option
+              v-for="option in props.dialectOptions"
+              :key="option.value"
+              :label="option.label"
+              :value="option.value"
+            />
+          </el-select>
+        </el-tooltip>
         <el-tooltip :content="configureTooltip" placement="top">
           <el-button
             class="footer-btn configure-btn"
             type="default"
-            :disabled="props.disabled"
+            :disabled="props.loading"
             @click="emit('open-settings')"
           >
             <el-icon><Setting /></el-icon>
@@ -66,22 +81,31 @@
 </template>
 
 <script setup lang="ts">
-import { ref, inject, computed } from 'vue'
+import { ref, inject, computed, withDefaults } from 'vue'
 import { Promotion, Setting, WarningFilled, InfoFilled } from '@element-plus/icons-vue'
-import type { AppContext } from '../types'
+import type { AppContext, DatabaseDialect } from '../types'
 
 interface Props {
   loading: boolean
   includeExplanation: boolean
   provider: string
   status: 'connected' | 'disconnected' | 'connecting' | 'setup'
   disabled: boolean
-}
-const props = defineProps<Props>()
+  databaseDialect: DatabaseDialect
+  dialectOptions: Array<{ value: DatabaseDialect; label: string }>
+}
+const props = withDefaults(defineProps<Props>(), {
+  dialectOptions: () => [
+    { value: 'mysql' as DatabaseDialect, label: 'MySQL' },
+    { value: 'postgresql' as DatabaseDialect, label: 'PostgreSQL' },
+    { value: 'sqlite' as DatabaseDialect, label: 'SQLite' }
+  ]
+})
 
 interface Emits {
-  (e: 'submit', prompt: string, options: { includeExplanation: boolean }): void
+  (e: 'submit', prompt: string, options: { includeExplanation: boolean; databaseDialect: DatabaseDialect }): void
   (e: 'open-settings'): void
+  (e: 'update:databaseDialect', dialect: DatabaseDialect): void
 }
 const emit = defineEmits<Emits>()
 
@@ -94,6 +118,7 @@ const prompt = ref('')
 
 const configureTooltip = computed(() => t('ai.tooltip.configure'))
 const generateTooltip = computed(() => (props.loading ? t('ai.message.generating') : t('ai.tooltip.generate')))
+const dialectTooltip = computed(() => t('ai.tooltip.dialect'))
 
 const providerKey = computed(() => (props.provider === 'local' ? 'ollama' : props.provider))
 const providerLabel = computed(() => {
@@ -131,11 +156,17 @@ const statusIcon = computed(() => {
 const showStatusBanner = computed(() => props.status === 'disconnected' || props.status === 'setup')
 const showConfigureLink = showStatusBanner
 
+const dialectModel = computed({
+  get: () => props.databaseDialect,
+  set: (value: DatabaseDialect) => emit('update:databaseDialect', value)
+})
+
 function handleSubmit() {
   if (!prompt.value.trim() || props.loading || props.disabled) return
 
   emit('submit', prompt.value, {
-    includeExplanation: props.includeExplanation
+    includeExplanation: props.includeExplanation,
+    databaseDialect: props.databaseDialect
   })
 
   // Clear input after submit
@@ -205,6 +236,7 @@ function handleSubmit() {
 .footer-right {
   display: flex;
   align-items: center;
+  gap: var(--atest-spacing-xs);
 }
 
 .footer-left {
@@ -215,6 +247,15 @@ function handleSubmit() {
   justify-content: flex-end;
 }
 
+.dialect-select {
+  min-width: 170px;
+}
+
+.dialect-select :deep(.el-select__wrapper),
+.dialect-select :deep(.el-input__wrapper) {
+  border-radius: 10px;
+}
+
 .footer-btn {
   display: inline-flex;
   justify-content: center;
@@ -306,6 +347,20 @@ function handleSubmit() {
     min-height: 112px;
   }
 
+  .input-footer {
+    grid-template-columns: 1fr;
+  }
+
+  .footer-left,
+  .footer-right {
+    justify-content: space-between;
+  }
+
+  .dialect-select {
+    flex: 1;
+    min-width: 0;
+  }
+
   .footer-btn {
     width: 44px;
     height: 44px;

frontend/src/components/AIChatMessages.vue

@@ -41,8 +41,14 @@
             <pre class="sql-code">{{ message.sql }}</pre>
           </div>
           <div v-if="message.meta" class="message-meta">
-            <el-tag size="small" effect="plain">{{ message.meta.model }}</el-tag>
-            <span class="meta-time">{{ message.meta.duration }}ms</span>
+            <el-tag v-if="message.meta.model" size="small" effect="plain">{{ message.meta.model }}</el-tag>
+            <el-tag
+              v-if="message.meta.dialect"
+              size="small"
+              effect="plain"
+              class="dialect-tag"
+            >{{ formatDialect(message.meta.dialect) }}</el-tag>
+            <span v-if="message.meta.duration" class="meta-time">{{ message.meta.duration }}ms</span>
           </div>
         </div>
         <div class="message-time">
@@ -95,6 +101,16 @@ function formatTime(timestamp: number): string {
   return date.toLocaleTimeString()
 }
 
+function formatDialect(dialect: string): string {
+  if (!dialect) {
+    return ''
+  }
+  const normalized = dialect.toLowerCase()
+  const key = `ai.dialect.${normalized}`
+  const label = t(key)
+  return label === key ? normalized : label
+}
+
 async function copySQL(sql: string) {
   try {
     await navigator.clipboard.writeText(sql)
@@ -317,6 +333,10 @@ async function copySQL(sql: string) {
   font-size: 12px;
 }
 
+.dialect-tag {
+  letter-spacing: 0.3px;
+}
+
 .message-ai .message-meta {
   color: var(--atest-text-regular);
 }

frontend/src/components/AISettingsPanel.vue

@@ -288,10 +288,6 @@
         <el-button @click="emit('update:visible', false)">
           {{ t('ai.button.close') }}
         </el-button>
-        <el-button @click="handleTestConnectionClick">
-          <el-icon><Connection /></el-icon>
-          {{ t('ai.button.testConnection') }}
-        </el-button>
         <el-button type="primary" @click="handleSave">
           <el-icon><Check /></el-icon>
           {{ t('ai.button.save') }}
@@ -309,7 +305,6 @@ import {
   Cloudy as CloudIcon,
   Cpu,
   MagicStick,
-  Connection,
   Check
 } from '@element-plus/icons-vue'
 import { ElMessage } from 'element-plus'
@@ -328,7 +323,6 @@ const props = defineProps<Props>()
 interface Emits {
   (e: 'update:visible', value: boolean): void
   (e: 'save'): void
-  (e: 'test-connection', value: AIConfig): void
   (e: 'refresh-models', provider?: Provider): void
   (e: 'update:include-explanation', value: boolean): void
 }
@@ -421,10 +415,6 @@ function handleSave() {
   Object.assign(props.config, localConfig.value)
   emit('save')
 }
-
-function handleTestConnectionClick() {
-  emit('test-connection', { ...localConfig.value })
-}
 </script>
 
 <style scoped>

frontend/src/composables/useAIChat.ts

@@ -1,5 +1,5 @@
 import { ref, computed, watch } from 'vue'
-import type { AppContext, AIConfig, Message, Model } from '@/types'
+import type { AppContext, AIConfig, Message, Model, DatabaseDialect } from '@/types'
 import { loadConfig, loadConfigForProvider, saveConfig, getMockModels, generateId, type Provider } from '@/utils/config'
 import { aiService } from '@/services/aiService'
 
@@ -106,7 +106,7 @@ export function useAIChat(_context: AppContext) {
   /**
    * Handle query submission
    */
-  async function handleQuery(prompt: string, options: { includeExplanation: boolean }) {
+  async function handleQuery(prompt: string, options: { includeExplanation: boolean; databaseDialect: DatabaseDialect }) {
     console.log('🎯 [useAIChat] handleQuery called', {
       prompt,
       options,
@@ -143,7 +143,8 @@ export function useAIChat(_context: AppContext) {
         prompt,
         timeout: config.value.timeout,
         maxTokens: config.value.maxTokens,
-        includeExplanation: options.includeExplanation
+        includeExplanation: options.includeExplanation,
+        databaseDialect: options.databaseDialect ?? config.value.databaseDialect ?? 'mysql'
       })
 
       console.log('✅ [useAIChat] Received response', {

frontend/src/locales/en.json

@@ -25,13 +25,13 @@
     "save": "Save",
     "reset": "Reset",
     "refresh": "Refresh",
-    "testConnection": "Test Connection",
     "close": "Close",
     "copy": "Copy"
   },
   "tooltip": {
     "configure": "Open AI settings",
-    "generate": "Generate SQL"
+    "generate": "Generate SQL",
+    "dialect": "Select database dialect"
   },
     "input": {
       "placeholder": "Enter your query in natural language..."
@@ -61,6 +61,12 @@
         "description": "Powerful reasoning AI"
       }
     },
+    "dialect": {
+      "label": "Database",
+      "mysql": "MySQL",
+      "postgresql": "PostgreSQL",
+      "sqlite": "SQLite"
+    },
     "providerLabel": "Provider",
   "message": {
     "configSaved": "Configuration saved successfully",

frontend/src/locales/zh.json

@@ -25,13 +25,13 @@
     "save": "保存",
     "reset": "重置",
     "refresh": "刷新",
-    "testConnection": "测试连接",
     "close": "关闭",
     "copy": "复制"
   },
   "tooltip": {
     "configure": "打开设置",
-    "generate": "生成 SQL"
+    "generate": "生成 SQL",
+    "dialect": "选择目标数据库方言"
   },
     "input": {
       "placeholder": "用自然语言输入您的查询..."
@@ -61,6 +61,12 @@
         "description": "强大的推理 AI"
       }
     },
+    "dialect": {
+      "label": "数据库",
+      "mysql": "MySQL",
+      "postgresql": "PostgreSQL",
+      "sqlite": "SQLite"
+    },
     "providerLabel": "当前服务商",
   "message": {
     "configSaved": "配置保存成功",