Junyan Chin 4a97895dea Feat/shadcn sidebar and page views (#2084)
* feat(web): migrate sidebar to shadcn and convert entity editors to page views

* feat(web): enhance sidebar with sections, collapsible persistence, sub-item sorting/limiting, and UI polish

- Reorganize sidebar into Home and Extensions sections with collapsible groups
- Split plugins page into plugins, market, and mcp as separate routes
- Add sidebar sub-items sorted by updatedAt with max 5 visible and expand/collapse toggle
- Persist collapsible section state and sidebar open state in localStorage
- Fix page refresh stripping query params by splitting handleChildClick/selectChild
- Swap plugin detail layout (config left, readme right)
- Add fixed headers with internal scroll for all detail and list pages
- Remove entity form borders and sidebar rail
- Improve dark mode sidebar/content contrast
- Rename monitoring to Dashboard, move to first position
- Update breadcrumb to show Home or Extensions based on current route
- Add i18n translations for more/less toggle in all 4 locales

* fix(web): fix scroll behavior - constrain layout to viewport, fix fixed headers and independent scroll areas

- Change SidebarProvider wrapper from min-h-svh to h-svh overflow-hidden to constrain layout to viewport height (root cause of all scroll issues)
- Fix create mode pages (bot, pipeline, knowledge): extract title bar out of scroll container so only form content scrolls
- Fix plugin detail: add overflow-x-hidden on both config and readme panels to prevent horizontal overflow
- Add min-h-0 to all TabsContent in edit mode for cross-browser flex shrink safety
- Change nested <main> to <div> in layout to avoid invalid nested <main> tags (SidebarInset already renders as <main>)

* style(web): polish UI - dashboard i18n, sidebar create text, cursor-pointer tabs, remove cancel buttons

* feat(web): add plugin context menu to sidebar sub-items

- Add hover-reveal dropdown menu (Ellipsis icon) on plugin sidebar items
- Menu items: Update (marketplace only), View Source (marketplace/github), Delete
- Add confirmation dialog with async task polling for delete/update operations
- Extend SidebarEntityItem with installSource and installInfo fields
- Fix PipelineFormComponent optional onCancel invocation

* fix(web): prevent plugin sidebar text from overlapping menu button

Add right padding on plugin sub-items and explicit truncate on text
span so long plugin names never overlap the hover menu button.

* feat(web): show update indicator on sidebar plugin menu

- Fetch marketplace plugin versions in SidebarDataContext.refreshPlugins
- Compare with installed version using isNewerVersion to set hasUpdate
- Show red dot on menu trigger when update available (always visible)
- Show 'New' badge on Update menu item when update available
- Marketplace fetch failure is silently caught to avoid blocking sidebar

* refactor(web): remove entity list pages, back buttons, and make sidebar toggle collapse

- Remove card grid list views from bots, pipelines, knowledge pages
- Show empty state placeholder when no entity is selected
- Preserve KB migration dialog at page level
- Remove back (ArrowLeft) buttons from all detail pages (bots, pipelines, knowledge, plugins)
- Sidebar parent click for bots/pipelines/knowledge now toggles collapse instead of navigating
- Breadcrumb second level is now non-clickable (always BreadcrumbPage)
- Add selectFromSidebar i18n keys in all 4 locales

* feat(web): enhance bot session monitor with refresh functionality and improve log card UI

* refactor(web): optimize pipeline detail page with vertical config nav and debug chat polish

- Convert pipeline config tab's horizontal sub-tabs to vertical left-side navigation with icons
- Replace hardcoded colors in PipelineFormComponent and DebugDialog with theme-aware Tailwind classes
- Replace custom SVG icons with lucide-react (User, Users, ImageIcon, Send, Reply, etc.)
- Replace hardcoded Chinese strings with i18n keys (allMembers, file, voice, uploadImage, uploading)
- Modernize chat bubbles to use bg-primary/10 and bg-muted instead of hardcoded blue/gray
- Translate all Chinese comments to English in both components
- Delete unused pipelineFormStyle.module.css
- Remove max-w-2xl constraint from config tab container

* fix(web): improve dark mode contrast and relocate WebSocket status indicator

Bump dark mode --muted, --accent, --secondary from oklch(0.18) to oklch(0.24)
to fix invisible TabsList, message bubbles, and selected items against the
oklch(0.17) background. Move WebSocket connection dot from pipeline title
into the Debug Chat tab trigger so it is always visible. Replace hardcoded
Quote border colors with theme-aware border-muted-foreground/50.

* fix(web): increase dark mode contrast for muted/accent/secondary to oklch(0.27)

Previous value of oklch(0.24) was still not distinguishable enough against
the oklch(0.17) background. Bump to oklch(0.27) for a 0.10 lightness gap,
matching the contrast ratio of the default shadcn zinc dark theme.

* style(web): replace hardcoded colors with theme tokens in monitoring dashboard

Convert all monitoring page components from hardcoded gray/white colors
to theme-aware CSS variable tokens (bg-card, text-foreground,
text-muted-foreground, bg-muted, bg-background, bg-accent, border).
Semantic colors (red/green/blue/purple for status badges and error
styling) are intentionally preserved.

* feat(web): show debug indicator for debugging plugins in sidebar

Add orange Bug icon next to plugin name in sidebar sub-items when the
plugin is connected via WebSocket debug mode. Hide context menu for
debug plugins since delete/update operations are not supported.

* feat(web): show install source and debug badge on plugin detail page

Display a badge next to the plugin title indicating the install source
(GitHub blue, Local green, Marketplace purple) or debugging status
(orange with Bug icon), matching the existing plugin card convention.

* fix(web): resolve eslint errors for CI - remove unused imports and variables

* fix(web): remove stale setSubtitle call and fix prettier formatting

* Refactor code formatting and improve readability

- Updated HomeSidebar.tsx to enhance clarity in conditional assignment.
- Adjusted CSS formatting in github-markdown.css for better alignment.
- Cleaned up tsconfig.json by consolidating array formatting for consistency.

* fix(ci): use local prettier instead of mirrors-prettier to avoid version mismatch (3.1.0 vs 3.8.1)
2026-03-27 01:51:13 +08:00
2026-02-16 14:07:50 +08:00
2025-11-28 15:01:54 +08:00
2025-11-06 21:34:02 +08:00
2025-10-07 00:15:56 +08:00
2025-05-20 09:39:46 +08:00
2025-09-13 09:44:18 +08:00

LangBot

LangBot - Production-grade IM bot made easy. | Product Hunt

Production-grade platform for building agentic IM bots.

Quickly build, debug, and ship AI bots to Slack, Discord, Telegram, WeChat, and more.

English / 简体中文 / 繁體中文 / 日本語 / Español / Français / 한국어 / Русский / Tiếng Việt

Discord Ask DeepWiki GitHub release (latest by date) python GitHub stars

Website Features Docs API Cloud Plugin Market Roadmap


What is LangBot?

LangBot is an open-source, production-grade platform for building AI-powered instant messaging bots. It connects Large Language Models (LLMs) to any chat platform, enabling you to create intelligent agents that can converse, execute tasks, and integrate with your existing workflows.

Key Capabilities

  • AI Conversations & Agents — Multi-turn dialogues, tool calling, multi-modal support, streaming output. Built-in RAG (knowledge base) with deep integration to Dify, Coze, n8n, Langflow.
  • Universal IM Platform Support — One codebase for Discord, Telegram, Slack, LINE, QQ, WeChat, WeCom, Lark, DingTalk, KOOK.
  • Production-Ready — Access control, rate limiting, sensitive word filtering, comprehensive monitoring, and exception handling. Trusted by enterprises.
  • Plugin Ecosystem — Hundreds of plugins, event-driven architecture, component extensions, and MCP protocol support.
  • Web Management Panel — Configure, manage, and monitor your bots through an intuitive browser interface. No YAML editing required.
  • Multi-Pipeline Architecture — Different bots for different scenarios, with comprehensive monitoring and exception handling.

→ Learn more about all features


Quick Start

LangBot Cloud — Zero deployment, ready to use.

One-Line Launch

uvx langbot

Requires uv. Visit http://localhost:5300 — done.

Docker Compose

git clone https://github.com/langbot-app/LangBot
cd LangBot/docker
docker compose up -d

One-Click Cloud Deploy

Deploy on Zeabur Deploy on Railway

More options: Docker · Manual · BTPanel · Kubernetes


Supported Platforms

Platform Status Notes
Discord
Telegram
Slack
LINE
QQ Personal & Official API
WeCom Enterprise WeChat, External CS, AI Bot
WeChat Personal & Official Account
Lark
DingTalk
KOOK
Satori

Supported LLMs & Integrations

Provider Type Status
OpenAI LLM
Anthropic LLM
DeepSeek LLM
Google Gemini LLM
xAI LLM
Moonshot LLM
Zhipu AI LLM
Ollama Local LLM
LM Studio Local LLM
Dify LLMOps
MCP Protocol
SiliconFlow Gateway
Aliyun Bailian Gateway
Volc Engine Ark Gateway
ModelScope Gateway
GiteeAI Gateway
CompShare GPU Platform
PPIO GPU Platform
ShengSuanYun GPU Platform
接口 AI Gateway
302.AI Gateway

→ View all integrations


Why LangBot?

Use Case How LangBot Helps
Customer Support Deploy AI agents to Slack/Discord/Telegram that answer questions using your knowledge base
Internal Tools Connect n8n/Dify workflows to WeCom/DingTalk for automated business processes
Community Management Moderate QQ/Discord groups with AI-powered content filtering and interaction
Multi-Platform Presence One bot, all platforms. Manage from a single dashboard

Live Demo

Try it now: https://demo.langbot.dev/

  • Email: demo@langbot.app
  • Password: langbot123456

Note: Public demo environment. Do not enter sensitive information.


Community

Discord


Star History

Star History Chart


Contributors

Thanks to all contributors who have helped make LangBot better:

Languages
Python 63.8%
TypeScript 34.6%
JavaScript 1%
CSS 0.4%
Shell 0.1%