Files
supabase/apps/studio/components/ui/AISettingsModal.tsx
T
Ivan VasilovandJoshen Lim 6a29cd2bec feat: Choose which schemas to share with OpenAI (#28594)
* Change the getEntityDefinitions query to accept list of schemas instead of being hardcoded to public schema.

* Add a schema combo box for selecting schemas.

* Use the combobox in the SQL editor to select which schemas should be sent to the AI when asking a question.

* Add configurable schemas to AiPolicyEditor.

* Remove unneeded hook.

* Fix the AI settings modal.

* Add keys to the entity definitions query.

* Fix the AI settings modal which is used by cmdk flow.

* Minor fixes.

* Address feedback

* Some fixes

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2024-08-15 14:38:19 +08:00

88 lines
3.2 KiB
TypeScript

import Link from 'next/link'
import { useOrgOptedIntoAi } from 'hooks/misc/useOrgOptedIntoAi'
import { useSchemasForAi } from 'hooks/misc/useSchemasForAi'
import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization'
import { useSelectedProject } from 'hooks/misc/useSelectedProject'
import { IS_PLATFORM } from 'lib/constants'
import { useAppStateSnapshot } from 'state/app-state'
import {
AlertDescription_Shadcn_,
AlertTitle_Shadcn_,
Alert_Shadcn_,
Button,
Modal,
WarningIcon,
} from 'ui'
import { SchemaComboBox } from './SchemaComboBox'
const AISettingsModal = () => {
const snap = useAppStateSnapshot()
const selectedOrganization = useSelectedOrganization()
const isOptedInToAI = useOrgOptedIntoAi()
const selectedProject = useSelectedProject()
const [selectedSchemas, setSelectedSchemas] = useSchemasForAi(selectedProject?.ref!)
const includeSchemaMetadata = isOptedInToAI || !IS_PLATFORM
return (
<Modal
hideFooter
header="Supabase AI Settings"
visible={snap.showAiSettingsModal}
onCancel={() => snap.setShowAiSettingsModal(false)}
>
<Modal.Content className="flex flex-col items-start justify-between gap-y-4">
<div className="flex flex-col justify-between gap-y-2 text-sm">
<p className="text-foreground-light">Schemas metadata to be shared with OpenAI</p>
<SchemaComboBox
size="small"
label={
includeSchemaMetadata && selectedSchemas.length > 0
? `${selectedSchemas.length} schema${
selectedSchemas.length > 1 ? 's' : ''
} selected`
: 'No schemas selected'
}
disabled={IS_PLATFORM && !isOptedInToAI}
selectedSchemas={selectedSchemas}
onSelectSchemas={setSelectedSchemas}
/>
<p className="text-foreground-lighter">
Metadata includes table names, column names and their corresponding data types in the
request. This will generate queries that are more relevant to your project.
</p>
</div>
{IS_PLATFORM && !isOptedInToAI && selectedOrganization && (
<Alert_Shadcn_ variant="warning">
<WarningIcon />
<AlertTitle_Shadcn_>
Your organization does not allow sending anonymous data to OpenAI
</AlertTitle_Shadcn_>
<AlertDescription_Shadcn_>
This option is only available if your organization has opted-in to sending anonymous
data to OpenAI. You may configure your opt-in preferences through your organization's
settings.
</AlertDescription_Shadcn_>
<AlertDescription_Shadcn_ className="mt-3">
<Button asChild type="default">
<Link
target="_blank"
rel="noreferrer"
href={`/org/${selectedOrganization.slug}/general`}
className="flex flex-row gap-1 items-center"
>
Head to organization settings
</Link>
</Button>
</AlertDescription_Shadcn_>
</Alert_Shadcn_>
)}
</Modal.Content>
</Modal>
)
}
export default AISettingsModal