feat: Add support for slash commands, optimize command selector logic. (#24723)

web/app/components/goto-anything/actions/commands/account.tsx

@@ -0,0 +1,44 @@
+import type { SlashCommandHandler } from './types'
+import React from 'react'
+import { RiUser3Line } from '@remixicon/react'
+import i18n from '@/i18n-config/i18next-config'
+import { registerCommands, unregisterCommands } from './command-bus'
+
+// Account command dependency types - no external dependencies needed
+type AccountDeps = Record<string, never>
+
+/**
+ * Account command - Navigates to account page
+ */
+export const accountCommand: SlashCommandHandler<AccountDeps> = {
+  name: 'account',
+  description: 'Navigate to account page',
+
+  async search(args: string, locale: string = 'en') {
+    return [{
+      id: 'account',
+      title: i18n.t('common.account.account', { lng: locale }),
+      description: i18n.t('app.gotoAnything.actions.accountDesc', { lng: locale }),
+      type: 'command' as const,
+      icon: (
+        <div className='flex h-6 w-6 items-center justify-center rounded-md border-[0.5px] border-divider-regular bg-components-panel-bg'>
+          <RiUser3Line className='h-4 w-4 text-text-tertiary' />
+        </div>
+      ),
+      data: { command: 'navigation.account', args: {} },
+    }]
+  },
+
+  register(_deps: AccountDeps) {
+    registerCommands({
+      'navigation.account': async (_args) => {
+        // Navigate to account page
+        window.location.href = '/account'
+      },
+    })
+  },
+
+  unregister() {
+    unregisterCommands(['navigation.account'])
+  },
+}

web/app/components/goto-anything/actions/commands/community.tsx

@@ -0,0 +1,43 @@
+import type { SlashCommandHandler } from './types'
+import React from 'react'
+import { RiDiscordLine } from '@remixicon/react'
+import i18n from '@/i18n-config/i18next-config'
+import { registerCommands, unregisterCommands } from './command-bus'
+
+// Community command dependency types
+type CommunityDeps = Record<string, never>
+
+/**
+ * Community command - Opens Discord community
+ */
+export const communityCommand: SlashCommandHandler<CommunityDeps> = {
+  name: 'community',
+  description: 'Open community Discord',
+  async search(args: string, locale: string = 'en') {
+    return [{
+      id: 'community',
+      title: i18n.t('common.userProfile.community', { lng: locale }),
+      description: i18n.t('app.gotoAnything.actions.communityDesc', { lng: locale }) || 'Open Discord community',
+      type: 'command' as const,
+      icon: (
+        <div className='flex h-6 w-6 items-center justify-center rounded-md border-[0.5px] border-divider-regular bg-components-panel-bg'>
+          <RiDiscordLine className='h-4 w-4 text-text-tertiary' />
+        </div>
+      ),
+      data: { command: 'navigation.community', args: { url: 'https://discord.gg/5AEfbxcd9k' } },
+    }]
+  },
+
+  register(_deps: CommunityDeps) {
+    registerCommands({
+      'navigation.community': async (args) => {
+        const url = args?.url || 'https://discord.gg/5AEfbxcd9k'
+        window.open(url, '_blank', 'noopener,noreferrer')
+      },
+    })
+  },
+
+  unregister() {
+    unregisterCommands(['navigation.community'])
+  },
+}

web/app/components/goto-anything/actions/commands/doc.tsx

@@ -0,0 +1,44 @@
+import type { SlashCommandHandler } from './types'
+import React from 'react'
+import { RiBookOpenLine } from '@remixicon/react'
+import i18n from '@/i18n-config/i18next-config'
+import { registerCommands, unregisterCommands } from './command-bus'
+import { defaultDocBaseUrl } from '@/context/i18n'
+
+// Documentation command dependency types - no external dependencies needed
+type DocDeps = Record<string, never>
+
+/**
+ * Documentation command - Opens help documentation
+ */
+export const docCommand: SlashCommandHandler<DocDeps> = {
+  name: 'doc',
+  description: 'Open documentation',
+  async search(args: string, locale: string = 'en') {
+    return [{
+      id: 'doc',
+      title: i18n.t('common.userProfile.helpCenter', { lng: locale }),
+      description: i18n.t('app.gotoAnything.actions.docDesc', { lng: locale }) || 'Open help documentation',
+      type: 'command' as const,
+      icon: (
+        <div className='flex h-6 w-6 items-center justify-center rounded-md border-[0.5px] border-divider-regular bg-components-panel-bg'>
+          <RiBookOpenLine className='h-4 w-4 text-text-tertiary' />
+        </div>
+      ),
+      data: { command: 'navigation.doc', args: {} },
+    }]
+  },
+
+  register(_deps: DocDeps) {
+    registerCommands({
+      'navigation.doc': async (_args) => {
+        const url = `${defaultDocBaseUrl}`
+        window.open(url, '_blank', 'noopener,noreferrer')
+      },
+    })
+  },
+
+  unregister() {
+    unregisterCommands(['navigation.doc'])
+  },
+}

web/app/components/goto-anything/actions/commands/feedback.tsx

@@ -0,0 +1,43 @@
+import type { SlashCommandHandler } from './types'
+import React from 'react'
+import { RiFeedbackLine } from '@remixicon/react'
+import i18n from '@/i18n-config/i18next-config'
+import { registerCommands, unregisterCommands } from './command-bus'
+
+// Feedback command dependency types
+type FeedbackDeps = Record<string, never>
+
+/**
+ * Feedback command - Opens GitHub feedback discussions
+ */
+export const feedbackCommand: SlashCommandHandler<FeedbackDeps> = {
+  name: 'feedback',
+  description: 'Open feedback discussions',
+  async search(args: string, locale: string = 'en') {
+    return [{
+      id: 'feedback',
+      title: i18n.t('common.userProfile.communityFeedback', { lng: locale }),
+      description: i18n.t('app.gotoAnything.actions.feedbackDesc', { lng: locale }) || 'Open community feedback discussions',
+      type: 'command' as const,
+      icon: (
+        <div className='flex h-6 w-6 items-center justify-center rounded-md border-[0.5px] border-divider-regular bg-components-panel-bg'>
+          <RiFeedbackLine className='h-4 w-4 text-text-tertiary' />
+        </div>
+      ),
+      data: { command: 'navigation.feedback', args: { url: 'https://github.com/langgenius/dify/discussions/categories/feedbacks' } },
+    }]
+  },
+
+  register(_deps: FeedbackDeps) {
+    registerCommands({
+      'navigation.feedback': async (args) => {
+        const url = args?.url || 'https://github.com/langgenius/dify/discussions/categories/feedbacks'
+        window.open(url, '_blank', 'noopener,noreferrer')
+      },
+    })
+  },
+
+  unregister() {
+    unregisterCommands(['navigation.feedback'])
+  },
+}

web/app/components/goto-anything/actions/commands/slash.tsx

@@ -7,6 +7,10 @@ import { useTheme } from 'next-themes'
 import { setLocaleOnClient } from '@/i18n-config'
 import { themeCommand } from './theme'
 import { languageCommand } from './language'
+import { feedbackCommand } from './feedback'
+import { docCommand } from './doc'
+import { communityCommand } from './community'
+import { accountCommand } from './account'
 import i18n from '@/i18n-config/i18next-config'
 
 export const slashAction: ActionItem = {
@@ -30,12 +34,20 @@ export const registerSlashCommands = (deps: Record<string, any>) => {
   // Register command handlers to the registry system with their respective dependencies
   slashCommandRegistry.register(themeCommand, { setTheme: deps.setTheme })
   slashCommandRegistry.register(languageCommand, { setLocale: deps.setLocale })
+  slashCommandRegistry.register(feedbackCommand, {})
+  slashCommandRegistry.register(docCommand, {})
+  slashCommandRegistry.register(communityCommand, {})
+  slashCommandRegistry.register(accountCommand, {})
 }
 
 export const unregisterSlashCommands = () => {
   // Remove command handlers from registry system (automatically calls each command's unregister method)
   slashCommandRegistry.unregister('theme')
   slashCommandRegistry.unregister('language')
+  slashCommandRegistry.unregister('feedback')
+  slashCommandRegistry.unregister('doc')
+  slashCommandRegistry.unregister('community')
+  slashCommandRegistry.unregister('account')
 }
 
 export const SlashCommandProvider = () => {