konnosDashboard
AIOptInLevelSelector.tsx131 lines · main
1import { ReactNode } from 'react'
2import { Control } from 'react-hook-form'
3import { FormField, RadioGroup, RadioGroupItem } from 'ui'
4import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
5
6import { OptInToOpenAIToggle } from './OptInToOpenAIToggle'
7import { AIOptInFormValues } from '@/hooks/forms/useAIOptInForm'
8import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
9
10interface AIOptInLevelSelectorProps {
11 control: Control<AIOptInFormValues>
12 disabled?: boolean
13 label?: ReactNode
14 layout?: 'horizontal' | 'vertical' | 'flex-row-reverse'
15}
16
17export const AIOptInLevelSelector = ({
18 control,
19 disabled,
20 label,
21 layout = 'vertical',
22}: AIOptInLevelSelectorProps) => {
23 const {
24 aiOptInLevelDisabled,
25 aiOptInLevelSchema,
26 aiOptInLevelSchemaAndLog,
27 aiOptInLevelSchemaAndLogAndData,
28 } = useIsFeatureEnabled([
29 'ai:opt_in_level_disabled',
30 'ai:opt_in_level_schema',
31 'ai:opt_in_level_schema_and_log',
32 'ai:opt_in_level_schema_and_log_and_data',
33 ])
34
35 const AI_OPT_IN_LEVELS = [
36 ...(aiOptInLevelDisabled
37 ? [
38 {
39 value: 'disabled',
40 title: 'Disabled',
41 description:
42 'You do not consent to sharing any database information with third-party AI providers and understand that responses will be generic and not tailored to your database',
43 },
44 ]
45 : []),
46 ...(aiOptInLevelSchema
47 ? [
48 {
49 value: 'schema',
50 title: 'Schema Only',
51 description:
52 'You consent to sharing your database’s schema metadata (such as table and column names, data types, and relationships—but not actual database data) with third-party AI providers',
53 },
54 ]
55 : []),
56 ...(aiOptInLevelSchemaAndLog
57 ? [
58 {
59 value: 'schema_and_log',
60 title: 'Schema & Logs',
61 description:
62 'You consent to sharing your schema and logs (which may contain PII/database data) with third-party AI providers for better results',
63 },
64 ]
65 : []),
66 ...(aiOptInLevelSchemaAndLogAndData
67 ? [
68 {
69 value: 'schema_and_log_and_data',
70 title: 'Schema, Logs & Database Data',
71 description:
72 'You consent to give third-party AI providers full access to run database read-only queries and analyze results for optimal results',
73 },
74 ]
75 : []),
76 ]
77
78 return (
79 <FormItemLayout
80 label={label}
81 layout={layout}
82 description={
83 <div className="flex flex-col gap-y-4 my-4 max-w-xl">
84 <p>
85 Briven AI can provide more relevant answers if you choose to share different levels of
86 data. This feature is powered by third-party AI providers. This is an organization-wide
87 setting, so please select the level of data you are comfortable sharing.
88 </p>
89 <p>
90 For organizations with HIPAA compliance enabled in their Briven configuration, any
91 consented information will only be shared with third-party AI providers with whom
92 Briven has established a Business Associate Agreement (BAA).
93 </p>
94 <OptInToOpenAIToggle />
95 </div>
96 }
97 >
98 <div className="max-w-xl">
99 <FormField
100 control={control}
101 name="aiOptInLevel"
102 render={({ field }) => (
103 <RadioGroup
104 value={field.value}
105 onValueChange={field.onChange}
106 disabled={disabled}
107 className="space-y-2 mb-6"
108 >
109 {AI_OPT_IN_LEVELS.map((item) => (
110 <div key={item.value} className="flex items-start space-x-3">
111 <RadioGroupItem
112 value={item.value}
113 id={`ai-opt-in-${item.value}`}
114 className="mt-0.5"
115 />
116 <label
117 htmlFor={`ai-opt-in-${item.value}`}
118 className="cursor-pointer flex flex-col"
119 >
120 <span className="text-sm font-medium text-foreground">{item.title}</span>
121 <span className="text-sm text-foreground-light">{item.description}</span>
122 </label>
123 </div>
124 ))}
125 </RadioGroup>
126 )}
127 />
128 </div>
129 </FormItemLayout>
130 )
131}