@dyyz1993/create-agent 2.0.1 → 2.1.0

package/templates/agent/src/mainview/components/chat/ChatPanel.tsx

@@ -6,97 +6,97 @@ import { useChatStore } from "../../stores/use-chat-store";
 import { MessageBubble } from "./MessageBubble";
 
 export function ChatPanel() {
-  const { t } = useTranslation();
-  const messages = useChatStore((s) => s.messages);
-  const inputText = useChatStore((s) => s.inputText);
-  const setInputText = useChatStore((s) => s.setInputText);
-  const sendMessage = useChatStore((s) => s.sendMessage);
-  const parentRef = useRef<HTMLDivElement>(null);
-  const prevMessageCountRef = useRef(0);
+	const { t } = useTranslation();
+	const messages = useChatStore((s) => s.messages);
+	const inputText = useChatStore((s) => s.inputText);
+	const setInputText = useChatStore((s) => s.setInputText);
+	const sendMessage = useChatStore((s) => s.sendMessage);
+	const parentRef = useRef<HTMLDivElement>(null);
+	const prevMessageCountRef = useRef(0);
 
-  const virtualizer = useVirtualizer({
-    count: messages.length,
-    getScrollElement: () => parentRef.current,
-    estimateSize: () => 80,
-    overscan: 5,
-    measureElement: (element) => element?.getBoundingClientRect().height ?? 80,
-  });
+	const virtualizer = useVirtualizer({
+		count: messages.length,
+		getScrollElement: () => parentRef.current,
+		estimateSize: () => 80,
+		overscan: 5,
+		measureElement: (element) => element?.getBoundingClientRect().height ?? 80,
+	});
 
-  useEffect(() => {
-    if (messages.length > prevMessageCountRef.current) {
-      virtualizer.scrollToIndex(messages.length - 1, { align: "end" });
-    }
-    prevMessageCountRef.current = messages.length;
-  }, [messages.length, virtualizer]);
+	useEffect(() => {
+		if (messages.length > prevMessageCountRef.current) {
+			virtualizer.scrollToIndex(messages.length - 1, { align: "end" });
+		}
+		prevMessageCountRef.current = messages.length;
+	}, [messages.length, virtualizer]);
 
-  return (
-    <div className="flex-1 flex flex-col overflow-hidden relative">
-      <div className="px-4 py-2 bg-[var(--color-bg-secondary)] border-b border-[var(--color-border-primary)] flex items-center justify-between flex-shrink-0">
-        <h2 className="text-sm font-semibold flex items-center gap-1.5">
-          <MessageSquare className="w-4 h-4 text-[var(--color-text-accent)]" />
-          {t("chat.title")}
-          {messages.length > 0 && (
-            <span className="ml-1 px-2 py-0.5 bg-[var(--color-accent)]/30 text-[var(--color-text-accent)] rounded text-[10px]">
-              {messages.length}
-            </span>
-          )}
-        </h2>
-      </div>
+	return (
+		<div className="flex-1 flex flex-col overflow-hidden relative">
+			<div className="px-4 py-2 bg-[var(--color-bg-secondary)] border-b border-[var(--color-border-primary)] flex items-center justify-between flex-shrink-0">
+				<h2 className="text-sm font-semibold flex items-center gap-1.5">
+					<MessageSquare className="w-4 h-4 text-[var(--color-text-accent)]" />
+					{t("chat.title")}
+					{messages.length > 0 && (
+						<span className="ml-1 px-2 py-0.5 bg-[var(--color-accent)]/30 text-[var(--color-text-accent)] rounded text-[10px]">
+							{messages.length}
+						</span>
+					)}
+				</h2>
+			</div>
 
-      <div ref={parentRef} className="flex-1 overflow-y-auto">
-        {messages.length === 0 ? (
-          <div className="flex items-center justify-center h-full text-[var(--color-text-placeholder)] text-sm">
-            {t("chat.empty")}
-          </div>
-        ) : (
-          <div
-            style={{
-              height: virtualizer.getTotalSize(),
-              width: "100%",
-              position: "relative",
-            }}
-          >
-            {virtualizer.getVirtualItems().map((virtualItem) => {
-              const msg = messages[virtualItem.index];
-              return (
-                <div
-                  key={msg.id}
-                  data-index={virtualItem.index}
-                  ref={virtualizer.measureElement}
-                  style={{
-                    position: "absolute",
-                    top: 0,
-                    left: 0,
-                    width: "100%",
-                    transform: `translateY(${virtualItem.start}px)`,
-                    padding: "6px 16px",
-                  }}
-                >
-                  <MessageBubble message={msg} />
-                </div>
-              );
-            })}
-          </div>
-        )}
-      </div>
+			<div ref={parentRef} className="flex-1 overflow-y-auto">
+				{messages.length === 0 ? (
+					<div className="flex items-center justify-center h-full text-[var(--color-text-placeholder)] text-sm">
+						{t("chat.empty")}
+					</div>
+				) : (
+					<div
+						style={{
+							height: virtualizer.getTotalSize(),
+							width: "100%",
+							position: "relative",
+						}}
+					>
+						{virtualizer.getVirtualItems().map((virtualItem) => {
+							const msg = messages[virtualItem.index]!;
+							return (
+								<div
+									key={msg.id}
+									data-index={virtualItem.index}
+									ref={virtualizer.measureElement}
+									style={{
+										position: "absolute",
+										top: 0,
+										left: 0,
+										width: "100%",
+										transform: `translateY(${virtualItem.start}px)`,
+										padding: "6px 16px",
+									}}
+								>
+									<MessageBubble message={msg} />
+								</div>
+							);
+						})}
+					</div>
+				)}
+			</div>
 
-      <div className="px-4 py-3 bg-[var(--color-bg-secondary)] border-t border-[var(--color-border-primary)] flex gap-2 flex-shrink-0">
-        <input
-          type="text"
-          value={inputText}
-          onChange={(e) => setInputText(e.target.value)}
-          onKeyDown={(e) => e.key === "Enter" && !e.shiftKey && sendMessage()}
-          placeholder={t("chat.placeholder")}
-          className="flex-1 px-3 py-2 text-sm bg-[var(--color-bg-tertiary)] rounded-lg text-[var(--color-text-primary)] border border-[var(--color-border-secondary)] focus:border-[var(--color-accent)] focus:outline-none"
-        />
-        <button
-          onClick={sendMessage}
-          className="px-4 py-2 text-sm bg-[var(--color-accent)] hover:bg-[var(--color-accent-hover)] rounded-lg transition-colors flex items-center gap-1.5"
-        >
-          <Send className="w-4 h-4" />
-          {t("chat.send")}
-        </button>
-      </div>
-    </div>
-  );
+			<div className="px-4 py-3 bg-[var(--color-bg-secondary)] border-t border-[var(--color-border-primary)] flex gap-2 flex-shrink-0">
+				<input
+					type="text"
+					value={inputText}
+					onChange={(e) => setInputText(e.target.value)}
+					onKeyDown={(e) => e.key === "Enter" && !e.shiftKey && sendMessage()}
+					placeholder={t("chat.placeholder")}
+					className="flex-1 px-3 py-2 text-sm bg-[var(--color-bg-tertiary)] rounded-lg text-[var(--color-text-primary)] border border-[var(--color-border-secondary)] focus:border-[var(--color-accent)] focus:outline-none"
+				/>
+				<button
+					onClick={sendMessage}
+					className="px-4 py-2 text-sm bg-[var(--color-accent)] hover:bg-[var(--color-accent-hover)] rounded-lg transition-colors flex items-center gap-1.5"
+				>
+					<Send className="w-4 h-4" />
+					{t("chat.send")}
+				</button>
+			</div>
+		</div>
+	);
 }

package/templates/agent/src/mainview/components/file-preview/VirtualizedCodeView.tsx

@@ -4,96 +4,120 @@ import { Highlight, themes } from "prism-react-renderer";
 import { getLanguage } from "../../utils/file-utils";
 
 interface VirtualizedCodeViewProps {
-  code: string;
-  filename: string;
+	code: string;
+	filename: string;
 }
 
 /** Lines longer than this skip syntax highlighting (plain text instead) */
 const LONG_LINE_THRESHOLD = 5000;
 
 export function VirtualizedCodeView({ code, filename }: VirtualizedCodeViewProps) {
-  const parentRef = useRef<HTMLDivElement>(null);
-  const language = getLanguage(filename);
-  const lines = useMemo(() => code.split("\n"), [code]);
+	const parentRef = useRef<HTMLDivElement>(null);
+	const language = getLanguage(filename);
+	const lines = useMemo(() => code.split("\n"), [code]);
 
-  // Detect minified files: avg line length > 500 chars
-  const avgLineLength = code.length / Math.max(lines.length, 1);
-  const usePlainText = !language || avgLineLength > 500;
+	// Detect minified files: avg line length > 500 chars
+	const avgLineLength = code.length / Math.max(lines.length, 1);
+	const usePlainText = !language || avgLineLength > 500;
 
-  const virtualizer = useVirtualizer({
-    count: lines.length,
-    getScrollElement: () => parentRef.current,
-    estimateSize: () => 20,
-    overscan: 20,
-  });
+	const virtualizer = useVirtualizer({
+		count: lines.length,
+		getScrollElement: () => parentRef.current,
+		estimateSize: () => 20,
+		overscan: 20,
+	});
 
-  // --- Plain text path: no Prism tokenization ---
-  if (usePlainText) {
-    return (
-      <div ref={parentRef} className="flex-1 min-h-0 overflow-auto" style={{ background: "#011627" }}>
-        <div
-          style={{ height: `${virtualizer.getTotalSize()}px`, width: "100%", position: "relative" }}
-        >
-          {virtualizer.getVirtualItems().map((vr) => (
-            <div
-              key={vr.key}
-              style={{
-                position: "absolute", top: 0, left: 0, width: "100%",
-                height: `${vr.size}px`, transform: `translateY(${vr.start}px)`,
-              }}
-              className="flex text-xs leading-5 font-mono"
-            >
-              <span className="inline-block w-10 text-right pr-4 text-gray-600 select-none shrink-0">
-                {vr.index + 1}
-              </span>
-              <span className="flex-1 text-[var(--color-text-secondary)] whitespace-pre">{lines[vr.index]}</span>
-            </div>
-          ))}
-        </div>
-      </div>
-    );
-  }
+	// --- Plain text path: no Prism tokenization ---
+	if (usePlainText) {
+		return (
+			<div
+				ref={parentRef}
+				className="flex-1 min-h-0 overflow-auto"
+				style={{ background: "#011627" }}
+			>
+				<div
+					style={{ height: `${virtualizer.getTotalSize()}px`, width: "100%", position: "relative" }}
+				>
+					{virtualizer.getVirtualItems().map((vr) => (
+						<div
+							key={vr.key}
+							style={{
+								position: "absolute",
+								top: 0,
+								left: 0,
+								width: "100%",
+								height: `${vr.size}px`,
+								transform: `translateY(${vr.start}px)`,
+							}}
+							className="flex text-xs leading-5 font-mono"
+						>
+							<span className="inline-block w-10 text-right pr-4 text-gray-600 select-none shrink-0">
+								{vr.index + 1}
+							</span>
+							<span className="flex-1 text-[var(--color-text-secondary)] whitespace-pre">
+								{lines[vr.index]}
+							</span>
+						</div>
+					))}
+				</div>
+			</div>
+		);
+	}
 
-  // --- Highlighted path: tokenize ONCE for the whole file, virtualize rendering ---
-  return (
-    <Highlight theme={themes.nightOwl} code={code} language={language}>
-      {({ tokens, getTokenProps }) => (
-        <div ref={parentRef} className="flex-1 min-h-0 overflow-auto" style={{ background: "#011627" }}>
-          <div
-            style={{ height: `${virtualizer.getTotalSize()}px`, width: "100%", position: "relative" }}
-          >
-            {virtualizer.getVirtualItems().map((vr) => {
-              const lineTokens = tokens[vr.index];
-              const lineText = lines[vr.index];
-              const isLongLine = (lineText?.length ?? 0) > LONG_LINE_THRESHOLD;
+	// --- Highlighted path: tokenize ONCE for the whole file, virtualize rendering ---
+	return (
+		<Highlight theme={themes.nightOwl} code={code} language={language}>
+			{({ tokens, getTokenProps }) => (
+				<div
+					ref={parentRef}
+					className="flex-1 min-h-0 overflow-auto"
+					style={{ background: "#011627" }}
+				>
+					<div
+						style={{
+							height: `${virtualizer.getTotalSize()}px`,
+							width: "100%",
+							position: "relative",
+						}}
+					>
+						{virtualizer.getVirtualItems().map((vr) => {
+							const lineTokens = tokens[vr.index];
+							const lineText = lines[vr.index];
+							const isLongLine = (lineText?.length ?? 0) > LONG_LINE_THRESHOLD;
 
-              return (
-                <div
-                  key={vr.key}
-                  style={{
-                    position: "absolute", top: 0, left: 0, width: "100%",
-                    height: `${vr.size}px`, transform: `translateY(${vr.start}px)`,
-                  }}
-                  className="flex text-xs leading-5 font-mono"
-                >
-                  <span className="inline-block w-10 text-right pr-4 text-gray-600 select-none shrink-0">
-                    {vr.index + 1}
-                  </span>
-                  {isLongLine ? (
-                    <span className="flex-1 text-[var(--color-text-secondary)] whitespace-pre">{lineText}</span>
-                  ) : (
-                    <span className="flex-1">
-                      {lineTokens.map((token, key) => (
-                        <span key={key} {...getTokenProps({ token })} />
-                      ))}
-                    </span>
-                  )}
-                </div>
-              );
-            })}
-          </div>
-        </div>
-      )}
-    </Highlight>
-  );
+							return (
+								<div
+									key={vr.key}
+									style={{
+										position: "absolute",
+										top: 0,
+										left: 0,
+										width: "100%",
+										height: `${vr.size}px`,
+										transform: `translateY(${vr.start}px)`,
+									}}
+									className="flex text-xs leading-5 font-mono"
+								>
+									<span className="inline-block w-10 text-right pr-4 text-gray-600 select-none shrink-0">
+										{vr.index + 1}
+									</span>
+									{isLongLine ? (
+										<span className="flex-1 text-[var(--color-text-secondary)] whitespace-pre">
+											{lineText}
+										</span>
+									) : (
+										<span className="flex-1">
+											{lineTokens!.map((token, key) => (
+												<span key={key} {...getTokenProps({ token })} />
+											))}
+										</span>
+									)}
+								</div>
+							);
+						})}
+					</div>
+				</div>
+			)}
+		</Highlight>
+	);
 }