150 | {!hasApiKey && (
151 | <>
152 |
An OpenAI API key is required to generate diagrams for your own repositories. The diagrams will be generated using your API key and billed to your OpenAI account.
153 |
161 | >
162 | )}
163 |
164 | {!hasGitHubPAT && (
165 | <>
166 |
A GitHub Personal Access Token (PAT) is required to access repositories.
167 |
174 | >
175 | )}
176 |
177 | )}
178 |
179 | {error &&
184 | {/* Only show buttons and dropdowns when not loading */}
185 | {!loading && (
186 | <>
187 | {/* Buttons Container */}
188 |
189 | {showCustomization &&
190 | onModify &&
191 | onRegenerate &&
192 | lastGenerated && (
193 |
211 | )}
212 |
213 | {onCopy && lastGenerated && onExportImage && (
214 |
215 |
233 |
234 | )}
235 | {lastGenerated && (
236 | <>
237 |
240 |
244 | >
245 | )}
246 |
247 |
248 | {/* Dropdown Content */}
249 |
256 | {activeDropdown === "customize" && (
257 |
264 | )}
265 | {activeDropdown === "export" && (
266 |
273 | )}
274 |
275 | >
276 | )}
277 |
278 | )}
279 |
280 | {/* Example Repositories */}
281 | {isHome && (
282 |
283 |
284 | Try these example repositories:
285 |
286 |
287 | {Object.entries(exampleRepos).map(([name, path]) => (
288 |
296 | ))}
297 |
298 |
299 | )}
300 |