Skip to content

feat(AI): custom instructions KYC settings #1104

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
siiick merged 5 commits into from
Sep 12, 2025
Merged

feat(AI): custom instructions KYC settings #1104

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8aaf129
feat: handle KYC custom instructions prompt
siiick Sep 11, 2025
9507061
fix: make custom_instructions optional
siiick Sep 11, 2025
11bd09a
Update packages/app-builder/src/locales/en/settings.json
siiick Sep 12, 2025
6c74ffa
Update packages/app-builder/src/locales/fr/settings.json
siiick Sep 12, 2025
77eb684
feat: add tooltip translation
siiick Sep 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
127 changes: 92 additions & 35 deletions packages/app-builder/src/components/Settings/AiAssist/AiAssistSettingsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { type AiSettingSchema, aiSettingSchema, languages } from '@app-builder/m
import { useUpdateAiSettings } from '@app-builder/queries/settings/ai/update';
import { handleSubmit } from '@app-builder/utils/form';
import { useForm } from '@tanstack/react-form';
import { useState } from 'react';
import { Trans, useTranslation } from 'react-i18next';
import { ButtonV2, Input, MenuCommand, Switch, Tooltip } from 'ui-design-system';
import { Icon } from 'ui-icons';
Expand Down Expand Up @@ -42,10 +43,12 @@ export function AiAssistSettingsPage({ settings }: { settings: AiSettingSchema }
},
kycEnrichmentSetting: {
enabled: settings.kycEnrichmentSetting.enabled,
customInstructions: settings.kycEnrichmentSetting.customInstructions || '',
domainsFilter: settings.kycEnrichmentSetting.domainsFilter || [],
},
},
});
const [kycOpen, setKycOpen] = useState(settings.kycEnrichmentSetting.enabled);
return (
<Page.Container>
<Page.Content className="max-w-(--breakpoint-xl)">
Expand Down Expand Up @@ -190,39 +193,95 @@ export function AiAssistSettingsPage({ settings }: { settings: AiSettingSchema }
</div>
</CollapsiblePaper.Content>
</CollapsiblePaper.Container>
<CollapsiblePaper.Container>
<CollapsiblePaper.Title>
<span className="flex-1">
{t('settings:ai_assist.case_manager.kyc_enrichment.title')}
</span>
</CollapsiblePaper.Title>
<CollapsiblePaper.Content>
<div className="flex flex-col gap-8">
<form.Field name="kycEnrichmentSetting.enabled">
{(field) => (
<>
<div className="group flex w-full flex-row gap-4 text-pretty">
<Switch checked={field.state.value} onCheckedChange={field.handleChange} />
<FormLabel name={field.name}>
<form.Subscribe selector={(state) => state.values.kycEnrichmentSetting.enabled}>
{(isKycEnabled) => (
<CollapsiblePaper.Container
open={kycOpen}
onOpenChange={(open) => {
if (isKycEnabled) setKycOpen(open);
}}
>
<CollapsiblePaper.Title>
<span className="flex-1">
{t('settings:ai_assist.case_manager.kyc_enrichment.title')}
</span>
<form.Field name="kycEnrichmentSetting.enabled">
{(field) => (
<div className="flex gap-2 text-pretty" onClick={(e) => e.stopPropagation()}>
<Switch
checked={field.state.value}
onCheckedChange={(val) => {
field.handleChange(val);
setKycOpen(val);
}}
/>
<div className="text-s font-normal">
<Trans
t={t}
i18nKey="ai_assist.case_manager.kyc_enrichment.enabled.field.label"
components={{
bold: <span className="font-bold" />,
bold: <div className="font-bold" />,
}}
/>
</FormLabel>
</div>
</div>
</>
)}
</form.Field>
)}
</form.Field>
</CollapsiblePaper.Title>
<CollapsiblePaper.Content>
<div className="flex flex-col gap-8">
<form.Field name="kycEnrichmentSetting.domainsFilter" mode="array">
{(domainsFilterField) => (
<div className="flex flex-col gap-8 relative z-0">
<form.Field name="kycEnrichmentSetting.customInstructions">
{(field) => (
<div className="group flex w-full flex-col gap-2">
<FormLabel name={field.name} className="flex items-center gap-2">
{t(
'settings:ai_assist.case_manager.kyc_enrichment.custom_instructions.field.label',
)}
<Tooltip.Default
delayDuration={300}
className="max-w-96"
content={
<span className="font-normal">
<Trans
t={t}
i18nKey="ai_assist.case_manager.kyc_enrichment.custom_instructions.field.tooltip"
components={{
DocLink: (
<ExternalLink href="https://www.markdownguide.org/basic-syntax/" />
),
}}
/>
</span>
}
>
<Icon
icon="tip"
className="size-4 shrink-0 cursor-pointer text-purple-65"
/>
</Tooltip.Default>
</FormLabel>
<FormTextArea
name={field.name}
onChange={(e) => field.handleChange(e.currentTarget.value)}
onBlur={field.handleBlur}
defaultValue={field.state.value}
valid={field.state.meta.errors.length === 0}
resize="vertical"
className="min-h-24"
placeholder={t(
'settings:ai_assist.case_manager.kyc_enrichment.custom_instructions.field.placeholder',
)}
/>
</div>
)}
</form.Field>
<CalloutV2>
{t('settings:ai_assist.case_manager.kyc_enrichment_callout')}
</CalloutV2>

<CalloutV2>{t('settings:ai_assist.case_manager.kyc_enrichment_callout')}</CalloutV2>
<form.Field name="kycEnrichmentSetting.domainsFilter" mode="array">
{(domainsFilterField) => (
<form.Subscribe selector={(state) => state.values.kycEnrichmentSetting.enabled}>
{(isEnabled) => (
<>
{domainsFilterField.state.value.map((_, idx) => (
<form.Field
key={idx}
Expand All @@ -239,13 +298,11 @@ export function AiAssistSettingsPage({ settings }: { settings: AiSettingSchema }
placeholder={t(
'settings:ai_assist.case_manager.domains_filter.placeholder',
)}
disabled={!isEnabled}
/>
<ButtonV2
mode="icon"
variant="secondary"
onClick={() => domainsFilterField.removeValue(idx)}
disabled={!isEnabled}
>
<Icon
icon="delete"
Expand All @@ -270,7 +327,7 @@ export function AiAssistSettingsPage({ settings }: { settings: AiSettingSchema }
))}
<div className="flex gap-v2-md items-center col-span-full">
<ButtonV2
disabled={!isEnabled || domainsFilterField.state.value.length >= 10}
disabled={domainsFilterField.state.value.length >= 10}
className="w-fit"
onClick={() => domainsFilterField.pushValue('')}
>
Expand All @@ -279,14 +336,14 @@ export function AiAssistSettingsPage({ settings }: { settings: AiSettingSchema }
</ButtonV2>
</div>
<FormError field={domainsFilterField} className="col-span-full" />
</>
</div>
)}
</form.Subscribe>
)}
</form.Field>
</div>
</CollapsiblePaper.Content>
</CollapsiblePaper.Container>
</form.Field>
</div>
</CollapsiblePaper.Content>
</CollapsiblePaper.Container>
)}
</form.Subscribe>
<div className="flex justify-end">
<form.Subscribe
selector={(state) => ({ isDirty: state.isDirty, isSubmitting: state.isSubmitting })}
Expand Down
3 changes: 3 additions & 0 deletions packages/app-builder/src/locales/ar/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,9 @@
"ai_assist.case_manager.general.title": "عام",
"ai_assist.case_manager.kyc_enrichment_callout": "قم بتكوين ما يصل إلى 10 نطاقات لمساعدة في إثراء بيانات العملاء. يمكن للوكيل استخدام هذه النطاقات للبحث عبر الإنترنت والعثور على معلومات ذات صلة حول عميلك.",
"ai_assist.case_manager.kyc_enrichment.add_new.button": "إضافة نطاق جديد",
"ai_assist.case_manager.kyc_enrichment.custom_instructions.field.label": "تعليمات خاصة بالمؤسسة (اختياري)",
"ai_assist.case_manager.kyc_enrichment.custom_instructions.field.placeholder": "قدّم إرشادات أو تنسيق مفضل لمخرجات إثراء KYC…",
"ai_assist.case_manager.kyc_enrichment.custom_instructions.field.tooltip": "اكتب هنا التعليمات لما تريد البحث عنه عند إثراء بيانات العملاء بالبحث عبر الإنترنت: طبيعة المعلومات التي تريد البحث عنها، تنسيق الإخراج المطلوب...<br/>التعليمات يجب أن تكون متسقة مع قائمة النطاقات المسموح بها، إذا كنت قد قمت بتكوين واحد أسفله.",
"ai_assist.case_manager.kyc_enrichment.domains_filter.add_new.error": "يرجى إدخال نطاق صحيح، على سبيل المثال checkmarble.com",
"ai_assist.case_manager.kyc_enrichment.enabled.field.label": "تمكين ميزة إثراء KYC. <bold>تستدعي هذه الميزة واجهات برمجة التطبيقات الخارجية التي تعالج البيانات المستلمة في الولايات المتحدة.</bold>",
"ai_assist.case_manager.kyc_enrichment.title": "إثراء KYC",
Expand Down
3 changes: 3 additions & 0 deletions packages/app-builder/src/locales/en/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,9 @@
"ai_assist.case_manager.general.title": "General",
"ai_assist.case_manager.kyc_enrichment_callout": "Configure up to 10 domains to help enrich customer data. The agent can use these domains to search online and find relevant information about your customer.",
"ai_assist.case_manager.kyc_enrichment.add_new.button": "Add a new domain",
"ai_assist.case_manager.kyc_enrichment.custom_instructions.field.label": "Custom instructions (optional)",
"ai_assist.case_manager.kyc_enrichment.custom_instructions.field.placeholder": "Provide guidelines or a preferred output format for KYC enrichment…",
"ai_assist.case_manager.kyc_enrichment.custom_instructions.field.tooltip": "Write instructions here for what sort of data you want to look for when enriching customer profiles with online search: nature of the information to search, desired output structure...<br/>The instructions should be consistent with the search domain allowlist, if you have configured one below.",
"ai_assist.case_manager.kyc_enrichment.domains_filter.add_new.error": "Please enter a valid domain, for example checkmarble.com",
"ai_assist.case_manager.kyc_enrichment.enabled.field.label": "Enable the KYC enrichment feature. <bold>This feature calls external APIs that treat any data received in the United States.</bold>",
"ai_assist.case_manager.kyc_enrichment.title": "KYC enrichment",
Expand Down
3 changes: 3 additions & 0 deletions packages/app-builder/src/locales/fr/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,9 @@
"ai_assist.case_manager.general.title": "Général",
"ai_assist.case_manager.kyc_enrichment_callout": "Configurez jusqu'à 10 domaines autorisés pour l'enrichissement des données client. L'agent peut utiliser ces domaines pour chercher en ligne des informations pertinentes sur votre client.",
"ai_assist.case_manager.kyc_enrichment.add_new.button": "Ajouter un nouveau domaine",
"ai_assist.case_manager.kyc_enrichment.custom_instructions.field.label": "Instructions personnalisées (optionnel)",
"ai_assist.case_manager.kyc_enrichment.custom_instructions.field.placeholder": "Fournissez des consignes ou un format de sortie souhaité pour l'enrichissement KYC…",
"ai_assist.case_manager.kyc_enrichment.custom_instructions.field.tooltip": "Écrivez ici les instructions pour ce que vous souhaitez rechercher lors de l'enrichissement des profils client avec une recherche en ligne : nature de l'information à rechercher, format de sortie souhaité...<br/>Les instructions doivent être cohérentes avec la liste des domaines autorisés, si vous en avez configuré une ci-dessous.",
"ai_assist.case_manager.kyc_enrichment.domains_filter.add_new.error": "Veuillez entrer un domaine valide, par exemple checkmarble.com",
"ai_assist.case_manager.kyc_enrichment.enabled.field.label": "Activer la fonctionnalité d'enrichissement KYC. <bold>Cette fonctionnalité appelle des API externes qui traitent les données reçues aux États-Unis.</bold>",
"ai_assist.case_manager.kyc_enrichment.title": "Enrichissement KYC",
Expand Down
16 changes: 10 additions & 6 deletions packages/app-builder/src/models/ai-settings.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,25 +55,27 @@ const extractDomain = (val: string): string => {
return urlObj.hostname;
};

export const caseReviewSettingSchema = z.object({
language: languageCodeSchema,
structure: z.string(),
orgDescription: z.string(),
});

export const caseReviewSettingDtoSchema = z.object({
language: languageCodeSchema,
structure: z.string().nullable(),
org_description: z.string().nullable(),
});

export const caseReviewSettingSchema = z.object({
language: languageCodeSchema,
structure: z.string(),
orgDescription: z.string(),
});

export const kycEnrichmentSettingDtoSchema = z.object({
enabled: z.boolean(),
custom_instructions: z.string().optional().nullable(),
domain_filter: z.array(z.string()),
});

export const kycEnrichmentSettingSchema = z.object({
enabled: z.boolean(),
customInstructions: z.string(),
domainsFilter: uniqueBy(z.array(httpUrlSchema), (s) => s).max(10),
});

Expand All @@ -96,6 +98,7 @@ export const transformCaseReviewSetting = z.codec(aiSettingDtoSchema, aiSettingS
},
kyc_enrichment_setting: {
enabled: kycEnrichmentSetting.enabled,
custom_instructions: kycEnrichmentSetting.customInstructions,
domain_filter: kycEnrichmentSetting.domainsFilter.map(extractDomain),
},
}),
Expand All @@ -107,6 +110,7 @@ export const transformCaseReviewSetting = z.codec(aiSettingDtoSchema, aiSettingS
},
kycEnrichmentSetting: {
enabled: kyc_enrichment_setting.enabled,
customInstructions: kyc_enrichment_setting.custom_instructions ?? '',
domainsFilter: kyc_enrichment_setting.domain_filter,
},
}),
Expand Down