import { StrictMode, useState, useCallback, useEffect } from "react";
import { createRoot } from "react-dom/client";
import {
Box,
Text,
TextInput,
Button,
Flash,
Spinner,
FormControl,
} from "@primer/react";
import {
IssueOpenedIcon,
CheckCircleIcon,
} from "@primer/octicons-react";
import { AppProvider } from "../../components/AppProvider";
import { useMcpApp } from "../../hooks/useMcpApp";
import { MarkdownEditor } from "../../components/MarkdownEditor";
interface IssueResult {
ID?: string;
number?: number;
title?: string;
body?: string;
url?: string;
html_url?: string;
URL?: string;
}
function SuccessView({
issue,
owner,
repo,
submittedTitle,
isUpdate,
}: {
issue: IssueResult;
owner: string;
repo: string;
submittedTitle: string;
isUpdate: boolean;
}) {
const issueUrl = issue.html_url || issue.url || issue.URL || "#";
return (
<Box
borderWidth={1}
borderStyle="solid"
borderColor="border.default"
borderRadius={2}
bg="canvas.subtle"
p={3}
>
<Box
display="flex"
alignItems="center"
mb={3}
pb={3}
borderBottomWidth={1}
borderBottomStyle="solid"
borderBottomColor="border.default"
>
<Box sx={{ color: "success.fg", flexShrink: 0, mr: 2 }}>
<CheckCircleIcon size={16} />
</Box>
<Text sx={{ fontWeight: "semibold" }}>
{isUpdate ? "Issue updated successfully" : "Issue created successfully"}
</Text>
</Box>
<Box
display="flex"
alignItems="flex-start"
gap={2}
p={3}
bg="canvas.subtle"
borderRadius={2}
borderWidth={1}
borderStyle="solid"
borderColor="border.default"
>
<Box sx={{ color: "open.fg", flexShrink: 0, mt: "2px", mr: 1 }}>
<IssueOpenedIcon size={16} />
</Box>
<Box sx={{ minWidth: 0 }}>
<a
href={issueUrl}
target="_blank"
rel="noopener noreferrer"
style={{
fontWeight: 600,
fontSize: "14px",
display: "block",
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
color: "var(--fgColor-accent, var(--color-accent-fg))",
textDecoration: "none",
}}
>
{issue.title || submittedTitle}
{issue.number && (
<Text sx={{ color: "fg.muted", fontWeight: "normal", ml: 1 }}>
#{issue.number}
</Text>
)}
</a>
<Text sx={{ color: "fg.muted", fontSize: 0 }}>
{owner}/{repo}
</Text>
</Box>
</Box>
</Box>
);
}
function CreateIssueApp() {
const [title, setTitle] = useState("");
const [body, setBody] = useState("");
const [isSubmitting, setIsSubmitting] = useState(false);
const [error, setError] = useState<string | null>(null);
const [successIssue, setSuccessIssue] = useState<IssueResult | null>(null);
const { app, error: appError, toolInput, callTool } = useMcpApp({
appName: "github-mcp-server-issue-write",
});
const method = (toolInput?.method as string) || "create";
const issueNumber = toolInput?.issue_number as number | undefined;
const isUpdateMode = method === "update" && issueNumber !== undefined;
const owner = (toolInput?.owner as string) || "";
const repo = (toolInput?.repo as string) || "";
// Pre-fill from toolInput
useEffect(() => {
if (toolInput?.title) setTitle(toolInput.title as string);
if (toolInput?.body) setBody(toolInput.body as string);
}, [toolInput]);
const handleSubmit = useCallback(async () => {
if (!title.trim()) {
setError("Title is required");
return;
}
if (!owner || !repo) {
setError("Repository information not available");
return;
}
setIsSubmitting(true);
setError(null);
try {
const params: Record<string, unknown> = {
method: isUpdateMode ? "update" : "create",
owner,
repo,
title: title.trim(),
body: body.trim(),
_ui_submitted: true
};
if (isUpdateMode && issueNumber) {
params.issue_number = issueNumber;
}
const result = await callTool("issue_write", params);
if (result.isError) {
const textContent = result.content?.find(
(c: { type: string }) => c.type === "text"
);
setError(
(textContent as { text?: string })?.text || "Failed to create issue"
);
} else {
const textContent = result.content?.find(
(c: { type: string }) => c.type === "text"
);
if (textContent && "text" in textContent) {
try {
const issueData = JSON.parse(textContent.text as string);
setSuccessIssue(issueData);
} catch {
setSuccessIssue({ title, body });
}
}
}
} catch (e) {
setError(`Error: ${e instanceof Error ? e.message : String(e)}`);
} finally {
setIsSubmitting(false);
}
}, [title, body, owner, repo, isUpdateMode, issueNumber, callTool]);
if (appError) {
return (
<Flash variant="danger" sx={{ m: 2 }}>
Connection error: {appError.message}
</Flash>
);
}
if (!app) {
return (
<Box display="flex" alignItems="center" justifyContent="center" p={4}>
<Spinner size="medium" />
</Box>
);
}
if (successIssue) {
return (
<SuccessView
issue={successIssue}
owner={owner}
repo={repo}
submittedTitle={title}
isUpdate={isUpdateMode}
/>
);
}
return (
<Box
borderWidth={1}
borderStyle="solid"
borderColor="border.default"
borderRadius={2}
bg="canvas.subtle"
p={3}
>
{/* Header */}
<Box
display="flex"
alignItems="center"
gap={2}
mb={3}
pb={2}
borderBottomWidth={1}
borderBottomStyle="solid"
borderBottomColor="border.default"
>
<Box sx={{ color: "fg.default", flexShrink: 0, display: "flex", mr: 1 }}>
<IssueOpenedIcon size={16} />
</Box>
<Text sx={{ fontWeight: "semibold", whiteSpace: "nowrap" }}>
{isUpdateMode ? `Update issue #${issueNumber}` : "New issue"}
</Text>
<Text sx={{ color: "fg.muted", fontSize: 0, ml: 1 }}>
{owner}/{repo}
</Text>
</Box>
{/* Error banner */}
{error && (
<Flash variant="danger" sx={{ mb: 3 }}>
{error}
</Flash>
)}
{/* Title */}
<FormControl sx={{ mb: 3 }}>
<FormControl.Label sx={{ fontWeight: "semibold" }}>
Title
</FormControl.Label>
<TextInput
value={title}
onChange={(e) => setTitle(e.target.value)}
placeholder="Title"
block
contrast
/>
</FormControl>
{/* Description */}
<Box sx={{ mb: 3 }}>
<Text
as="label"
sx={{ fontWeight: "semibold", fontSize: 1, display: "block", mb: 2 }}
>
Description
</Text>
<MarkdownEditor
value={body}
onChange={setBody}
placeholder="Add a description..."
/>
</Box>
{/* Submit button */}
<Box display="flex" justifyContent="flex-end" gap={2}>
<Button
variant="primary"
onClick={handleSubmit}
disabled={isSubmitting || !title.trim()}
>
{isSubmitting ? (
<>
<Spinner size="small" sx={{ mr: 1 }} />
{isUpdateMode ? "Updating..." : "Creating..."}
</>
) : (
isUpdateMode ? "Update issue" : "Create issue"
)}
</Button>
</Box>
</Box>
);
}
createRoot(document.getElementById("root")!).render(
<StrictMode>
<AppProvider>
<CreateIssueApp />
</AppProvider>
</StrictMode>
);
