refactor: streamline AI enhancement logic in feature dialogs

- Simplified the handling of enhanced text in AddFeatureDialog and EditFeatureDialog by storing the enhanced text in a variable before updating the state.
- Updated the dropdown menu and button components to ensure consistent styling and behavior across both dialogs.
- Enhanced user experience by ensuring the cursor style indicates interactivity in the dropdown menus.

This refactor improves code readability and maintains a consistent UI experience.
This commit is contained in:
SuperComboGamer
2025-12-16 01:48:28 -05:00
parent 7131c70186
commit 1641f9da5e
4 changed files with 91 additions and 89 deletions

View File

@@ -165,7 +165,8 @@ export function AddFeatureDialog({
); );
if (result?.success && result.enhancedText) { if (result?.success && result.enhancedText) {
setNewFeature(prev => ({ ...prev, description: result.enhancedText! })); const enhancedText = result.enhancedText;
setNewFeature(prev => ({ ...prev, description: enhancedText }));
toast.success("Description enhanced!"); toast.success("Description enhanced!");
} else { } else {
toast.error(result?.error || "Failed to enhance description"); toast.error(result?.error || "Failed to enhance description");
@@ -242,7 +243,7 @@ export function AddFeatureDialog({
</TabsList> </TabsList>
{/* Prompt Tab */} {/* Prompt Tab */}
<TabsContent value="prompt" className="space-y-4 overflow-y-auto"> <TabsContent value="prompt" className="space-y-4 overflow-y-auto cursor-default">
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="description">Description</Label> <Label htmlFor="description">Description</Label>
<DescriptionImageDropZone <DescriptionImageDropZone
@@ -263,45 +264,45 @@ export function AddFeatureDialog({
autoFocus autoFocus
error={descriptionError} error={descriptionError}
/> />
<div className="flex items-center gap-3 mt-2"> </div>
<DropdownMenu> <div className="flex w-fit items-center gap-3 select-none cursor-default">
<DropdownMenuTrigger asChild> <DropdownMenu>
<Button variant="outline" size="sm" className="w-[180px] justify-between"> <DropdownMenuTrigger asChild>
{enhancementMode === 'improve' && 'Improve Clarity'} <Button variant="outline" size="sm" className="w-[180px] justify-between">
{enhancementMode === 'technical' && 'Add Technical Details'} {enhancementMode === 'improve' && 'Improve Clarity'}
{enhancementMode === 'simplify' && 'Simplify'} {enhancementMode === 'technical' && 'Add Technical Details'}
{enhancementMode === 'acceptance' && 'Add Acceptance Criteria'} {enhancementMode === 'simplify' && 'Simplify'}
<ChevronDown className="w-4 h-4 ml-2" /> {enhancementMode === 'acceptance' && 'Add Acceptance Criteria'}
</Button> <ChevronDown className="w-4 h-4 ml-2" />
</DropdownMenuTrigger> </Button>
<DropdownMenuContent align="start"> </DropdownMenuTrigger>
<DropdownMenuItem onClick={() => setEnhancementMode('improve')}> <DropdownMenuContent align="start">
Improve Clarity <DropdownMenuItem onClick={() => setEnhancementMode('improve')}>
</DropdownMenuItem> Improve Clarity
<DropdownMenuItem onClick={() => setEnhancementMode('technical')}> </DropdownMenuItem>
Add Technical Details <DropdownMenuItem onClick={() => setEnhancementMode('technical')}>
</DropdownMenuItem> Add Technical Details
<DropdownMenuItem onClick={() => setEnhancementMode('simplify')}> </DropdownMenuItem>
Simplify <DropdownMenuItem onClick={() => setEnhancementMode('simplify')}>
</DropdownMenuItem> Simplify
<DropdownMenuItem onClick={() => setEnhancementMode('acceptance')}> </DropdownMenuItem>
Add Acceptance Criteria <DropdownMenuItem onClick={() => setEnhancementMode('acceptance')}>
</DropdownMenuItem> Add Acceptance Criteria
</DropdownMenuContent> </DropdownMenuItem>
</DropdownMenu> </DropdownMenuContent>
</DropdownMenu>
<Button <Button
type="button" type="button"
variant="outline" variant="outline"
size="sm" size="sm"
onClick={handleEnhanceDescription} onClick={handleEnhanceDescription}
disabled={!newFeature.description.trim() || isEnhancing} disabled={!newFeature.description.trim() || isEnhancing}
loading={isEnhancing} loading={isEnhancing}
> >
<Sparkles className="w-4 h-4 mr-2" /> <Sparkles className="w-4 h-4 mr-2" />
Enhance with AI Enhance with AI
</Button> </Button>
</div>
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="category">Category (optional)</Label> <Label htmlFor="category">Category (optional)</Label>
@@ -318,7 +319,7 @@ export function AddFeatureDialog({
</TabsContent> </TabsContent>
{/* Model Tab */} {/* Model Tab */}
<TabsContent value="model" className="space-y-4 overflow-y-auto"> <TabsContent value="model" className="space-y-4 overflow-y-auto cursor-default">
{/* Show Advanced Options Toggle */} {/* Show Advanced Options Toggle */}
{showProfilesOnly && ( {showProfilesOnly && (
<div className="flex items-center justify-between p-3 bg-muted/30 rounded-lg border border-border"> <div className="flex items-center justify-between p-3 bg-muted/30 rounded-lg border border-border">
@@ -381,7 +382,7 @@ export function AddFeatureDialog({
</TabsContent> </TabsContent>
{/* Testing Tab */} {/* Testing Tab */}
<TabsContent value="testing" className="space-y-4 overflow-y-auto"> <TabsContent value="testing" className="space-y-4 overflow-y-auto cursor-default">
<TestingTabContent <TestingTabContent
skipTests={newFeature.skipTests} skipTests={newFeature.skipTests}
onSkipTestsChange={(skipTests) => onSkipTestsChange={(skipTests) =>

View File

@@ -154,7 +154,8 @@ export function EditFeatureDialog({
); );
if (result?.success && result.enhancedText) { if (result?.success && result.enhancedText) {
setEditingFeature(prev => prev ? { ...prev, description: result.enhancedText! } : prev); const enhancedText = result.enhancedText;
setEditingFeature(prev => prev ? { ...prev, description: enhancedText } : prev);
toast.success("Description enhanced!"); toast.success("Description enhanced!");
} else { } else {
toast.error(result?.error || "Failed to enhance description"); toast.error(result?.error || "Failed to enhance description");
@@ -215,7 +216,7 @@ export function EditFeatureDialog({
</TabsList> </TabsList>
{/* Prompt Tab */} {/* Prompt Tab */}
<TabsContent value="prompt" className="space-y-4 overflow-y-auto"> <TabsContent value="prompt" className="space-y-4 overflow-y-auto cursor-default">
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="edit-description">Description</Label> <Label htmlFor="edit-description">Description</Label>
<DescriptionImageDropZone <DescriptionImageDropZone
@@ -238,45 +239,45 @@ export function EditFeatureDialog({
onPreviewMapChange={setEditFeaturePreviewMap} onPreviewMapChange={setEditFeaturePreviewMap}
data-testid="edit-feature-description" data-testid="edit-feature-description"
/> />
<div className="flex items-center gap-3 mt-2"> </div>
<DropdownMenu> <div className="flex w-fit items-center gap-3 select-none cursor-default">
<DropdownMenuTrigger asChild> <DropdownMenu>
<Button variant="outline" size="sm" className="w-[180px] justify-between"> <DropdownMenuTrigger asChild>
{enhancementMode === 'improve' && 'Improve Clarity'} <Button variant="outline" size="sm" className="w-[180px] justify-between">
{enhancementMode === 'technical' && 'Add Technical Details'} {enhancementMode === 'improve' && 'Improve Clarity'}
{enhancementMode === 'simplify' && 'Simplify'} {enhancementMode === 'technical' && 'Add Technical Details'}
{enhancementMode === 'acceptance' && 'Add Acceptance Criteria'} {enhancementMode === 'simplify' && 'Simplify'}
<ChevronDown className="w-4 h-4 ml-2" /> {enhancementMode === 'acceptance' && 'Add Acceptance Criteria'}
</Button> <ChevronDown className="w-4 h-4 ml-2" />
</DropdownMenuTrigger> </Button>
<DropdownMenuContent align="start"> </DropdownMenuTrigger>
<DropdownMenuItem onClick={() => setEnhancementMode('improve')}> <DropdownMenuContent align="start">
Improve Clarity <DropdownMenuItem onClick={() => setEnhancementMode('improve')}>
</DropdownMenuItem> Improve Clarity
<DropdownMenuItem onClick={() => setEnhancementMode('technical')}> </DropdownMenuItem>
Add Technical Details <DropdownMenuItem onClick={() => setEnhancementMode('technical')}>
</DropdownMenuItem> Add Technical Details
<DropdownMenuItem onClick={() => setEnhancementMode('simplify')}> </DropdownMenuItem>
Simplify <DropdownMenuItem onClick={() => setEnhancementMode('simplify')}>
</DropdownMenuItem> Simplify
<DropdownMenuItem onClick={() => setEnhancementMode('acceptance')}> </DropdownMenuItem>
Add Acceptance Criteria <DropdownMenuItem onClick={() => setEnhancementMode('acceptance')}>
</DropdownMenuItem> Add Acceptance Criteria
</DropdownMenuContent> </DropdownMenuItem>
</DropdownMenu> </DropdownMenuContent>
</DropdownMenu>
<Button <Button
type="button" type="button"
variant="outline" variant="outline"
size="sm" size="sm"
onClick={handleEnhanceDescription} onClick={handleEnhanceDescription}
disabled={!editingFeature.description.trim() || isEnhancing} disabled={!editingFeature.description.trim() || isEnhancing}
loading={isEnhancing} loading={isEnhancing}
> >
{!isEnhancing && <Sparkles className="w-4 h-4 mr-2" />} <Sparkles className="w-4 h-4 mr-2" />
Enhance with AI Enhance with AI
</Button> </Button>
</div>
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="edit-category">Category (optional)</Label> <Label htmlFor="edit-category">Category (optional)</Label>
@@ -296,7 +297,7 @@ export function EditFeatureDialog({
</TabsContent> </TabsContent>
{/* Model Tab */} {/* Model Tab */}
<TabsContent value="model" className="space-y-4 overflow-y-auto"> <TabsContent value="model" className="space-y-4 overflow-y-auto cursor-default">
{/* Show Advanced Options Toggle */} {/* Show Advanced Options Toggle */}
{showProfilesOnly && ( {showProfilesOnly && (
<div className="flex items-center justify-between p-3 bg-muted/30 rounded-lg border border-border"> <div className="flex items-center justify-between p-3 bg-muted/30 rounded-lg border border-border">
@@ -362,7 +363,7 @@ export function EditFeatureDialog({
</TabsContent> </TabsContent>
{/* Testing Tab */} {/* Testing Tab */}
<TabsContent value="testing" className="space-y-4 overflow-y-auto"> <TabsContent value="testing" className="space-y-4 overflow-y-auto cursor-default">
<TestingTabContent <TestingTabContent
skipTests={editingFeature.skipTests ?? false} skipTests={editingFeature.skipTests ?? false}
onSkipTestsChange={(skipTests) => onSkipTestsChange={(skipTests) =>

View File

@@ -1,7 +1,7 @@
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
import { Sparkles } from "lucide-react"; import { Sparkles } from "lucide-react";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { useAppStore, type AgentModel } from "@/store/app-store"; import { useAppStore } from "@/store/app-store";
import { CLAUDE_MODELS } from "@/components/views/board-view/shared/model-constants"; import { CLAUDE_MODELS } from "@/components/views/board-view/shared/model-constants";
export function AIEnhancementSection() { export function AIEnhancementSection() {
@@ -38,7 +38,7 @@ export function AIEnhancementSection() {
return ( return (
<button <button
key={id} key={id}
onClick={() => setEnhancementModel(id as AgentModel)} onClick={() => setEnhancementModel(id)}
className={cn( className={cn(
"group flex flex-col items-start gap-2 px-4 py-4 rounded-xl text-left", "group flex flex-col items-start gap-2 px-4 py-4 rounded-xl text-left",
"transition-all duration-200 ease-out", "transition-all duration-200 ease-out",

View File

@@ -14,7 +14,7 @@ import {
isValidEnhancementMode, isValidEnhancementMode,
type EnhancementMode, type EnhancementMode,
} from "../../../lib/enhancement-prompts.js"; } from "../../../lib/enhancement-prompts.js";
import { resolveModelString } from "../../../lib/model-resolver.js"; import { resolveModelString, CLAUDE_MODEL_MAP } from "../../../lib/model-resolver.js";
const logger = createLogger("EnhancePrompt"); const logger = createLogger("EnhancePrompt");
@@ -68,7 +68,7 @@ async function extractTextFromStream(
if (msg.type === "assistant" && msg.message?.content) { if (msg.type === "assistant" && msg.message?.content) {
for (const block of msg.message.content) { for (const block of msg.message.content) {
if (block.type === "text" && block.text) { if (block.type === "text" && block.text) {
responseText = block.text; responseText += block.text;
} }
} }
} else if (msg.type === "result" && msg.subtype === "success") { } else if (msg.type === "result" && msg.subtype === "success") {
@@ -141,7 +141,7 @@ export function createEnhanceHandler(): (
const userPrompt = buildUserPrompt(validMode, trimmedText, true); const userPrompt = buildUserPrompt(validMode, trimmedText, true);
// Resolve the model - use the passed model, default to sonnet for quality // Resolve the model - use the passed model, default to sonnet for quality
const resolvedModel = resolveModelString(model, "claude-sonnet-4-20250514"); const resolvedModel = resolveModelString(model, CLAUDE_MODEL_MAP.sonnet);
logger.debug(`Using model: ${resolvedModel}`); logger.debug(`Using model: ${resolvedModel}`);