add chat function by koji · Pull Request #54 · koji/website

koji · 2026-02-21T22:13:24Z

add chat function

vercel · 2026-02-21T22:13:29Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
portfolio	Ready	Preview, Comment	Feb 22, 2026 8:36am
portfolio-nextjs	Ready	Preview, Comment	Feb 22, 2026 8:36am

Copilot

Pull request overview

Adds an end-to-end “Portfolio Chat” feature: a new React chat page/UI that calls a new Express + TypeScript backend implementing simple local retrieval (RAG-style) and a Cerebras chat-completions integration.

Changes:

Add /chat route + navigation link, and hash-based section navigation/scroll behavior on the home page.
Add chat UI (PortfolioChat) and a small frontend API client to call /api/chat.
Add a new backend service (Express server, ingestion, retrieval, Cerebras client) plus dev proxy/docs updates.

Reviewed changes

Copilot reviewed 24 out of 27 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
vite.config.ts	Adds Vite dev proxy for `/api` to the local chat backend.
src/pages/index.tsx	Adds hash-aware smooth scrolling so `/#section` navigation works after routing.
src/pages/Chat.tsx	Introduces dedicated chat page layout (background + nav + chat UI).
src/lib/chat-api.ts	Adds `sendChat` helper and shared frontend types for chat requests/responses.
src/components/PortfolioChat.tsx	Implements chat UI, message rendering (Markdown), and submit/loading/error handling.
src/components/Navigation.tsx	Updates section navigation to work across routes and adds link to `/chat`.
src/App.tsx	Registers the `/chat` route.
package.json	Adds `react-markdown` + `remark-gfm` dependencies.
bun.lock	Locks new frontend dependencies.
backend/tsconfig.json	Adds backend TypeScript configuration.
backend/src/types/chat.ts	Defines backend chat/retrieval types.
backend/src/services/retrieval.ts	Implements local token-based retrieval + chunking.
backend/src/services/mastraAdapter.ts	Adds a temporary context formatting seam for future RAG pipeline changes.
backend/src/services/chatService.ts	Orchestrates bootstrap (ingest/index) + retrieval + Cerebras call.
backend/src/services/cerebras.ts	Implements Cerebras chat completion client.
backend/src/server.ts	Sets up Express server, CORS, health endpoint, and mounts `/api/chat`.
backend/src/routes/chat.ts	Adds validated `/api/chat` POST endpoint (zod).
backend/src/ingest/loadDocuments.ts	Loads knowledge files from repo and `backend/knowledge/*` for retrieval context.
backend/package.json	Adds backend package definition and scripts.
backend/knowledge/cv/README.md	Documents where to place CV knowledge files.
backend/knowledge/about/README.md	Documents where to place “about” knowledge files.
backend/bun.lock	Locks backend dependencies.
backend/README.md	Backend setup/run instructions.
backend/.env.example	Backend environment variable template.
README.md	Updates root documentation to include chat feature and backend setup.
.gitignore	Ignores `backend/.env`.
.env.example	Adds frontend env template for optional backend base URL.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-21T22:19:05Z

+  const onSubmit = async (event: FormEvent) => {
+    event.preventDefault();
+
+    const nextMessage = input.trim();
+    if (!nextMessage || isLoading) return;
+
+    setIsLoading(true);
+    setError(null);
+    setInput('');
+
+    const userMessage: Message = { role: 'user', content: nextMessage };
+    setMessages((prev) => [...prev, userMessage]);
+
+    try {
+      const response = await sendChat({
+        message: nextMessage,
+        history: [...history, { role: 'user', content: nextMessage }],
+      });


New chat interaction logic (submit -> loading state -> success/error rendering) isn’t covered by tests. The repo already has component tests under src/components/tests, so this should have at least a basic test verifying submit behavior (disables button while loading, appends user message, renders assistant response, and shows an error on failure).

Copilot · 2026-02-21T22:19:05Z

+
+dotenv.config();
+
+const port = Number(process.env.PORT ?? 8787);


PORT is parsed with Number(...), so an invalid value (e.g. PORT=abc) becomes NaN and will cause app.listen(...) to throw at runtime. Consider validating the parsed value (Number.isFinite) and either defaulting to 8787 or throwing a clear configuration error.

Suggested change

const port = Number(process.env.PORT ?? 8787);

const envPort = process.env.PORT;

const port = envPort === undefined ? 8787 : Number(envPort);

if (!Number.isFinite(port)) {

throw new Error(`Invalid PORT environment variable: "${envPort}". Expected a numeric port.`);

}

Copilot · 2026-02-21T22:19:06Z

+2. Start the chat backend in another terminal:
+   ```bash
+   cd backend
+   cp .env.example .env
+   # set CEREBRAS_API_KEY in backend/.env
+   bun run dev
+   ```


The root README uses bun run dev to start the backend, while the backend’s own README/scripts are written for pnpm dev (and the repo’s packageManager is pnpm). This inconsistency can confuse setup.

Align the command in the root README with the backend package.json scripts (e.g., pnpm dev from within backend/).

Copilot · 2026-02-21T22:19:06Z

+  async ask(message: string, history: ChatTurn[]) {
+    if (!this.isReady) {
+      await this.bootstrap();
+    }


ask() can call bootstrap() concurrently on multiple requests if they arrive before isReady flips to true, causing duplicate filesystem reads / indexing work (and potential racey logs). Consider guarding bootstrap with a shared promise (e.g., private bootstrapPromise?: Promise<void>) so only one bootstrap runs and others await it.

Copilot

Pull request overview

Copilot reviewed 24 out of 27 changed files in this pull request and generated 18 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-21T22:40:10Z

+  async ask(message: string, history: ChatTurn[]) {
+    if (!this.isReady) {
+      await this.bootstrap();
+    }


The chat service bootstrap is called on the first request (lazy initialization). If document loading is slow or fails, the first user will experience a long delay or see an error. Consider one of the following approaches:

Bootstrap eagerly when the server starts (call chatService.bootstrap() right after instantiation)

Add a startup health check that verifies bootstrap completed successfully

Add a timeout to bootstrap to prevent indefinite hangs

This would provide better user experience and make deployment issues more visible.

Copilot · 2026-02-21T22:40:10Z

+    <div className="max-h-[48vh] space-y-3 overflow-y-auto p-4">
+      {messages.map((message, index) => (
+        <ChatMessage key={`${message.role}-${index}`} message={message} />
+      ))}
+      {isLoading ? <p className="text-muted-foreground text-sm">回答を生成中...</p> : null}
+      {error ? <p className="text-destructive text-xs">{error}</p> : null}
+    </div>


The chat messages container lacks proper ARIA attributes for screen readers. Consider adding:

role="log" or role="region" with an appropriate aria-label

aria-live="polite" to announce new messages

aria-atomic="false" to announce only new messages, not the entire list

This would improve accessibility for users who rely on screen readers to understand when new messages arrive.

Copilot · 2026-02-21T22:40:10Z

+      {isLoading ? <p className="text-muted-foreground text-sm">回答を生成中...</p> : null}
+      {error ? <p className="text-destructive text-xs">{error}</p> : null}


The loading and error states are displayed as paragraph elements without proper ARIA live region attributes. Screen reader users may not be aware that the status has changed. Consider adding:

role="status" and aria-live="polite" for the loading message

role="alert" and aria-live="assertive" for error messages

This would ensure that status changes are properly announced to assistive technology users.

Suggested change

{isLoading ? 回答を生成中... : null}

{error ? {error} : null}

{isLoading ? (



回答を生成中...



) : null}

{error ? (



{error}



) : null}

Copilot · 2026-02-21T22:40:13Z

+  private fallback(limit: number): Chunk[] {
+    const preferredTypes: Array<Chunk['sourceType']> = ['about', 'cv', 'site'];
+    const ordered: Chunk[] = [];
+
+    for (const sourceType of preferredTypes) {
+      for (const chunk of this.chunks) {
+        if (chunk.sourceType === sourceType) {
+          ordered.push(chunk);
+        }
+      }
+    }
+
+    return ordered.slice(0, limit);
+  }


The fallback method iterates through all chunks for each source type, resulting in O(n*m) complexity where n is the number of chunks and m is the number of source types. For large document sets, this could be slow.

Consider optimizing by:

Pre-grouping chunks by sourceType in the upsertDocuments method

Storing chunks in a Map keyed by sourceType

Using a single pass to collect chunks from preferred types

This would improve performance when the fallback is triggered (e.g., when queries have no matching tokens).

Copilot · 2026-02-21T22:40:13Z

+        role: z.enum(['user', 'assistant']),
+        content: z.string().min(1),
+      }),
+    )


The chat history array has no maximum length validation. This could allow unbounded history arrays to be sent to the API, potentially causing:

Large payload sizes that could trigger the 1mb body limit

Excessive token usage in the Cerebras API call

Potential performance issues

Consider adding a maximum length constraint to the history array validation, for example:

history: z.array(...).max(50).default([])

This would prevent abuse and ensure predictable API usage.

Suggested change

)

)

.max(50)

Copilot · 2026-02-21T22:40:13Z

+  const [error, setError] = useState<string | null>(null);
+
+  const history = useMemo<ChatTurn[]>(
+    () => messages.filter((m) => m !== INITIAL_MESSAGE).map((m) => ({ role: m.role, content: m.content })),


The INITIAL_MESSAGE is filtered out from the history using object reference equality. This approach is fragile because:

If INITIAL_MESSAGE is accidentally mutated, the comparison will fail

If the message is serialized/deserialized (e.g., from localStorage), the reference will be lost

Consider using a more robust approach such as:

Adding an id field to messages and filtering by id !== 'initial'

Filtering based on a flag like isInitial: true

Simply skipping the first message if it matches the expected content

This would make the code more maintainable and less prone to bugs.

Suggested change

() => messages.filter((m) => m !== INITIAL_MESSAGE).map((m) => ({ role: m.role, content: m.content })),

() => {

const nonInitialMessages =

messages.length > 0 &&

messages[0].role === INITIAL_MESSAGE.role &&

messages[0].content === INITIAL_MESSAGE.content

? messages.slice(1)

: messages;

return nonInitialMessages.map((m) => ({ role: m.role, content: m.content }));

},

Copilot · 2026-02-21T22:40:14Z

+import { sendChat, type ChatTurn } from '@/lib/chat-api';
+import { FormEvent, memo, useMemo, useState } from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+
+type Message = {
+  role: ChatTurn['role'];
+  content: string;
+  sources?: Array<{ title: string; sourceType: string }>;
+};
+
+const INITIAL_MESSAGE: Message = {
+  role: 'assistant',
+  content: 'ポートフォリオについて質問できます。例えば「得意技術は？」「最近のプロジェクトは？」など。',
+};
+
+const REMARK_PLUGINS = [remarkGfm];
+
+const ChatMessage = memo(({ message }: { message: Message }) => (
+  <div
+    className={`rounded-lg px-3 py-2 text-sm ${
+      message.role === 'assistant' ? 'bg-muted text-foreground' : 'bg-primary text-primary-foreground'
+    }`}
+  >
+    <ReactMarkdown
+      className="prose prose-sm max-w-none whitespace-pre-wrap break-words prose-p:my-2 prose-table:my-2 prose-th:border prose-th:px-2 prose-th:py-1 prose-td:border prose-td:px-2 prose-td:py-1 prose-ul:my-2 prose-ol:my-2 prose-li:my-1"
+      remarkPlugins={REMARK_PLUGINS}
+    >
+      {message.content}
+    </ReactMarkdown>
+    {message.sources && message.sources.length > 0 ? (
+      <p className="mt-2 text-[11px] opacity-80">
+        Sources:{' '}
+        {message.sources
+          .slice(0, 3)
+          .map((source) => `${source.title} (${source.sourceType})`)
+          .join(', ')}
+      </p>
+    ) : null}
+  </div>
+));
+
+ChatMessage.displayName = 'ChatMessage';
+
+const ChatMessages = memo(
+  ({
+    messages,
+    isLoading,
+    error,
+  }: {
+    messages: Message[];
+    isLoading: boolean;
+    error: string | null;
+  }) => (
+    <div className="max-h-[48vh] space-y-3 overflow-y-auto p-4">
+      {messages.map((message, index) => (
+        <ChatMessage key={`${message.role}-${index}`} message={message} />
+      ))}
+      {isLoading ? <p className="text-muted-foreground text-sm">回答を生成中...</p> : null}
+      {error ? <p className="text-destructive text-xs">{error}</p> : null}
+    </div>
+  ),
+);
+
+ChatMessages.displayName = 'ChatMessages';
+
+const PortfolioChat = () => {
+  const [input, setInput] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [messages, setMessages] = useState<Message[]>([INITIAL_MESSAGE]);
+  const [error, setError] = useState<string | null>(null);
+
+  const history = useMemo<ChatTurn[]>(
+    () => messages.filter((m) => m !== INITIAL_MESSAGE).map((m) => ({ role: m.role, content: m.content })),
+    [messages],
+  );
+
+  const onSubmit = async (event: FormEvent) => {
+    event.preventDefault();
+
+    const nextMessage = input.trim();
+    if (!nextMessage || isLoading) return;
+
+    setIsLoading(true);
+    setError(null);
+    setInput('');
+
+    const userMessage: Message = { role: 'user', content: nextMessage };
+    setMessages((prev) => [...prev, userMessage]);
+
+    try {
+      const response = await sendChat({
+        message: nextMessage,
+        history: [...history, { role: 'user', content: nextMessage }],
+      });
+
+      setMessages((prev) => [
+        ...prev,
+        {
+          role: 'assistant',
+          content: response.answer,
+          sources: response.sources.map((source) => ({
+            title: source.title,
+            sourceType: source.sourceType,
+          })),
+        },
+      ]);
+    } catch (submitError) {
+      const message = submitError instanceof Error ? submitError.message : '不明なエラーが発生しました';
+      setError(message);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <section className="py-16 md:py-24" id="chat">
+      <div className="mx-auto w-[min(100%-2rem,960px)]">
+        <div className="mb-5">
+          <h2 className="font-bold text-2xl md:text-3xl">Portfolio Chat</h2>
+          <p className="mt-2 text-muted-foreground text-sm md:text-base">
+            サイト情報・CV・自己紹介データをもとに、あなたの質問に回答します。
+          </p>
+        </div>
+
+        <div className="rounded-xl border border-border bg-background/90 shadow-lg backdrop-blur-sm">
+          <ChatMessages messages={messages} isLoading={isLoading} error={error} />
+
+          <form className="border-t border-border p-4" onSubmit={onSubmit}>
+            <textarea
+              className="mb-3 min-h-[96px] w-full resize-none rounded-md border border-input bg-background px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-ring"
+              onChange={(event) => setInput(event.target.value)}
+              placeholder="質問を入力..."
+              value={input}
+            />
+            <button
+              className="w-full rounded-md bg-primary px-3 py-2 font-medium text-primary-foreground text-sm disabled:opacity-50"
+              disabled={isLoading || input.trim().length === 0}
+              type="submit"
+            >
+              {isLoading ? '送信中...' : '送信'}
+            </button>
+          </form>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default PortfolioChat;


The new chat functionality (PortfolioChat component, chat-api client, and ChatPage) lacks test coverage. The repository has comprehensive test coverage for other components (as seen in src/components/tests), but none for the chat feature.

Consider adding tests for:

PortfolioChat component rendering and user interactions

Form submission and validation

Error handling scenarios

Loading states

Message display and history management

API client error handling

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

add chat function

556b7b1

koji requested a review from Copilot February 21, 2026 22:13

Copilot started reviewing on behalf of koji February 21, 2026 22:13

View session

Copilot AI reviewed Feb 21, 2026

View reviewed changes

modify prompt

22ca86c

vercel Bot deployed to Preview February 21, 2026 22:21

View deployment

modify code a little bit

4d24e1d

vercel Bot deployed to Preview February 21, 2026 22:26

View deployment

address feedback

0b9a431

koji requested a review from Copilot February 21, 2026 22:35

vercel Bot deployed to Preview February 21, 2026 22:35

View deployment

Copilot started reviewing on behalf of koji February 21, 2026 22:35

View session

Copilot AI reviewed Feb 21, 2026

View reviewed changes

modify chat interface

e37bdfd

vercel Bot deployed to Preview February 21, 2026 22:41

View deployment

address feedback

8277bed

vercel Bot deployed to Preview February 21, 2026 22:46

View deployment

Apply suggestion from @Copilot

d2c04bb

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

vercel Bot deployed to Preview February 21, 2026 22:48

View deployment

Apply suggestion from @Copilot

7741b42

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

vercel Bot deployed to Preview February 21, 2026 22:51

View deployment

Apply suggestion from @Copilot

6c1ab01

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

vercel Bot deployed to Preview February 21, 2026 22:52

View deployment

Apply suggestion from @Copilot

06f80eb

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

vercel Bot deployed to Preview February 21, 2026 22:54

View deployment

address feedback

692ea82

vercel Bot deployed to Preview February 21, 2026 22:55

View deployment

Apply suggestion from @Copilot

d8060ef

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

vercel Bot deployed to Preview February 21, 2026 22:55

View deployment

Apply suggestion from @Copilot

8d918e3

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

vercel Bot deployed to Preview February 21, 2026 22:58

View deployment

modify readme

19b0f5e

vercel Bot deployed to Preview February 21, 2026 23:00

View deployment

modify bun version

e723a1d

vercel Bot deployed to Preview February 21, 2026 23:02

View deployment

koji added 2 commits February 22, 2026 03:35

Merge branch 'main' into feat_chat-function

fc595a9

Create bun.lock

9e0fca0

vercel Bot deployed to Preview February 22, 2026 08:36

View deployment


		dotenv.config();

		const port = Number(process.env.PORT ?? 8787);

-const port = Number(process.env.PORT ?? 8787);
+const envPort = process.env.PORT;
+const port = envPort === undefined ? 8787 : Number(envPort);
+if (!Number.isFinite(port)) {
+  throw new Error(`Invalid PORT environment variable: "${envPort}". Expected a numeric port.`);
+}

		{isLoading ? <p className="text-muted-foreground text-sm">回答を生成中...</p> : null}
		{error ? <p className="text-destructive text-xs">{error}</p> : null}

-    () => messages.filter((m) => m !== INITIAL_MESSAGE).map((m) => ({ role: m.role, content: m.content })),
+    () => {
+      const nonInitialMessages =
+        messages.length > 0 &&
+        messages[0].role === INITIAL_MESSAGE.role &&
+        messages[0].content === INITIAL_MESSAGE.content
+          ? messages.slice(1)
+          : messages;
+      return nonInitialMessages.map((m) => ({ role: m.role, content: m.content }));
+    },

Conversation

koji commented Feb 21, 2026

Uh oh!

vercel Bot commented Feb 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Copilot AI Feb 21, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 21, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Feb 21, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 21, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Feb 21, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 21, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 21, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Copilot AI Feb 21, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 21, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Feb 21, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 21, 2026

Choose a reason for hiding this comment

Uh oh!

This branch was successfully deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

vercel Bot commented Feb 21, 2026 •

edited

Loading