hydro-ai-helper 2.0.7 → 2.2.0

package/frontend/student/ThinkingBlock.tsx

@@ -1,27 +1,30 @@
 import React from 'react';
 import { i18n } from '@hydrooj/ui-default';
-import { COLORS, ANIMATIONS } from '../utils/styles';
 
 interface ThinkingBlockProps {
   isStreaming: boolean;
 }
 
+/**
+ * 方案 A · 克制蓝 — 深度思考指示
+ * 三个蓝点的脉冲动画（需要 dotpulse keyframes，已由 ChatMessageList 注入）。
+ */
 export const ThinkingBlock: React.FC<ThinkingBlockProps> = ({ isStreaming }) => {
   if (!isStreaming) return null;
 
+  const dot = (delay: string): React.CSSProperties => ({
+    width: '5px', height: '5px', borderRadius: '50%', background: '#2563eb',
+    animation: `dotpulse 1.2s infinite ${delay}`,
+  });
+
   return (
-    <div style={{
-      display: 'flex',
-      alignItems: 'center',
-      gap: '6px',
-      padding: '6px 0',
-      fontSize: '12px',
-      color: COLORS.primary,
-    }}>
-      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" style={{ flexShrink: 0 }}>
-        <circle cx="12" cy="12" r="10" stroke={COLORS.primary} strokeWidth="2" strokeDasharray="31.4" strokeDashoffset="10" style={{ animation: ANIMATIONS.spin }} />
-      </svg>
+    <div style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '2px 0', fontSize: '12.5px', color: '#64748b' }}>
       <span>{i18n('ai_helper_student_thinking')}</span>
+      <span style={{ display: 'inline-flex', gap: '3px' }}>
+        <span style={dot('0s')} />
+        <span style={dot('0.2s')} />
+        <span style={dot('0.4s')} />
+      </span>
     </div>
   );
 };

package/frontend/student/hooks/useTextSelection.ts

@@ -1,4 +1,4 @@
-import { useState, useRef, useEffect, useCallback } from 'react';
+import { useState, useCallback } from 'react';
 
 interface UseTextSelectionOptions {
   onClarify: (text: string, sourceId: string) => void;
@@ -8,20 +8,17 @@ export function useTextSelection({ onClarify }: UseTextSelectionOptions) {
   const [selectedText, setSelectedText] = useState('');
   const [selectedSourceAiMessageId, setSelectedSourceAiMessageId] = useState('');
   const [popupPosition, setPopupPosition] = useState<{ x: number; y: number } | null>(null);
-  const savedRangeRef = useRef<Range | null>(null);
   const [pendingAutoSubmit, setPendingAutoSubmit] = useState(false);
 
   const handleTextSelection = useCallback(() => {
     const selection = window.getSelection();
     if (!selection || selection.isCollapsed) {
       setPopupPosition(null);
-      savedRangeRef.current = null;
       return;
     }
     const text = selection.toString().trim();
     if (!text) {
       setPopupPosition(null);
-      savedRangeRef.current = null;
       return;
     }
     let node = selection.anchorNode;
@@ -36,42 +33,31 @@ export function useTextSelection({ onClarify }: UseTextSelectionOptions) {
       node = node.parentNode;
     }
     if (isInAiMessage) {
-      const range = selection.getRangeAt(0);
-      const rect = range.getBoundingClientRect();
-      savedRangeRef.current = range.cloneRange();
+      // Only read the selection's geometry to position the popup. We must NOT
+      // re-apply the selection (removeAllRanges()/addRange()) afterwards: the
+      // native highlight already survives the React re-render, and forcing a
+      // programmatic re-selection makes Chrome drop the painted highlight,
+      // so the user loses sight of what they selected while the popup is open.
+      const rect = selection.getRangeAt(0).getBoundingClientRect();
       setSelectedText(text);
       setSelectedSourceAiMessageId(aiMessageId);
       setPopupPosition({ x: rect.left + rect.width / 2, y: rect.top - 40 });
     } else {
       setPopupPosition(null);
-      savedRangeRef.current = null;
     }
   }, []);
 
   const handleDontUnderstand = useCallback(() => {
     if (!selectedSourceAiMessageId) {
       setPopupPosition(null);
-      savedRangeRef.current = null;
       return;
     }
     const truncated = selectedText.length > 100 ? selectedText.substring(0, 100) + '...' : selectedText;
     onClarify(truncated, selectedSourceAiMessageId);
     setPopupPosition(null);
-    savedRangeRef.current = null;
     setPendingAutoSubmit(true);
   }, [selectedText, selectedSourceAiMessageId, onClarify]);
 
-  // Restore selection after React render
-  useEffect(() => {
-    if (popupPosition && savedRangeRef.current) {
-      const selection = window.getSelection();
-      if (selection) {
-        selection.removeAllRanges();
-        selection.addRange(savedRangeRef.current);
-      }
-    }
-  }, [popupPosition]);
-
   return {
     selectedText,
     selectedSourceAiMessageId,

package/frontend/student/icons.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+
+/**
+ * 方案 A · 克制蓝 — 统一图标集（单线、随 color 着色）
+ * 用于问题类型卡片、输入框操作与发送按钮，替换原先的 emoji。
+ */
+
+type IconProps = { size?: number };
+
+const base = (size: number): React.SVGProps<SVGSVGElement> => ({
+  width: size, height: size, viewBox: '0 0 24 24', fill: 'none',
+  stroke: 'currentColor', strokeLinecap: 'round', strokeLinejoin: 'round',
+});
+
+/** 问题类型图标：understand / think / debug / optimize */
+export const TypeIcon: React.FC<IconProps & { type: string }> = ({ type, size = 14 }) => {
+  switch (type) {
+    case 'understand':
+      return (
+        <svg {...base(size)} strokeWidth={2}>
+          <circle cx="12" cy="12" r="9" />
+          <path d="M9.6 9.3a2.4 2.4 0 0 1 4.3 1.4c0 1.6-2 1.7-2 3.1" />
+          <circle cx="11.9" cy="17.2" r="0.9" fill="currentColor" stroke="none" />
+        </svg>
+      );
+    case 'think':
+      return (
+        <svg {...base(size)} strokeWidth={2}>
+          <path d="M9 18h6M10 21h4" />
+          <path d="M12 3a6 6 0 0 0-3.8 10.6c.6.5.9 1.1.9 2.4h5.8c0-1.3.3-1.9.9-2.4A6 6 0 0 0 12 3z" />
+        </svg>
+      );
+    case 'debug':
+      return (
+        <svg {...base(size)} strokeWidth={2}>
+          <polyline points="9 8 5 12 9 16" />
+          <polyline points="15 8 19 12 15 16" />
+        </svg>
+      );
+    case 'optimize':
+      return (
+        <svg {...base(size)} strokeWidth={1.8}>
+          <path d="M12 3l1.7 6.3L20 11l-6.3 1.7L12 19l-1.7-6.3L4 11l6.3-1.7z" />
+        </svg>
+      );
+    default:
+      return null;
+  }
+};
+
+export const SendIcon: React.FC<IconProps> = ({ size = 15 }) => (
+  <svg {...base(size)} strokeWidth={2.2}><path d="M5 12h13M13 6l6 6-6 6" /></svg>
+);
+
+export const AttachIcon: React.FC<IconProps> = ({ size = 12 }) => (
+  <svg {...base(size)} strokeWidth={2}>
+    <path d="M21 15V8a2 2 0 0 0-2-2h-7l-2-2H5a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h7" />
+  </svg>
+);
+
+export const RefreshIcon: React.FC<IconProps> = ({ size = 12 }) => (
+  <svg {...base(size)} strokeWidth={2}><path d="M3 12a9 9 0 1 0 3-6.7L3 8M3 4v4h4" /></svg>
+);
+
+export const RemoveIcon: React.FC<IconProps> = ({ size = 11 }) => (
+  <svg {...base(size)} strokeWidth={2}><path d="M6 6l12 12M18 6L6 18" /></svg>
+);
+
+/** 字母标识：替换原机器人 emoji 头像 */
+export const AIMark: React.FC<{ size?: number; radius?: number; fontSize?: number }> = ({
+  size = 28, radius = 8, fontSize = 11,
+}) => (
+  <div style={{
+    width: size, height: size, borderRadius: radius,
+    background: 'linear-gradient(135deg, #2563eb, #5b8def)',
+    display: 'flex', alignItems: 'center', justifyContent: 'center',
+    fontFamily: "'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace",
+    fontSize, fontWeight: 700, color: '#ffffff', letterSpacing: '-0.5px',
+    flexShrink: 0,
+  }}>AI</div>
+);

package/locales/en.yaml

@@ -552,7 +552,6 @@ ai_helper_student_optimize_code_required: "Code is required for optimization"
 ai_helper_student_cancel: "Cancel"
 ai_helper_student_send_shortcut: "Send (Ctrl+Enter)"
 ai_helper_student_loading: "AI is thinking..."
-ai_helper_student_click_cancel: "Click cancel to stop"
 ai_helper_student_thinking: "Deep thinking..."
 ai_helper_student_retry: "Retry"
 ai_helper_student_new_conversation: "New conversation"

package/locales/zh.yaml

@@ -552,7 +552,6 @@ ai_helper_student_optimize_code_required: "代码优化需要附带代码"
 ai_helper_student_cancel: "取消"
 ai_helper_student_send_shortcut: "发送 (Ctrl+Enter)"
 ai_helper_student_loading: "AI 正在思考..."
-ai_helper_student_click_cancel: "点击取消可中断"
 ai_helper_student_thinking: "正在深度思考..."
 ai_helper_student_retry: "重试"
 ai_helper_student_new_conversation: "新对话"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hydro-ai-helper",
-  "version": "2.0.7",
+  "version": "2.2.0",
   "description": "HydroOJ AI Learning Assistant - 一个教学优先的 AI 辅助学习插件",
   "main": "dist/index.js",
   "author": "Alture",