xinyin025/LangBot
1
0
Fork 0
mirror of https://github.com/langbot-app/LangBot.git synced 2026-06-02 03:55:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(web): add icons/emoji to selectors, sync bot enable status and plugin list in sidebar

Browse Source 
- Bot adapter selector: show adapter icon in trigger and dropdown items
- Knowledge engine selector: show plugin icon derived from plugin_id
- Pipeline binding selector: show pipeline emoji in trigger and dropdown items
- Knowledge base selectors (single/multi): show KB emoji in all views
- Sidebar bot entries: show green/gray status dot on adapter icon for enable/disable state
- Sidebar plugin list: sync after install/uninstall from all entry points (PluginInstalledComponent, plugins page, marketplace page)
- Pipeline form: add cursor-pointer to left-side tab list buttons
- Clean up unused onBotDeleted prop from BotForm
This commit is contained in:
Junyan Qin
2026-03-27 14:51:15 +08:00
parent 127dc455c3
commit bc3199bf29
11 changed files with 178 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/app/home/bots/BotDetailContent.tsx
View File

@@ -144,7 +144,6 @@ export default function BotDetailContent({ id }: { id: string }) {
<BotForm
initBotId={undefined}
onFormSubmit={handleFormSubmit}
onBotDeleted={handleBotDeleted}
onNewBotCreated={handleNewBotCreated}
/>
</div>
@@ -238,7 +237,6 @@ export default function BotDetailContent({ id }: { id: string }) {
<BotForm
initBotId={id}
onFormSubmit={handleFormSubmit}
onBotDeleted={handleBotDeleted}
onNewBotCreated={handleNewBotCreated}
onDirtyChange={setFormDirty}
/>

60
web/src/app/home/bots/components/bot-form/BotForm.tsx
View File

@@ -65,13 +65,11 @@ const getFormSchema = (t: (key: string) => string) =>
export default function BotForm({
initBotId,
onFormSubmit,
onBotDeleted,
onNewBotCreated,
onDirtyChange,
}: {
initBotId?: string;
onFormSubmit: (value: z.infer<ReturnType<typeof getFormSchema>>) => void;
onBotDeleted: () => void;
onNewBotCreated: (botId: string) => void;
onDirtyChange?: (dirty: boolean) => void;
}) {
@@ -234,6 +232,7 @@ export default function BotForm({
return {
label: item.name,
value: item.uuid ?? '',
emoji: item.emoji,
};
}),
);
@@ -461,13 +460,40 @@ export default function BotForm({
<FormControl>
<Select onValueChange={field.onChange} {...field}>
<SelectTrigger>
<SelectValue placeholder={t('bots.selectPipeline')} />
{field.value ? (
(() => {
const pipeline = pipelineNameList.find(
(p) => p.value === field.value,
);
return (
<div className="flex items-center gap-2">
{pipeline?.emoji && (
<span className="text-sm shrink-0">
{pipeline.emoji}
</span>
)}
<span>{pipeline?.label ?? field.value}</span>
</div>
);
})()
) : (
<SelectValue
placeholder={t('bots.selectPipeline')}
/>
)}
</SelectTrigger>
<SelectContent>
<SelectGroup>
{pipelineNameList.map((item) => (
<SelectItem key={item.value} value={item.value}>
{item.label}
<div className="flex items-center gap-2">
{item.emoji && (
<span className="text-sm shrink-0">
{item.emoji}
</span>
)}
<span>{item.label}</span>
</div>
</SelectItem>
))}
</SelectGroup>
@@ -508,13 +534,35 @@ export default function BotForm({
value={field.value}
>
<SelectTrigger className="w-[240px]">
<SelectValue placeholder={t('bots.selectAdapter')} />
{field.value ? (
<div className="flex items-center gap-2">
<img
src={httpClient.getAdapterIconURL(field.value)}
alt=""
className="h-5 w-5 rounded"
/>
<span>
{adapterNameList.find(
(a) => a.value === field.value,
)?.label ?? field.value}
</span>
</div>
) : (
<SelectValue placeholder={t('bots.selectAdapter')} />
)}
</SelectTrigger>
<SelectContent>
<SelectGroup>
{adapterNameList.map((item) => (
<SelectItem key={item.value} value={item.value}>
{item.label}
<div className="flex items-center gap-2">
<img
src={httpClient.getAdapterIconURL(item.value)}
alt=""
className="h-5 w-5 rounded"
/>
<span>{item.label}</span>
</div>
</SelectItem>
))}
</SelectGroup>

1
web/src/app/home/bots/components/bot-form/ChooseEntity.ts
View File

@@ -6,4 +6,5 @@ export interface IChooseAdapterEntity {
export interface IPipelineEntity {
label: string;
value: string;
emoji?: string;
}

41
web/src/app/home/components/dynamic-form/DynamicFormItemComponent.tsx
View File

@@ -541,7 +541,25 @@ export default function DynamicFormItemComponent({
return (
<Select value={field.value} onValueChange={field.onChange}>
<SelectTrigger className="bg-[#ffffff] dark:bg-[#2a2a2e]">
<SelectValue placeholder={t('knowledge.selectKnowledgeBase')} />
{field.value && field.value !== '__none__' ? (
(() => {
const selectedKb = knowledgeBases.find(
(kb) => kb.uuid === field.value,
);
return (
<div className="flex items-center gap-2">
{selectedKb?.emoji && (
<span className="text-sm shrink-0">
{selectedKb.emoji}
</span>
)}
<span>{selectedKb?.name ?? field.value}</span>
</div>
);
})()
) : (
<SelectValue placeholder={t('knowledge.selectKnowledgeBase')} />
)}
</SelectTrigger>
<SelectContent>
<SelectGroup>
@@ -553,7 +571,12 @@ export default function DynamicFormItemComponent({
<SelectLabel>{engineName}</SelectLabel>
{kbs.map((base) => (
<SelectItem key={base.uuid} value={base.uuid ?? ''}>
{base.name}
<div className="flex items-center gap-2">
{base.emoji && (
<span className="text-sm shrink-0">{base.emoji}</span>
)}
<span>{base.name}</span>
</div>
</SelectItem>
))}
</SelectGroup>
@@ -597,6 +620,11 @@ export default function DynamicFormItemComponent({
<div className="flex items-center gap-2 flex-1">
<div className="flex-1 min-w-0">
<div className="font-medium flex items-center gap-2">
{currentKb.emoji && (
<span className="text-sm shrink-0">
{currentKb.emoji}
</span>
)}
{currentKb.name}
{currentKb.knowledge_engine?.name && (
<span className="text-xs px-2 py-0.5 rounded-full bg-purple-100 text-purple-700 dark:bg-purple-900 dark:text-purple-300">
@@ -686,7 +714,14 @@ export default function DynamicFormItemComponent({
aria-label={`Select ${base.name}`}
/>
<div className="flex-1">
<div className="font-medium">{base.name}</div>
<div className="font-medium flex items-center gap-2">
{base.emoji && (
<span className="text-sm shrink-0">
{base.emoji}
</span>
)}
{base.name}
</div>
{base.description && (
<div className="text-sm text-muted-foreground">
{base.description}

30
web/src/app/home/components/home-sidebar/HomeSidebar.tsx
View File

@@ -77,6 +77,7 @@ import {
CollapsibleTrigger,
} from '@/components/ui/collapsible';
import { ChevronRight, Plus } from 'lucide-react';
import { cn } from '@/lib/utils';
import { useSidebarData, SidebarEntityItem } from './SidebarDataContext';
// Compare two version strings, returns true if v1 > v2
@@ -316,6 +317,7 @@ function NavItems({
const canCreate = CREATABLE_CATEGORIES.includes(config.id);
const isCollapseOnly = COLLAPSIBLE_ONLY_CATEGORIES.includes(config.id);
const isPlugin = config.id === 'plugins';
const isBot = config.id === 'bots';
const isActive =
selectedChild?.id === config.id ||
pathname === routePrefix ||
@@ -391,9 +393,9 @@ function NavItems({
>
<a
href={itemRoute}
className={
isPlugin && !item.debug ? 'pr-6' : ''
}
className={cn(
isPlugin && !item.debug ? 'pr-6' : '',
)}
onClick={(e) => {
e.preventDefault();
router.push(itemRoute);
@@ -404,11 +406,23 @@ function NavItems({
{item.emoji}
</span>
) : item.iconURL ? (
<img
src={item.iconURL}
alt=""
className="size-4 rounded shrink-0"
/>
<span className="relative shrink-0">
<img
src={item.iconURL}
alt=""
className="size-4 rounded"
/>
{isBot && (
<span
className={cn(
'absolute -bottom-0.5 -right-0.5 size-2 rounded-full border-2 border-sidebar',
item.enabled === false
? 'bg-muted-foreground/40'
: 'bg-green-500',
)}
/>
)}
</span>
) : null}
<span className="truncate">{item.name}</span>
{item.debug && (

3
web/src/app/home/components/home-sidebar/SidebarDataContext.tsx
View File

@@ -18,6 +18,8 @@ export interface SidebarEntityItem {
emoji?: string;
iconURL?: string;
updatedAt?: string; // ISO timestamp for sorting by most recently edited
// Bot-specific fields
enabled?: boolean;
// Plugin-specific fields
installSource?: string;
installInfo?: Record<string, unknown>;
@@ -63,6 +65,7 @@ export function SidebarDataProvider({
name: bot.name,
iconURL: httpClient.getAdapterIconURL(bot.adapter),
updatedAt: bot.updated_at,
enabled: bot.enable ?? true,
})),
);
} catch (error) {

61
web/src/app/home/knowledge/components/kb-form/KBForm.tsx
View File

@@ -310,19 +310,58 @@ export default function KBForm({
value={field.value}
>
<SelectTrigger className="w-full bg-[#ffffff] dark:bg-[#2a2a2e]">
<SelectValue
placeholder={t('knowledge.selectKnowledgeEngine')}
/>
{field.value ? (
(() => {
const [author, name] = field.value.split('/');
const engine = ragEngines.find(
(e) => e.plugin_id === field.value,
);
return (
<div className="flex items-center gap-2">
<img
src={httpClient.getPluginIconURL(
author,
name,
)}
alt=""
className="h-5 w-5 rounded"
/>
<span>
{engine
? extractI18nObject(engine.name)
: field.value}
</span>
</div>
);
})()
) : (
<SelectValue
placeholder={t('knowledge.selectKnowledgeEngine')}
/>
)}
</SelectTrigger>
<SelectContent className="fixed z-[1000]">
{ragEngines.map((engine) => (
<SelectItem
key={engine.plugin_id}
value={engine.plugin_id}
>
{extractI18nObject(engine.name)}
</SelectItem>
))}
{ragEngines.map((engine) => {
const [author, name] = engine.plugin_id.split('/');
return (
<SelectItem
key={engine.plugin_id}
value={engine.plugin_id}
>
<div className="flex items-center gap-2">
<img
src={httpClient.getPluginIconURL(
author,
name,
)}
alt=""
className="h-5 w-5 rounded"
/>
<span>{extractI18nObject(engine.name)}</span>
</div>
</SelectItem>
);
})}
</SelectContent>
</Select>
</FormControl>

3
web/src/app/home/market/page.tsx
View File

@@ -16,6 +16,7 @@ import { systemInfo } from '@/app/infra/http/HttpClient';
import { toast } from 'sonner';
import { useTranslation } from 'react-i18next';
import { PluginV4 } from '@/app/infra/entities/plugin';
import { useSidebarData } from '@/app/home/components/home-sidebar/SidebarDataContext';
enum PluginInstallStatus {
ASK_CONFIRM = 'ask_confirm',
@@ -39,6 +40,7 @@ export default function MarketplacePage() {
function MarketplaceContent() {
const { t } = useTranslation();
const { refreshPlugins } = useSidebarData();
const [modalOpen, setModalOpen] = useState(false);
const [installInfo, setInstallInfo] = useState<Record<string, string>>({});
const [pluginInstallStatus, setPluginInstallStatus] =
@@ -83,6 +85,7 @@ function MarketplaceContent() {
alreadySuccess = true;
}
setModalOpen(false);
refreshPlugins();
}
}
});

2
web/src/app/home/pipelines/components/pipeline-form/PipelineFormComponent.tsx
View File

@@ -456,7 +456,7 @@ export default function PipelineFormComponent({
type="button"
onClick={() => setActiveSection(section.name)}
className={cn(
'w-full flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-colors text-left',
'w-full flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-colors text-left cursor-pointer',
activeSection === section.name
? 'bg-accent text-accent-foreground'
: 'text-muted-foreground hover:bg-muted hover:text-foreground',

3
web/src/app/home/plugins/components/plugin-installed/PluginInstalledComponent.tsx
View File

@@ -22,6 +22,7 @@ import { useTranslation } from 'react-i18next';
import { extractI18nObject } from '@/i18n/I18nProvider';
import { toast } from 'sonner';
import { useAsyncTask, AsyncTaskStatus } from '@/hooks/useAsyncTask';
import { useSidebarData } from '@/app/home/components/home-sidebar/SidebarDataContext';
export interface PluginInstalledComponentRef {
refreshPluginList: () => void;
@@ -37,6 +38,7 @@ const PluginInstalledComponent = forwardRef<PluginInstalledComponentRef>(
(props, ref) => {
const { t } = useTranslation();
const router = useRouter();
const { refreshPlugins } = useSidebarData();
const [pluginList, setPluginList] = useState<PluginCardVO[]>([]);
const [showOperationModal, setShowOperationModal] = useState(false);
const [operationType, setOperationType] = useState<PluginOperationType>(
@@ -54,6 +56,7 @@ const PluginInstalledComponent = forwardRef<PluginInstalledComponentRef>(
toast.success(successMessage);
setShowOperationModal(false);
getPluginList();
refreshPlugins();
},
onError: () => {
// Error is already handled in the hook state

3
web/src/app/home/plugins/page.tsx
View File

@@ -51,6 +51,7 @@ import { toast } from 'sonner';
import { useTranslation } from 'react-i18next';
import { systemInfo } from '@/app/infra/http/HttpClient';
import { ApiRespPluginSystemStatus } from '@/app/infra/entities/api';
import { useSidebarData } from '@/app/home/components/home-sidebar/SidebarDataContext';
enum PluginInstallStatus {
WAIT_INPUT = 'wait_input',
@@ -93,6 +94,7 @@ export default function PluginConfigPage() {
function PluginListView() {
const { t } = useTranslation();
const router = useRouter();
const { refreshPlugins } = useSidebarData();
const [modalOpen, setModalOpen] = useState(false);
const [installSource, setInstallSource] = useState<string>('local');
const [installInfo] = useState<Record<string, any>>({}); // eslint-disable-line @typescript-eslint/no-explicit-any
@@ -167,6 +169,7 @@ function PluginListView() {
resetGithubState();
setModalOpen(false);
pluginInstalledRef.current?.refreshPluginList();
refreshPlugins();
}
}
});