Skip to content

Commit ec70d2b

Browse files
ahmedkhaleel2004ahmedkhaleel2004
committedFeb 13, 2025·
fix loading state
1 parent 2f66e12 commit ec70d2b

File tree

4 files changed

+99
-83
lines changed

4 files changed

+99
-83
lines changed
 

‎backend/app/routers/generate.py

+1-1
Original file line numberDiff line numberDiff line change
@@ -179,7 +179,7 @@ async def generate(request: Request, body: ApiRequest):
179179
"instructions": body.instructions,
180180
},
181181
api_key=body.api_key,
182-
reasoning_effort="high",
182+
reasoning_effort="medium",
183183
)
184184

185185
# check for and remove code block tags

‎backend/app/services/o3_mini_openrouter_service.py

+1-1
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ def call_o3_api(
2121
system_prompt: str,
2222
data: dict,
2323
api_key: str | None = None,
24-
reasoning_effort: Literal["low", "medium", "high"] = "medium",
24+
reasoning_effort: Literal["low", "medium", "high"] = "low",
2525
) -> str:
2626
"""
2727
Makes an API call to OpenRouter O3 and returns the response.

‎src/app/[username]/[repo]/page.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ export default function Repo() {
4545
onExportImage={handleExportImage}
4646
zoomingEnabled={zoomingEnabled}
4747
onZoomToggle={() => setZoomingEnabled(!zoomingEnabled)}
48+
loading={loading}
4849
/>
4950
</div>
5051
<div className="mt-8 flex w-full flex-col items-center gap-8">

‎src/components/main-card.tsx

+96-81
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ interface MainCardProps {
2525
onExportImage?: () => void;
2626
zoomingEnabled?: boolean;
2727
onZoomToggle?: () => void;
28+
loading?: boolean;
2829
}
2930

3031
export default function MainCard({
@@ -39,6 +40,7 @@ export default function MainCard({
3940
onExportImage,
4041
zoomingEnabled,
4142
onZoomToggle,
43+
loading,
4244
}: MainCardProps) {
4345
const [repoUrl, setRepoUrl] = useState("");
4446
const [error, setError] = useState("");
@@ -53,6 +55,12 @@ export default function MainCard({
5355
}
5456
}, [username, repo]);
5557

58+
useEffect(() => {
59+
if (loading) {
60+
setActiveDropdown(null);
61+
}
62+
}, [loading]);
63+
5664
const handleSubmit = (e: React.FormEvent) => {
5765
e.preventDefault();
5866
setError("");
@@ -109,90 +117,97 @@ export default function MainCard({
109117
{/* Dropdowns Container */}
110118
{!isHome && (
111119
<div className="space-y-4">
112-
{/* Buttons Container */}
113-
<div className="flex flex-col items-center gap-4 sm:flex-row sm:gap-4">
114-
{showCustomization &&
115-
onModify &&
116-
onRegenerate &&
117-
lastGenerated && (
118-
<button
119-
onClick={(e) => {
120-
e.preventDefault();
121-
handleDropdownToggle("customize");
122-
}}
123-
className={`flex items-center justify-between gap-2 rounded-md border-[3px] border-black px-4 py-2 font-medium text-black transition-colors sm:max-w-[250px] ${
124-
activeDropdown === "customize"
125-
? "bg-purple-400"
126-
: "bg-purple-300 hover:bg-purple-400"
127-
}`}
128-
>
129-
<span>Customize Diagram</span>
130-
{activeDropdown === "customize" ? (
131-
<ChevronUp size={20} />
132-
) : (
133-
<ChevronDown size={20} />
120+
{/* Only show buttons and dropdowns when not loading */}
121+
{!loading && (
122+
<>
123+
{/* Buttons Container */}
124+
<div className="flex flex-col items-center gap-4 sm:flex-row sm:gap-4">
125+
{showCustomization &&
126+
onModify &&
127+
onRegenerate &&
128+
lastGenerated && (
129+
<button
130+
onClick={(e) => {
131+
e.preventDefault();
132+
handleDropdownToggle("customize");
133+
}}
134+
className={`flex items-center justify-between gap-2 rounded-md border-[3px] border-black px-4 py-2 font-medium text-black transition-colors sm:max-w-[250px] ${
135+
activeDropdown === "customize"
136+
? "bg-purple-400"
137+
: "bg-purple-300 hover:bg-purple-400"
138+
}`}
139+
>
140+
<span>Customize Diagram</span>
141+
{activeDropdown === "customize" ? (
142+
<ChevronUp size={20} />
143+
) : (
144+
<ChevronDown size={20} />
145+
)}
146+
</button>
134147
)}
135-
</button>
136-
)}
137-
138-
{onCopy && lastGenerated && onExportImage && (
139-
<div className="flex flex-col items-center justify-center gap-2">
140-
<button
141-
onClick={(e) => {
142-
e.preventDefault();
143-
handleDropdownToggle("export");
144-
}}
145-
className={`flex items-center justify-between gap-2 rounded-md border-[3px] border-black px-4 py-2 font-medium text-black transition-colors sm:max-w-[250px] ${
146-
activeDropdown === "export"
147-
? "bg-purple-400"
148-
: "bg-purple-300 hover:bg-purple-400"
149-
}`}
150-
>
151-
<span>Export Diagram</span>
152-
{activeDropdown === "export" ? (
153-
<ChevronUp size={20} />
154-
) : (
155-
<ChevronDown size={20} />
156-
)}
157-
</button>
148+
149+
{onCopy && lastGenerated && onExportImage && (
150+
<div className="flex flex-col items-center justify-center gap-2">
151+
<button
152+
onClick={(e) => {
153+
e.preventDefault();
154+
handleDropdownToggle("export");
155+
}}
156+
className={`flex items-center justify-between gap-2 rounded-md border-[3px] border-black px-4 py-2 font-medium text-black transition-colors sm:max-w-[250px] ${
157+
activeDropdown === "export"
158+
? "bg-purple-400"
159+
: "bg-purple-300 hover:bg-purple-400"
160+
}`}
161+
>
162+
<span>Export Diagram</span>
163+
{activeDropdown === "export" ? (
164+
<ChevronUp size={20} />
165+
) : (
166+
<ChevronDown size={20} />
167+
)}
168+
</button>
169+
</div>
170+
)}
171+
{lastGenerated && (
172+
<>
173+
<label className="font-medium text-black">
174+
Enable Zoom
175+
</label>
176+
<Switch
177+
checked={zoomingEnabled}
178+
onCheckedChange={onZoomToggle}
179+
/>
180+
</>
181+
)}
158182
</div>
159-
)}
160-
{lastGenerated && (
161-
<>
162-
<label className="font-medium text-black">Enable Zoom</label>
163-
<Switch
164-
checked={zoomingEnabled}
165-
onCheckedChange={onZoomToggle}
166-
/>
167-
</>
168-
)}
169-
</div>
170183

171-
{/* Dropdown Content */}
172-
<div
173-
className={`transition-all duration-200 ${
174-
activeDropdown
175-
? "pointer-events-auto max-h-[500px] opacity-100"
176-
: "pointer-events-none max-h-0 opacity-0"
177-
}`}
178-
>
179-
{activeDropdown === "customize" && (
180-
<CustomizationDropdown
181-
onModify={onModify!}
182-
onRegenerate={onRegenerate!}
183-
lastGenerated={lastGenerated!}
184-
isOpen={true}
185-
/>
186-
)}
187-
{activeDropdown === "export" && (
188-
<ExportDropdown
189-
onCopy={onCopy!}
190-
lastGenerated={lastGenerated!}
191-
onExportImage={onExportImage!}
192-
isOpen={true}
193-
/>
194-
)}
195-
</div>
184+
{/* Dropdown Content */}
185+
<div
186+
className={`transition-all duration-200 ${
187+
activeDropdown
188+
? "pointer-events-auto max-h-[500px] opacity-100"
189+
: "pointer-events-none max-h-0 opacity-0"
190+
}`}
191+
>
192+
{activeDropdown === "customize" && (
193+
<CustomizationDropdown
194+
onModify={onModify!}
195+
onRegenerate={onRegenerate!}
196+
lastGenerated={lastGenerated!}
197+
isOpen={true}
198+
/>
199+
)}
200+
{activeDropdown === "export" && (
201+
<ExportDropdown
202+
onCopy={onCopy!}
203+
lastGenerated={lastGenerated!}
204+
onExportImage={onExportImage!}
205+
isOpen={true}
206+
/>
207+
)}
208+
</div>
209+
</>
210+
)}
196211
</div>
197212
)}
198213

0 commit comments

Comments
 (0)
Please sign in to comment.