feat: add new version notification dialog and version comparison logic

2026-06-02 03:55:55 +00:00 · 2025-12-24 12:43:52 +08:00
parent a8594b76cd
commit a9a262eaae
7 changed files with 207 additions and 2 deletions
--- a/web/src/app/home/components/home-sidebar/HomeSidebar.tsx
+++ b/web/src/app/home/components/home-sidebar/HomeSidebar.tsx
@@ -35,6 +35,28 @@ import { LanguageSelector } from '@/components/ui/language-selector';
 import { Badge } from '@/components/ui/badge';
 import PasswordChangeDialog from '@/app/home/components/password-change-dialog/PasswordChangeDialog';
 import ApiIntegrationDialog from '@/app/home/components/api-integration-dialog/ApiIntegrationDialog';
+import NewVersionDialog from '@/app/home/components/new-version-dialog/NewVersionDialog';
+import { GitHubRelease } from '@/app/infra/http/CloudServiceClient';
+
+// Compare two version strings, returns true if v1 > v2
+function compareVersions(v1: string, v2: string): boolean {
+  // Remove 'v' prefix if present
+  const clean1 = v1.replace(/^v/, '');
+  const clean2 = v2.replace(/^v/, '');
+
+  const parts1 = clean1.split('.').map((p) => parseInt(p, 10) || 0);
+  const parts2 = clean2.split('.').map((p) => parseInt(p, 10) || 0);
+
+  const maxLen = Math.max(parts1.length, parts2.length);
+
+  for (let i = 0; i < maxLen; i++) {
+    const p1 = parts1[i] || 0;
+    const p2 = parts2[i] || 0;
+    if (p1 > p2) return true;
+    if (p1 < p2) return false;
+  }
+  return false;
+}

 // TODO 侧边导航栏要加动画
 export default function HomeSidebar({
@@ -58,6 +80,11 @@ export default function HomeSidebar({
  const [apiKeyDialogOpen, setApiKeyDialogOpen] = useState(false);
  const [languageSelectorOpen, setLanguageSelectorOpen] = useState(false);
  const [starCount, setStarCount] = useState<number | null>(null);
+  const [latestRelease, setLatestRelease] = useState<GitHubRelease | null>(
+    null,
+  );
+  const [hasNewVersion, setHasNewVersion] = useState(false);
+  const [versionDialogOpen, setVersionDialogOpen] = useState(false);

  useEffect(() => {
    initSelect();
@@ -75,6 +102,28 @@ export default function HomeSidebar({
      .catch((error) => {
        console.error('Failed to fetch GitHub star count:', error);
      });
+
+    // Fetch releases to check for new version
+    getCloudServiceClientSync()
+      .getLangBotReleases()
+      .then((releases) => {
+        if (releases && releases.length > 0) {
+          // Find the latest non-prerelease, non-draft release
+          const latestStable = releases.find((r) => !r.prerelease && !r.draft);
+          const latest = latestStable || releases[0];
+          setLatestRelease(latest);
+
+          // Compare versions
+          const currentVersion = systemInfo?.version;
+          if (currentVersion && latest.tag_name) {
+            const isNewer = compareVersions(latest.tag_name, currentVersion);
+            setHasNewVersion(isNewer);
+          }
+        }
+      })
+      .catch((error) => {
+        console.error('Failed to fetch releases:', error);
+      });
  }, []);

  function handleChildClick(child: SidebarChildVO) {
@@ -138,8 +187,18 @@ export default function HomeSidebar({
          {/* 文字 */}
          <div className={`${styles.langbotTextContainer}`}>
            <div className={`${styles.langbotText}`}>LangBot</div>
-            <div className={`${styles.langbotVersion}`}>
-              {systemInfo?.version}
+            <div className="flex items-center gap-1.5">
+              <div className={`${styles.langbotVersion}`}>
+                {systemInfo?.version}
+              </div>
+              {hasNewVersion && (
+                <Badge
+                  onClick={() => setVersionDialogOpen(true)}
+                  className="bg-red-500 hover:bg-red-600 text-white text-[0.6rem] px-1.5 py-0 h-4 cursor-pointer"
+                >
+                  {t('plugins.new')}
+                </Badge>
+              )}
            </div>
          </div>
        </div>
@@ -350,6 +409,11 @@ export default function HomeSidebar({
        open={apiKeyDialogOpen}
        onOpenChange={setApiKeyDialogOpen}
      />
+      <NewVersionDialog
+        open={versionDialogOpen}
+        onOpenChange={setVersionDialogOpen}
+        release={latestRelease}
+      />
    </div>
  );
 }
--- a/web/src/app/home/components/new-version-dialog/NewVersionDialog.tsx
+++ b/web/src/app/home/components/new-version-dialog/NewVersionDialog.tsx
@@ -0,0 +1,107 @@
+'use client';
+
+import { useTranslation } from 'react-i18next';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import rehypeRaw from 'rehype-raw';
+import rehypeHighlight from 'rehype-highlight';
+import i18n from 'i18next';
+import { ExternalLink } from 'lucide-react';
+
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import '@/styles/github-markdown.css';
+import { GitHubRelease } from '@/app/infra/http/CloudServiceClient';
+
+interface NewVersionDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  release: GitHubRelease | null;
+}
+
+export default function NewVersionDialog({
+  open,
+  onOpenChange,
+  release,
+}: NewVersionDialogProps) {
+  const { t } = useTranslation();
+
+  const getUpdateDocsUrl = () => {
+    const language = i18n.language;
+    if (language === 'zh-Hans' || language === 'zh-Hant') {
+      return 'https://docs.langbot.app/zh/deploy/update.html';
+    } else if (language === 'ja-JP') {
+      return 'https://docs.langbot.app/ja/deploy/update.html';
+    } else {
+      return 'https://docs.langbot.app/en/deploy/update.html';
+    }
+  };
+
+  const handleViewUpdateGuide = () => {
+    window.open(getUpdateDocsUrl(), '_blank');
+  };
+
+  if (!release) return null;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[600px] max-h-[80vh] flex flex-col">
+        <DialogHeader className="flex-shrink-0">
+          <DialogTitle className="flex items-center gap-2">
+            {t('version.newVersionAvailable')}
+            <span className="text-primary font-mono">{release.tag_name}</span>
+          </DialogTitle>
+        </DialogHeader>
+        <div className="flex-1 overflow-y-auto min-h-0 pr-2">
+          <div className="markdown-body max-w-none text-sm">
+            <ReactMarkdown
+              remarkPlugins={[remarkGfm]}
+              rehypePlugins={[rehypeRaw, rehypeHighlight]}
+              components={{
+                ul: ({ children }) => <ul className="list-disc">{children}</ul>,
+                ol: ({ children }) => (
+                  <ol className="list-decimal">{children}</ol>
+                ),
+                li: ({ children }) => <li className="ml-4">{children}</li>,
+                a: ({ href, children }) => (
+                  <a
+                    href={href}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-primary hover:underline"
+                  >
+                    {children}
+                  </a>
+                ),
+              }}
+            >
+              {release.body || t('version.noReleaseNotes')}
+            </ReactMarkdown>
+          </div>
+        </div>
+        <DialogFooter className="flex-shrink-0 flex flex-col sm:flex-row gap-2 pt-2">
+          <Button
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+            className="w-full sm:w-auto"
+          >
+            {t('common.close')}
+          </Button>
+          <Button
+            onClick={handleViewUpdateGuide}
+            className="w-full sm:w-auto flex items-center gap-2"
+          >
+            {t('version.viewUpdateGuide')}
+            <ExternalLink className="w-4 h-4" />
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
--- a/web/src/app/infra/http/CloudServiceClient.ts
+++ b/web/src/app/infra/http/CloudServiceClient.ts
@@ -84,4 +84,18 @@ export class CloudServiceClient extends BaseHttpClient {
  public getPluginMarketplaceURL(author: string, name: string): string {
    return `https://space.langbot.app/market/${author}/${name}`;
  }
+
+  public getLangBotReleases(): Promise<GitHubRelease[]> {
+    return this.get<GitHubRelease[]>('/api/v1/dist/info/releases');
+  }
+}
+
+export interface GitHubRelease {
+  tag_name: string;
+  name: string;
+  body: string;
+  html_url: string;
+  published_at: string;
+  prerelease: boolean;
+  draft: boolean;
 }
--- a/web/src/i18n/locales/en-US.ts
+++ b/web/src/i18n/locales/en-US.ts
@@ -677,6 +677,11 @@ const enUS = {
    extraParametersDescription:
      'Will be attached to the request body, such as max_tokens, temperature, top_p, etc.',
  },
+  version: {
+    newVersionAvailable: 'New Version Available',
+    viewUpdateGuide: 'View Update Guide',
+    noReleaseNotes: 'No release notes available',
+  },
 };

 export default enUS;
--- a/web/src/i18n/locales/ja-JP.ts
+++ b/web/src/i18n/locales/ja-JP.ts
@@ -682,6 +682,11 @@ const jaJP = {
    extraParametersDescription:
      'リクエストボディに追加されるパラメータ（max_tokens、temperature、top_p など）',
  },
+  version: {
+    newVersionAvailable: '新しいバージョンが利用可能',
+    viewUpdateGuide: 'アップデート方法を見る',
+    noReleaseNotes: 'リリースノートはありません',
+  },
 };

 export default jaJP;
--- a/web/src/i18n/locales/zh-Hans.ts
+++ b/web/src/i18n/locales/zh-Hans.ts
@@ -651,6 +651,11 @@ const zhHans = {
    extraParametersDescription:
      '将在请求时附加到请求体中，如 max_tokens, temperature, top_p 等',
  },
+  version: {
+    newVersionAvailable: '有新版本可用',
+    viewUpdateGuide: '查看更新方式',
+    noReleaseNotes: '暂无更新日志',
+  },
 };

 export default zhHans;
--- a/web/src/i18n/locales/zh-Hant.ts
+++ b/web/src/i18n/locales/zh-Hant.ts
@@ -649,6 +649,11 @@ const zhHant = {
    extraParametersDescription:
      '將在請求時附加到請求體中，如 max_tokens, temperature, top_p 等',
  },
+  version: {
+    newVersionAvailable: '有新版本可用',
+    viewUpdateGuide: '查看更新方式',
+    noReleaseNotes: '暫無更新日誌',
+  },
 };

 export default zhHant;