diff --git a/apps/studio/components/ui/AIAssistantPanel/AIAssistant.tsx b/apps/studio/components/ui/AIAssistantPanel/AIAssistant.tsx index a609f33beff..bdfa6079a63 100644 --- a/apps/studio/components/ui/AIAssistantPanel/AIAssistant.tsx +++ b/apps/studio/components/ui/AIAssistantPanel/AIAssistant.tsx @@ -312,7 +312,6 @@ export const AIAssistant = ({ className }: AIAssistantProps) => { ) const hasMessages = chatMessages.length > 0 - const isShowingOnboarding = !hasMessages && isApiKeySet const sendMessageToAssistant = (finalContent: string) => { if (editingMessageId) { @@ -404,18 +403,17 @@ export const AIAssistant = ({ className }: AIAssistantProps) => { ]} >
- - - - {hasMessages ? ( + + {hasMessages ? ( + {renderedMessages} {error && ( @@ -459,21 +457,20 @@ export const AIAssistant = ({ className }: AIAssistantProps) => { /> )} - ) : ( - setValue(val)} - onFocusInput={() => inputRef.current?.focus()} - /> - )} - - - + + + ) : ( + setValue(val)} + onFocusInput={() => inputRef.current?.focus()} + /> + )} {editingMessageId && ( diff --git a/apps/studio/components/ui/AIAssistantPanel/AIOnboarding.tsx b/apps/studio/components/ui/AIAssistantPanel/AIOnboarding.tsx index 50d7119053d..933cf3ecaf4 100644 --- a/apps/studio/components/ui/AIAssistantPanel/AIOnboarding.tsx +++ b/apps/studio/components/ui/AIAssistantPanel/AIOnboarding.tsx @@ -1,7 +1,7 @@ import { motion } from 'framer-motion' import { BarChart, FileText, Shield } from 'lucide-react' -import { Button } from 'ui' +import { Button, Skeleton } from 'ui' import { useParams } from 'common' import { LINTER_LEVELS } from 'components/interfaces/Linter/Linter.constants' import { createLintSummaryPrompt, lintInfoMap } from 'components/interfaces/Linter/Linter.utils' @@ -36,7 +36,12 @@ export const AIOnboarding = ({ : defaultPrompts const { ref: projectRef } = useParams() - const { data: lints } = useProjectLintsQuery({ projectRef }) + const { + data: lints, + isLoading: isLoadingLints, + isFetching: isFetchingLints, + } = useProjectLintsQuery({ projectRef }) + const isLintsLoading = isLoadingLints || isFetchingLints const errorLints: Lint[] = (lints?.filter((lint) => lint.level === LINTER_LEVELS.ERROR) ?? []) as Lint[] @@ -44,114 +49,126 @@ export const AIOnboarding = ({ const performanceErrorLints = errorLints.filter((lint) => lint.categories?.[0] !== 'SECURITY') return ( -
-

How can I assist you?

- {suggestions?.prompts?.length ? ( -
-

Suggestions

- {prompts.map((item, index) => ( - - - - ))} -
- ) : ( - <> - {performanceErrorLints.length > 0 && ( -
-

Improve Performance

- {performanceErrorLints.map((lint, index) => { - return ( - - - - ) - })} -
- )} - - {securityErrorLints.length > 0 && ( -
-

Improve Security

- {securityErrorLints.map((lint, index) => { - return ( +
+
+
+

How can I assist you?

+ {suggestions?.prompts?.length ? ( +
+

Suggestions

+ {prompts.map((item, index) => ( + - ) - })} + + ))}
- )} + ) : ( + <> + {isLintsLoading ? ( +
+ {Array.from({ length: 6 }).map((_, index) => ( + + ))} +
+ ) : ( + <> + {performanceErrorLints.length > 0 && ( +
+

+ Improve Performance +

+ {performanceErrorLints.map((lint, index) => { + return ( + + ) + })} +
+ )} -
-

Ideas

- {prompts.map((item, index) => ( - - - - ))} -
- - )} + {securityErrorLints.length > 0 && ( +
+

+ Improve Security +

+ {securityErrorLints.map((lint, index) => { + return ( + + ) + })} +
+ )} + +
+

Ideas

+ {prompts.map((item, index) => ( + + ))} +
+ + )} + + )} +
+
) }