hydro-ai-helper 2.0.3 → 2.0.5

package/README.md

@@ -97,7 +97,7 @@ git clone https://gitee.com/alture/hydro-ai-helper.git      # Gitee (mirror)
 
 cd hydro-ai-helper
 npm install
-npm run build
+npm run build:plugin
 
 # Install into HydroOJ
 hydrooj addon add /path/to/hydro-ai-helper

package/frontend/batchSummary/BatchSummaryPanel.tsx

@@ -6,7 +6,7 @@
 
 import React, { useEffect, useState, useCallback, useRef, useMemo } from 'react';
 import { i18n } from '@hydrooj/ui-default';
-import { COLORS, SPACING, RADIUS, SHADOWS, getButtonStyle, getAlertStyle, markdownTheme } from '../utils/styles';
+import { COLORS, SPACING, RADIUS, SHADOWS, LAYOUT, getButtonStyle, getAlertStyle, markdownTheme } from '../utils/styles';
 
 /** i18n with hardcoded Chinese fallback for keys that may not yet be in lang-*.js */
 const I18N_FALLBACK: Record<string, string> = {
@@ -287,7 +287,7 @@ export const BatchSummaryPanel: React.FC<BatchSummaryPanelProps> = ({
   }
 
   return (
-    <div style={{ fontFamily: 'inherit', color: COLORS.textPrimary }}>
+    <div style={{ fontFamily: 'inherit', color: COLORS.textPrimary, maxWidth: LAYOUT.contentMaxWidth, margin: '0 auto', width: '100%' }}>
       <style>{markdownTheme}</style>
 
       {isTeacher && (

package/frontend/batchSummary/StudentSummaryView.tsx

@@ -6,7 +6,7 @@
 
 import React, { useEffect, useState, useRef, useCallback } from 'react';
 import { i18n } from '@hydrooj/ui-default';
-import { COLORS, SPACING, RADIUS, SHADOWS, markdownTheme } from '../utils/styles';
+import { COLORS, SPACING, RADIUS, SHADOWS, LAYOUT, markdownTheme } from '../utils/styles';
 import { renderMarkdown } from '../utils/markdown';
 
 function t(key: string): string {
@@ -99,6 +99,9 @@ export const StudentSummaryView: React.FC<StudentSummaryViewProps> = ({ domainId
 
   return (
     <div style={{
+      maxWidth: LAYOUT.contentMaxWidth,
+      margin: '0 auto',
+      width: '100%',
       backgroundColor: COLORS.bgCard,
       borderRadius: RADIUS.md,
       boxShadow: SHADOWS.sm,

package/frontend/teachingSummary/TeachingSummaryPanel.tsx

@@ -6,7 +6,7 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import { i18n } from '@hydrooj/ui-default';
 import {
-  COLORS, SPACING, RADIUS, SHADOWS,
+  COLORS, SPACING, RADIUS, SHADOWS, TRANSITIONS,
   getButtonStyle, cardStyle, markdownTheme, LAYOUT,
 } from '../utils/styles';
 import { renderMarkdown } from '../utils/markdown';
@@ -326,16 +326,7 @@ export const TeachingSummaryPanel: React.FC<TeachingSummaryPanelProps> = ({ doma
 
   const [teachingFocus, setTeachingFocus] = useState('');
   const [feedbackSubmitted, setFeedbackSubmitted] = useState(false);
-
-  const [isWide, setIsWide] = useState(
-    typeof window !== 'undefined' ? window.innerWidth >= LAYOUT.splitBreakpoint : true,
-  );
-
-  useEffect(() => {
-    const handleResize = () => setIsWide(window.innerWidth >= LAYOUT.splitBreakpoint);
-    window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
-  }, []);
+  const [suggestionCollapsed, setSuggestionCollapsed] = useState(false);
 
   useEffect(() => {
     fetchSummary();
@@ -486,7 +477,7 @@ export const TeachingSummaryPanel: React.FC<TeachingSummaryPanelProps> = ({ doma
     : '';
 
   return (
-    <div style={{ fontFamily: 'inherit', color: COLORS.textPrimary }}>
+    <div style={{ fontFamily: 'inherit', color: COLORS.textPrimary, maxWidth: LAYOUT.contentMaxWidth, margin: '0 auto', width: '100%' }}>
       <style>{markdownTheme}</style>
 
       {/* Panel header */}
@@ -548,19 +539,10 @@ export const TeachingSummaryPanel: React.FC<TeachingSummaryPanelProps> = ({ doma
         </div>
       )}
 
-      {/* 60/40 split layout */}
-      <style>{`.section { overflow: visible !important; }`}</style>
-      <div style={{
-        display: 'flex',
-        flexDirection: isWide ? 'row' : 'column',
-        gap: LAYOUT.gap,
-        alignItems: 'flex-start',
-      }}>
-        {/* Main column (60%) — Findings */}
-        <div style={{
-          flex: isWide ? `0 0 ${LAYOUT.mainColumnWidth}` : '1 1 100%',
-          minWidth: 0,
-        }}>
+      {/* Single-column layout: Findings → AI Suggestion */}
+      <div>
+        {/* Findings */}
+        <div>
           <div style={{
             fontWeight: 600, fontSize: '13px', marginBottom: SPACING.md,
             color: COLORS.textMuted, textTransform: 'uppercase' as const,
@@ -588,16 +570,9 @@ export const TeachingSummaryPanel: React.FC<TeachingSummaryPanelProps> = ({ doma
           )}
         </div>
 
-        {/* Sidebar (40%) — AI Suggestion */}
+        {/* AI Suggestion — collapsible conclusion card */}
         {(summary.overallSuggestion || summary.status === 'generating') && (
-          <div style={{
-            flex: isWide ? `0 0 ${LAYOUT.sidebarWidth}` : '1 1 100%',
-            minWidth: 0,
-            position: isWide ? 'sticky' as const : 'static' as const,
-            top: isWide ? LAYOUT.sidebarStickyTop : undefined,
-            maxHeight: isWide ? LAYOUT.sidebarMaxHeight : undefined,
-            overflowY: isWide ? 'auto' as const : undefined,
-          }}>
+          <div style={{ marginTop: LAYOUT.sectionGap }}>
             <div style={{
               border: `1px solid ${COLORS.border}`,
               borderLeft: `4px solid ${COLORS.hydroGreen}`,
@@ -605,64 +580,83 @@ export const TeachingSummaryPanel: React.FC<TeachingSummaryPanelProps> = ({ doma
               backgroundColor: COLORS.bgCard,
               boxShadow: SHADOWS.sm,
             }}>
-              {/* Header */}
-              <div style={{
-                padding: `${SPACING.md} ${SPACING.base}`,
-                borderBottom: `1px solid ${COLORS.border}`,
-                backgroundColor: COLORS.hydroGreenLight,
-              }}>
+              {/* Clickable header */}
+              <div
+                onClick={() => setSuggestionCollapsed(!suggestionCollapsed)}
+                style={{
+                  padding: `${SPACING.md} ${SPACING.base}`,
+                  borderBottom: suggestionCollapsed ? 'none' : `1px solid ${COLORS.border}`,
+                  backgroundColor: COLORS.hydroGreenLight,
+                  cursor: 'pointer',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                  userSelect: 'none' as const,
+                }}
+              >
                 <span style={{
                   fontWeight: 600, fontSize: '13px', color: COLORS.hydroGreenDark,
                   textTransform: 'uppercase' as const, letterSpacing: '0.05em',
                 }}>
                   {t('ai_helper_teaching_summary_overall_suggestion')}
                 </span>
+                <span style={{
+                  display: 'inline-block', width: '16px', height: '16px',
+                  textAlign: 'center' as const, lineHeight: '16px', fontSize: '12px',
+                  color: COLORS.textMuted,
+                  transition: `transform ${TRANSITIONS.fast}`,
+                  transform: suggestionCollapsed ? 'rotate(0deg)' : 'rotate(90deg)',
+                }}>▶</span>
               </div>
 
-              {/* Content */}
-              {summary.overallSuggestion ? (
-                <div
-                  className="markdown-body"
-                  style={{ padding: `${SPACING.base} ${SPACING.lg}` }}
-                  dangerouslySetInnerHTML={{ __html: renderMarkdown(summary.overallSuggestion) }}
-                />
-              ) : (
-                <SkeletonBlock lines={10} />
+              {/* Collapsible content */}
+              {!suggestionCollapsed && (
+                <>
+                  {summary.overallSuggestion ? (
+                    <div
+                      className="markdown-body"
+                      style={{ padding: `${SPACING.base} ${SPACING.lg}` }}
+                      dangerouslySetInnerHTML={{ __html: renderMarkdown(summary.overallSuggestion) }}
+                    />
+                  ) : (
+                    <SkeletonBlock lines={10} />
+                  )}
+
+                  {/* Feedback */}
+                  <div style={{
+                    display: 'flex', alignItems: 'center', justifyContent: 'flex-end',
+                    gap: SPACING.sm, padding: `${SPACING.sm} ${SPACING.base}`,
+                    borderTop: `1px solid ${COLORS.border}`,
+                  }}>
+                    {feedbackSubmitted ? (
+                      <span style={{ fontSize: '12px', color: COLORS.successText }}>
+                        {t('ai_helper_teaching_summary_feedback_thanks')}
+                      </span>
+                    ) : (
+                      <>
+                        {(['up', 'down'] as const).map(rating => (
+                          <button
+                            key={rating}
+                            onClick={() => handleFeedback(rating)}
+                            style={{
+                              fontSize: '12px', padding: '3px 8px',
+                              border: `1px solid ${COLORS.border}`,
+                              borderRadius: RADIUS.sm,
+                              backgroundColor: 'transparent',
+                              color: summary.feedback?.rating === rating
+                                ? (rating === 'up' ? COLORS.successText : COLORS.errorText)
+                                : COLORS.textMuted,
+                              cursor: 'pointer',
+                            }}
+                          >
+                            {rating === 'up' ? t('ai_helper_teaching_summary_feedback_helpful') : t('ai_helper_teaching_summary_feedback_not_helpful')}
+                          </button>
+                        ))}
+                      </>
+                    )}
+                  </div>
+                </>
               )}
-
-              {/* Feedback — inside sidebar */}
-              <div style={{
-                display: 'flex', alignItems: 'center', justifyContent: 'flex-end',
-                gap: SPACING.sm, padding: `${SPACING.sm} ${SPACING.base}`,
-                borderTop: `1px solid ${COLORS.border}`,
-              }}>
-                {feedbackSubmitted ? (
-                  <span style={{ fontSize: '12px', color: COLORS.successText }}>
-                    {t('ai_helper_teaching_summary_feedback_thanks')}
-                  </span>
-                ) : (
-                  <>
-                    {(['up', 'down'] as const).map(rating => (
-                      <button
-                        key={rating}
-                        onClick={() => handleFeedback(rating)}
-                        style={{
-                          fontSize: '12px', padding: '3px 8px',
-                          border: `1px solid ${COLORS.border}`,
-                          borderRadius: RADIUS.sm,
-                          backgroundColor: 'transparent',
-                          color: summary.feedback?.rating === rating
-                            ? (rating === 'up' ? COLORS.successText : COLORS.errorText)
-                            : COLORS.textMuted,
-                          cursor: 'pointer',
-                        }}
-                      >
-                        {rating === 'up' ? t('ai_helper_teaching_summary_feedback_helpful') : t('ai_helper_teaching_summary_feedback_not_helpful')}
-                      </button>
-                    ))}
-                  </>
-                )}
-              </div>
             </div>
           </div>
         )}

package/frontend/teachingSummary/useTeachingSummary.ts

@@ -97,6 +97,32 @@ export function useTeachingSummary(domainId: string, contestId: string): UseTeac
     };
   }, [stopPolling]);
 
+  // startPolling must be declared before fetchSummary to avoid TDZ
+  // (fetchSummary's dependency array evaluates startPolling immediately)
+  const startPolling = useCallback(() => {
+    stopPolling();
+    pollTimerRef.current = setInterval(async () => {
+      try {
+        const url = buildUrl(domainId, `/${contestId}`);
+        const res = await fetch(url, {
+          credentials: 'include',
+          headers: { 'X-Requested-With': 'XMLHttpRequest' },
+        });
+        if (!res.ok) return;
+        const data = await res.json();
+        const fetched: TeachingSummary | null = data.summary ?? null;
+        if (fetched) {
+          setSummary(fetched);
+          if (fetched.status === 'completed' || fetched.status === 'failed') {
+            stopPolling();
+          }
+        }
+      } catch {
+        // ignore transient poll errors
+      }
+    }, POLL_INTERVAL_MS);
+  }, [domainId, contestId, stopPolling]);
+
   const fetchSummary = useCallback(async () => {
     setLoading(true);
     setError(null);
@@ -133,30 +159,6 @@ export function useTeachingSummary(domainId: string, contestId: string): UseTeac
     }
   }, [domainId, contestId, startPolling]);
 
-  const startPolling = useCallback(() => {
-    stopPolling();
-    pollTimerRef.current = setInterval(async () => {
-      try {
-        const url = buildUrl(domainId, `/${contestId}`);
-        const res = await fetch(url, {
-          credentials: 'include',
-          headers: { 'X-Requested-With': 'XMLHttpRequest' },
-        });
-        if (!res.ok) return;
-        const data = await res.json();
-        const fetched: TeachingSummary | null = data.summary ?? null;
-        if (fetched) {
-          setSummary(fetched);
-          if (fetched.status === 'completed' || fetched.status === 'failed') {
-            stopPolling();
-          }
-        }
-      } catch {
-        // ignore transient poll errors
-      }
-    }, POLL_INTERVAL_MS);
-  }, [domainId, contestId, stopPolling]);
-
   const generate = useCallback(async (teachingFocus?: string, regenerate?: boolean) => {
     setLoading(true);
     setError(null);

package/frontend/utils/styles.ts

@@ -320,11 +320,9 @@ export const linkStyle: React.CSSProperties = {
 
 export const LAYOUT = {
   splitBreakpoint: 768,
-  mainColumnWidth: '58%',
-  sidebarWidth: '40%',
-  sidebarStickyTop: '16px',
-  sidebarMaxHeight: 'calc(100vh - 32px)',
+  contentMaxWidth: '1080px',
   gap: '24px',
+  sectionGap: '32px',
 };
 
 // ─── Shared Markdown Theme ───────────────────────────────────────────────────

package/locales/en.yaml

@@ -436,7 +436,7 @@ ai_helper_admin_version_updating: "Updating..."
 ai_helper_admin_version_update_success: "Update Successful"
 ai_helper_admin_version_update_failed_title: "Update Failed"
 ai_helper_admin_version_notice_title: "Important Notes"
-ai_helper_admin_version_notice_1: "Update will execute git pull, npm run build, and pm2 restart"
+ai_helper_admin_version_notice_1: "Update will execute git pull, npm run build:plugin, and pm2 restart"
 ai_helper_admin_version_notice_2: "HydroOJ service will briefly restart, causing a few seconds of downtime"
 ai_helper_admin_version_notice_3: "Please ensure no critical operations are in progress"
 ai_helper_admin_version_plugin_path: "Plugin path"

package/locales/zh.yaml

@@ -436,7 +436,7 @@ ai_helper_admin_version_updating: "正在更新..."
 ai_helper_admin_version_update_success: "更新成功"
 ai_helper_admin_version_update_failed_title: "更新失败"
 ai_helper_admin_version_notice_title: "注意事项"
-ai_helper_admin_version_notice_1: "更新将执行 git pull、npm run build 和 pm2 restart"
+ai_helper_admin_version_notice_1: "更新将执行 git pull、npm run build:plugin 和 pm2 restart"
 ai_helper_admin_version_notice_2: "HydroOJ 服务将短暂重启，可能导致数秒服务中断"
 ai_helper_admin_version_notice_3: "请确保当前没有重要操作正在进行"
 ai_helper_admin_version_plugin_path: "插件路径"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hydro-ai-helper",
-  "version": "2.0.3",
+  "version": "2.0.5",
   "description": "HydroOJ AI Learning Assistant - 一个教学优先的 AI 辅助学习插件",
   "main": "dist/index.js",
   "author": "Alture",
@@ -22,7 +22,6 @@
     "learning-assistant"
   ],
   "scripts": {
-    "build": "echo 'Skipping build for Vercel Functions'",
     "build:plugin": "tsc",
     "dev": "tsc --watch",
     "lint": "eslint src --ext .ts,.tsx",
@@ -31,7 +30,7 @@
   "dependencies": {
     "@types/highlight.js": "^9.12.4",
     "@types/markdown-it": "^14.1.2",
-    "axios": "^1.13.5",
+    "axios": "^1.15.0",
     "chart.js": "^4.5.1",
     "dompurify": "^3.3.2",
     "highlight.js": "^11.11.1",
@@ -49,7 +48,6 @@
     "@types/react-dom": "^17.0.0",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
-    "@vercel/node": "^3.0.0",
     "eslint": "^8.0.0",
     "hydrooj": "^4.0.0",
     "jest": "^30.2.0",