チャットバブルのUI改善+merge

Author: Tatsu723

app/[docs_id]/chatForm.tsx

@@ -151,7 +151,7 @@ export function ChatForm({ documentContent, sectionId }: ChatFormProps) {
                 className={clsx(
                   "chat-bubble",
                   { "bg-primary text-primary-content": msg.sender === 'user' },
-                  { "bg-secondary-content text-black": msg.sender === 'ai' && !msg.isError },
+                  { "bg-secondary-content dark:bg-neutral text-black dark:text-white": msg.sender === 'ai' && !msg.isError },
                   { "chat-bubble-error": msg.isError }
                 )} 
                 style={{maxWidth: "100%", wordBreak: "break-word"}}

app/[docs_id]/markdown.tsx

@@ -6,8 +6,7 @@ import { Heading } from "./section";
 import { type AceLang, EditorComponent } from "../terminal/editor";
 import { ExecFile, ExecLang } from "../terminal/exec";
 import { useChangeTheme } from "./themeToggle";
-import { tomorrow } from "react-syntax-highlighter/dist/esm/styles/hljs";
-import { twilight } from "react-syntax-highlighter/dist/esm/styles/prism";
+import { tomorrow, atomOneDark } from "react-syntax-highlighter/dist/esm/styles/hljs";
 
 export function StyledMarkdown({ content }: { content: string }) {
   return (
@@ -36,7 +35,7 @@ const components: Components = {
   li: ({ node, ...props }) => <li className="my-1" {...props} />,
   a: ({ node, ...props }) => <a className="link link-info" {...props} />,
   strong: ({ node, ...props }) => (
-    <strong className="text-primary" {...props} />
+    <strong className="text-primary dark:text-secondary" {...props} />
   ),
   table: ({ node, ...props }) => (
     <div className="w-max max-w-full overflow-x-auto mx-auto my-2 rounded-lg border border-base-content/5 shadow-sm">
@@ -49,7 +48,7 @@ const components: Components = {
 };
 function CodeComponent({ node,  className, ref, style, ...props }: { node: unknown; className?: string; ref?: unknown; style?: unknown; [key: string]: unknown }) {
   const theme = useChangeTheme();
-  const codetheme= theme === "tomorrow" ? tomorrow : twilight;
+  const codetheme= theme === "tomorrow" ? tomorrow : atomOneDark;
   const match = /^language-(\w+)(-repl|-exec|-readonly)?\:?(.+)?$/.exec(
     className || ""
   );

app/actions/chatActions.ts

@@ -1,7 +1,7 @@
 'use server';
 
-import { GoogleGenerativeAI } from "@google/generative-ai";
 import { z } from "zod";
+import { generateContent } from "./gemini";
 
 interface FormState {
   response: string;
@@ -13,8 +13,6 @@ const ChatSchema = z.object({
   documentContent: z.string().min(1, { message: "コンテキストとなるドキュメントがありません。"}),
 });
 
-const genAI = new GoogleGenerativeAI(process.env.API_KEY!);
-
 type ChatParams = z.input<typeof ChatSchema>;
 
 export async function askAI(params: ChatParams): Promise<FormState> {
@@ -30,7 +28,7 @@ export async function askAI(params: ChatParams): Promise<FormState> {
   const { userQuestion, documentContent } = parseResult.data;
 
   try {
-    const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash" });
+    
     const prompt = `
 以下のPythonチュートリアルのドキュメントの内容を正確に理解し、ユーザーからの質問に対して、初心者にも分かりやすく、丁寧な解説を提供してください。
 
@@ -48,9 +46,11 @@ ${userQuestion}
 - 
 
 `;
-    const result = await model.generateContent(prompt);
-    const response = result.response;
-    const text = response.text();
+    const result = await generateContent(prompt);
+    const text = result.text;
+    if (!text) {
+      throw new Error("AIからの応答が空でした");
+    }
     return { response: text, error: null };
   } catch (error: unknown) {
     console.error("Error calling Generative AI:", error);

app/actions/gemini.ts

@@ -0,0 +1,29 @@
+"use server";
+
+import { GoogleGenAI } from "@google/genai";
+
+export async function generateContent(prompt: string) {
+  const params = {
+    model: "gemini-2.5-flash",
+    contents: prompt,
+  };
+
+  const ai = new GoogleGenAI({ apiKey: process.env.API_KEY! });
+  
+  try {
+    return await ai.models.generateContent(params);
+  } catch (e: unknown) {
+    if (String(e).includes("User location is not supported")) {
+      // For the new API, we can use httpOptions to set a custom baseUrl
+      const aiWithProxy = new GoogleGenAI({ 
+        apiKey: process.env.API_KEY!,
+        httpOptions: {
+          baseUrl: "https://gemini-proxy.utcode.net",
+        },
+      });
+      return await aiWithProxy.models.generateContent(params);
+    } else {
+      throw e;
+    }
+  }
+}

app/actions/questionExample.ts

@@ -1,15 +1,13 @@
 "use server";
 
-import { GoogleGenerativeAI } from "@google/generative-ai";
 import { z } from "zod";
+import { generateContent } from "./gemini";
 
 const QuestionExampleSchema = z.object({
   lang: z.string().min(1),
   documentContent: z.string().min(1),
 });
 
-const genAI = new GoogleGenerativeAI(process.env.API_KEY!);
-
 type QuestionExampleParams = z.input<typeof QuestionExampleSchema>;
 
 export async function getQuestionExample(
@@ -28,16 +26,17 @@ export async function getQuestionExample(
 
   const { lang, documentContent } = parseResult.data;
 
-  const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash" });
   const prompt = `
 以下の${lang}チュートリアルのドキュメントに対して、想定される初心者のユーザーからの質問の例を箇条書きで複数挙げてください。
 強調などはせずテキストだけで1行ごとに1つ出力してください。
 
 # ドキュメント
 ${documentContent}
 `;
-  const result = await model.generateContent(prompt);
-  const response = result.response;
-  const text = response.text();
+  const result = await generateContent(prompt);
+  const text = result.text;
+  if (!text) {
+    throw new Error("AIからの応答が空でした");
+  }
   return text.trim().split("\n");
 }

app/globals.css

@@ -4,6 +4,7 @@
   themes: light --default, dark --prefersdark;
 };
 
+@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
 
 
 /* CDNからダウンロードするURLを指定したらなんかエラー出るので、npmでインストールしてlayout.tsxでimportすることにした */

app/terminal/terminal.tsx

@@ -121,6 +121,22 @@ export function useTerminal(props: TerminalProps) {
 
         term.open(terminalRef.current);
 
+        // https://github.com/xtermjs/xterm.js/issues/2478
+        // my.code();ではCtrl+Cでのkeyboardinterruptは要らないので、コピーペーストに置き換えてしまう
+        term.attachCustomKeyEventHandler((arg) => {
+          if (arg.ctrlKey && (arg.key === "c" || arg.key === "x") && arg.type === "keydown") {
+            const selection = term.getSelection();
+            if (selection) {
+              navigator.clipboard.writeText(selection);
+              return false;
+            }
+          }
+          if (arg.ctrlKey && arg.key === "v" && arg.type === "keydown") {
+            return false;
+          }
+          return true;
+        });
+
         setTermReady(true);
         onReadyRef.current?.();
       }