adding a button for fixing all errors (#1785)
closes #1688 <!-- This is an auto-generated description by cubic. --> --- ## Summary by cubic Add a “Fix All Errors” button to the chat that collects all error messages and sends a single request to resolve them. This helps users fix multiple errors in one step. - New Features - Parse dyad-output type=error messages and track count/last index in DyadMarkdownParser. - Show FixAllErrorsButton after the last error when there are 2+ errors, not streaming, and chatId is present. - Button streams a prompt listing all errors, shows a loading state, and displays the error count. <sup>Written for commit b9762955d3b9cecd3b00c9efb478ce599f60e32d. Summary will update automatically on new commits.</sup> <!-- End of auto-generated description by cubic. -->
This commit is contained in:
committed by
GitHub
parent
40aeed1456
commit
90c5805b57
@@ -28,6 +28,7 @@ import { DyadCodeSearch } from "./DyadCodeSearch";
|
||||
import { DyadRead } from "./DyadRead";
|
||||
import { mapActionToButton } from "./ChatInput";
|
||||
import { SuggestedAction } from "@/lib/schemas";
|
||||
import { FixAllErrorsButton } from "./FixAllErrorsButton";
|
||||
|
||||
interface DyadMarkdownParserProps {
|
||||
content: string;
|
||||
@@ -90,6 +91,34 @@ export const DyadMarkdownParser: React.FC<DyadMarkdownParserProps> = ({
|
||||
return parseCustomTags(content);
|
||||
}, [content]);
|
||||
|
||||
// Extract error messages and track positions
|
||||
const { errorMessages, lastErrorIndex, errorCount } = useMemo(() => {
|
||||
const errors: string[] = [];
|
||||
let lastIndex = -1;
|
||||
let count = 0;
|
||||
|
||||
contentPieces.forEach((piece, index) => {
|
||||
if (
|
||||
piece.type === "custom-tag" &&
|
||||
piece.tagInfo.tag === "dyad-output" &&
|
||||
piece.tagInfo.attributes.type === "error"
|
||||
) {
|
||||
const errorMessage = piece.tagInfo.attributes.message;
|
||||
if (errorMessage?.trim()) {
|
||||
errors.push(errorMessage.trim());
|
||||
count++;
|
||||
lastIndex = index;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
errorMessages: errors,
|
||||
lastErrorIndex: lastIndex,
|
||||
errorCount: count,
|
||||
};
|
||||
}, [contentPieces]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{contentPieces.map((piece, index) => (
|
||||
@@ -106,6 +135,17 @@ export const DyadMarkdownParser: React.FC<DyadMarkdownParserProps> = ({
|
||||
</ReactMarkdown>
|
||||
)
|
||||
: renderCustomTag(piece.tagInfo, { isStreaming })}
|
||||
{index === lastErrorIndex &&
|
||||
errorCount > 1 &&
|
||||
!isStreaming &&
|
||||
chatId && (
|
||||
<div className="mt-3 w-full flex">
|
||||
<FixAllErrorsButton
|
||||
errorMessages={errorMessages}
|
||||
chatId={chatId}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</>
|
||||
|
||||
47
src/components/chat/FixAllErrorsButton.tsx
Normal file
47
src/components/chat/FixAllErrorsButton.tsx
Normal file
@@ -0,0 +1,47 @@
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useStreamChat } from "@/hooks/useStreamChat";
|
||||
import { Sparkles, Loader2 } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
|
||||
interface FixAllErrorsButtonProps {
|
||||
errorMessages: string[];
|
||||
chatId: number;
|
||||
}
|
||||
|
||||
export function FixAllErrorsButton({
|
||||
errorMessages,
|
||||
chatId,
|
||||
}: FixAllErrorsButtonProps) {
|
||||
const { streamMessage } = useStreamChat();
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const handleFixAllErrors = () => {
|
||||
setIsLoading(true);
|
||||
const allErrors = errorMessages
|
||||
.map((msg, i) => `${i + 1}. ${msg}`)
|
||||
.join("\n");
|
||||
|
||||
streamMessage({
|
||||
prompt: `Fix all of the following errors:\n\n${allErrors}`,
|
||||
chatId,
|
||||
onSettled: () => setIsLoading(false),
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={isLoading}
|
||||
onClick={handleFixAllErrors}
|
||||
className="bg-red-50 hover:bg-red-100 dark:bg-red-950 dark:hover:bg-red-900 text-red-700 dark:text-red-300 border-red-200 dark:border-red-800 ml-auto hover:cursor-pointer"
|
||||
>
|
||||
{isLoading ? (
|
||||
<Loader2 size={16} className="mr-1 animate-spin" />
|
||||
) : (
|
||||
<Sparkles size={16} className="mr-1" />
|
||||
)}
|
||||
Fix All Errors ({errorMessages.length})
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user