✨ (theme) Custom font option (#1268)

Closes #1249

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **New Features**
- Introduced components for customizing fonts, including Google and
custom font options.
- Enhanced theme customization by simplifying theme objects and adding
new font customization options.
- Implemented dynamic font injection for web pages based on
user-selected font configurations.

- **Bug Fixes**
- Fixed a condition in theme template card rendering to correctly check
avatar enablement.
- Corrected font property handling across various components to support
both string and object types.

- **Refactor**
	- Updated option properties in RadioButtons component to be readonly.
- Simplified logic for setting CSS variables for fonts, including checks
for font types and existence.

- **Documentation**
- Added constants and schemas for supporting new font types in theme
customization.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

packages/schemas/features/typebot/theme/constants.ts

@@ -6,6 +6,8 @@ export enum BackgroundType {
   NONE = 'None',
 }
 
+export const fontTypes = ['Google', 'Custom'] as const
+
 export const defaultTheme = {
   chat: {
     roundness: 'medium',
@@ -25,7 +27,10 @@ export const defaultTheme = {
     },
   },
   general: {
-    font: 'Open Sans',
+    font: {
+      type: 'Google',
+      family: 'Open Sans',
+    },
     background: { type: BackgroundType.COLOR, content: '#ffffff' },
   },
 } as const satisfies Theme

packages/schemas/features/typebot/theme/schema.ts

@@ -1,6 +1,6 @@
 import { ThemeTemplate as ThemeTemplatePrisma } from '@typebot.io/prisma'
 import { z } from '../../../zod'
-import { BackgroundType } from './constants'
+import { BackgroundType, fontTypes } from './constants'
 
 const avatarPropsSchema = z.object({
   isEnabled: z.boolean().optional(),
@@ -33,8 +33,26 @@ const backgroundSchema = z.object({
   content: z.string().optional().optional(),
 })
 
+const googleFontSchema = z.object({
+  type: z.literal(fontTypes[0]),
+  family: z.string().optional(),
+})
+export type GoogleFont = z.infer<typeof googleFontSchema>
+
+const customFontSchema = z.object({
+  type: z.literal(fontTypes[1]),
+  family: z.string().optional(),
+  url: z.string().optional(),
+})
+export type CustomFont = z.infer<typeof customFontSchema>
+
+export const fontSchema = z
+  .string()
+  .or(z.discriminatedUnion('type', [googleFontSchema, customFontSchema]))
+export type Font = z.infer<typeof fontSchema>
+
 const generalThemeSchema = z.object({
-  font: z.string().optional(),
+  font: fontSchema.optional(),
   background: backgroundSchema.optional(),
 })
 
@@ -56,7 +74,7 @@ export const themeTemplateSchema = z.object({
   workspaceId: z.string(),
   createdAt: z.date(),
   updatedAt: z.date(),
-}) satisfies z.ZodType<ThemeTemplatePrisma>
+}) satisfies z.ZodType<Omit<ThemeTemplatePrisma, 'theme'>>
 
 export type Theme = z.infer<typeof themeSchema>
 export type ChatTheme = z.infer<typeof chatThemeSchema>