wip

.github/workflows/meet.yml

@@ -175,25 +175,53 @@ jobs:
       - name: Check format
         run: cd src/frontend/ && npm run check
 
+  lint-sdk:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Install dependencies
+        run: cd src/sdk/library/ && npm ci
+
+      - name: Check linting
+        run: cd src/sdk/library/ && npm run lint
+
+      - name: Check format
+        run: cd src/sdk/library/ && npm run check
+
+  build-sdk:
+    runs-on: ubuntu-latest
+    needs: lint-sdk
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Install dependencies
+        run: cd src/sdk/library/ && npm ci
+
+      - name: Check linting
+        run: cd src/sdk/library/ && npm run lint
+
+      - name: Check format
+        run: cd src/sdk/library/ && npm run build
+
   i18n-crowdin:
     runs-on: ubuntu-latest
     steps:
-      -
-        uses: actions/create-github-app-token@v1
+      - uses: actions/create-github-app-token@v1
         id: app-token
         with:
           app-id: ${{ secrets.APP_ID }}
           private-key: ${{ secrets.PRIVATE_KEY }}
           owner: ${{ github.repository_owner }}
           repositories: "infrastructure,secrets"
-      -
-        name: Checkout repository
+      - name: Checkout repository
         uses: actions/checkout@v4
         with:
           submodules: recursive
           token: ${{ steps.app-token.outputs.token }}
-      -
-        name: Load sops secrets
+      - name: Load sops secrets
         uses: rouja/actions-sops@main
         with:
           secret-file: secrets/numerique-gouv/meet/secrets.enc.env

src/frontend/src/App.tsx

@@ -13,24 +13,40 @@ import { routes } from './routes'
 import './i18n/init'
 import { queryClient } from '@/api/queryClient'
 import { AppInitialization } from '@/components/AppInitialization'
+import { SdkCreateButton } from './features/sdk/routes/CreateButton'
 
 function App() {
   const { i18n } = useTranslation()
   useLang(i18n.language)
   return (
     <QueryClientProvider client={queryClient}>
-      <AppInitialization />
       <Suspense fallback={null}>
         <I18nProvider locale={i18n.language}>
-          <Layout>
-            <Switch>
-              {Object.entries(routes).map(([, route], i) => (
-                <Route key={i} path={route.path} component={route.Component} />
-              ))}
-              <Route component={NotFoundScreen} />
-            </Switch>
-          </Layout>
-          <ReactQueryDevtools initialIsOpen={false} buttonPosition="top-left" />
+          <Switch>
+            {/* We only want support and ReactQueryDevTools in non /sdk routes */}
+            <Route path={/^(?!\/sdk).*$/}>
+              <AppInitialization />
+              <Layout>
+                {Object.entries(routes).map(([, route], i) => (
+                  <Route
+                    key={i}
+                    path={route.path}
+                    component={route.Component}
+                  />
+                ))}
+              </Layout>
+              <ReactQueryDevtools
+                initialIsOpen={false}
+                buttonPosition="top-left"
+              />
+            </Route>
+            <Route path="/sdk" nest>
+              <Route path="/create-button">
+                <SdkCreateButton />
+              </Route>
+            </Route>
+            <Route component={NotFoundScreen} />
+          </Switch>
         </I18nProvider>
       </Suspense>
     </QueryClientProvider>

src/frontend/src/assets/VisioIcon.tsx

@@ -0,0 +1,24 @@
+export const VisioIcon = () => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M0.841702 8.95427C0.75 9.42479 0.75 10.0042 0.75 10.9748V13.3096C0.75 14.5138 0.75 15.1159 0.925134 15.6549C1.08009 16.1319 1.33356 16.5709 1.6691 16.9435C2.04833 17.3647 2.56977 17.6658 3.61264 18.2679L5.6346 19.4353C6.55753 19.9681 7.07208 20.2652 7.56247 20.4081V13.2043C7.56247 12.8442 7.36578 12.5129 7.04965 12.3404L0.841702 8.95427Z"
+        fill="currentColor"
+      />
+      <path
+        d="M17.747 10.0123V13.7685C17.747 14.2878 17.9727 14.7815 18.3654 15.1214L21.0688 17.4609C21.227 17.5947 21.3912 17.7042 21.5616 17.7894C21.738 17.8685 21.9084 17.9081 22.0726 17.9081C22.4255 17.9081 22.7084 17.7925 22.9213 17.5613C23.1404 17.324 23.2499 17.0168 23.2499 16.6396V7.14866C23.2499 6.77146 23.1404 6.46726 22.9213 6.23607C22.7084 5.9988 22.4255 5.88017 22.0726 5.88017C21.9084 5.88017 21.738 5.91971 21.5616 5.9988C21.3912 6.07789 21.227 6.1874 21.0688 6.32733L18.3675 8.65759C17.9735 8.99746 17.747 9.49201 17.747 10.0123Z"
+        fill="currentColor"
+      />
+      <path
+        d="M1.74517 7.61282C1.67 7.57182 1.59117 7.54405 1.51135 7.52872C1.56171 7.46443 1.61433 7.40178 1.66914 7.34091C2.04837 6.91973 2.56981 6.61868 3.61268 6.01657L5.63464 4.84919C6.67751 4.24708 7.19894 3.94603 7.7533 3.82819C8.2438 3.72394 8.75074 3.72394 9.24124 3.82819C9.7956 3.94603 10.317 4.24708 11.3599 4.84919L13.358 6.0028C13.366 6.00738 13.374 6.01197 13.3819 6.01658C14.4248 6.61868 14.9462 6.91973 15.3255 7.34091C15.661 7.71357 15.9145 8.15259 16.0694 8.62951C16.2446 9.16852 16.2446 9.77063 16.2446 10.9748V13.3096C16.2446 14.5138 16.2446 15.1159 16.0694 15.6549C15.9145 16.1319 15.661 16.5709 15.3255 16.9435C14.9462 17.3647 14.4248 17.6657 13.382 18.2678C13.373 18.273 13.364 18.2782 13.3551 18.2833L11.3599 19.4353C10.317 20.0374 9.7956 20.3384 9.24124 20.4562C9.21846 20.4611 9.19564 20.4657 9.17279 20.4701L9.17278 13.2043C9.17278 12.255 8.65422 11.3814 7.82079 10.9268L1.74517 7.61282Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}

src/frontend/src/features/home/routes/Home.tsx

@@ -9,15 +9,16 @@ import { useUser, UserAware } from '@/features/auth'
 import { JoinMeetingDialog } from '../components/JoinMeetingDialog'
 import { ProConnectButton } from '@/components/ProConnectButton'
 import { useCreateRoom } from '@/features/rooms'
+import { usePersistentUserChoices } from '@livekit/components-react'
 import { RiAddLine, RiLink } from '@remixicon/react'
 import { LaterMeetingDialog } from '@/features/home/components/LaterMeetingDialog'
 import { IntroSlider } from '@/features/home/components/IntroSlider'
 import { MoreLink } from '@/features/home/components/MoreLink'
-import { ReactNode, useState } from 'react'
+import { ReactNode, useEffect, useState } from 'react'
 
 import { css } from '@/styled-system/css'
 import { menuRecipe } from '@/primitives/menuRecipe.ts'
-import { usePersistentUserChoices } from '@/features/rooms/livekit/hooks/usePersistentUserChoices'
+import { SdkReverseClient } from '@/features/sdk/SdkReverseClient'
 
 const Columns = ({ children }: { children?: ReactNode }) => {
   return (
@@ -156,6 +157,18 @@ export const Home = () => {
   const { mutateAsync: createRoom } = useCreateRoom()
   const [laterRoomId, setLaterRoomId] = useState<null | string>(null)
 
+  const { user } = useUser()
+
+  /**
+   * Used for SDK popup to close automatically.
+   */
+  useEffect(() => {
+    if (!user) {
+      return
+    }
+    SdkReverseClient.broadcastAuthentication()
+  }, [user])
+
   return (
     <UserAware>
       <Screen>

src/frontend/src/features/rooms/components/Conference.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useState } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
-import { LiveKitRoom } from '@livekit/components-react'
+import { LiveKitRoom, type LocalUserChoices } from '@livekit/components-react'
 import { Room, RoomOptions } from 'livekit-client'
 import { keys } from '@/api/queryKeys'
 import { queryClient } from '@/api/queryClient'
@@ -12,11 +12,10 @@ import { fetchRoom } from '../api/fetchRoom'
 import { ApiRoom } from '../api/ApiRoom'
 import { useCreateRoom } from '../api/createRoom'
 import { InviteDialog } from './InviteDialog'
+
 import { VideoConference } from '../livekit/prefabs/VideoConference'
 import posthog from 'posthog-js'
 import { css } from '@/styled-system/css'
-import { LocalUserChoices } from '../routes/Room'
-import { BackgroundProcessorFactory } from '../livekit/components/blur'
 
 export const Conference = ({
   roomId,
@@ -112,13 +111,7 @@ export const Conference = ({
           token={data?.livekit?.token}
           connect={true}
           audio={userConfig.audioEnabled}
-          video={
-            userConfig.videoEnabled && {
-              processor: BackgroundProcessorFactory.deserializeProcessor(
-                userConfig.processorSerialized
-              ),
-            }
-          }
+          video={userConfig.videoEnabled}
           connectOptions={connectOptions}
           className={css({
             backgroundColor: 'primaryDark.50 !important',

src/frontend/src/features/rooms/components/Join.tsx

@@ -1,5 +1,9 @@
 import { useTranslation } from 'react-i18next'
-import { usePreviewTracks } from '@livekit/components-react'
+import {
+  usePersistentUserChoices,
+  usePreviewTracks,
+  type LocalUserChoices,
+} from '@livekit/components-react'
 import { css } from '@/styled-system/css'
 import { Screen } from '@/layout/Screen'
 import { useMemo, useEffect, useRef, useState } from 'react'
@@ -7,96 +11,11 @@ import { LocalVideoTrack, Track } from 'livekit-client'
 import { H } from '@/primitives/H'
 import { SelectToggleDevice } from '../livekit/components/controls/SelectToggleDevice'
 import { Field } from '@/primitives/Field'
-import { Button, Dialog, Text, Form } from '@/primitives'
+import { Form } from '@/primitives'
 import { HStack, VStack } from '@/styled-system/jsx'
-import { LocalUserChoices } from '../routes/Room'
-import { Heading } from 'react-aria-components'
-import { RiImageCircleAiFill } from '@remixicon/react'
-import {
-  EffectsConfiguration,
-  EffectsConfigurationProps,
-} from '../livekit/components/effects/EffectsConfiguration'
-import { usePersistentUserChoices } from '../livekit/hooks/usePersistentUserChoices'
-import { BackgroundProcessorFactory } from '../livekit/components/blur'
-import { isMobileBrowser } from '@livekit/components-core'
 
 const onError = (e: Error) => console.error('ERROR', e)
 
-const Effects = ({
-  videoTrack,
-  onSubmit,
-}: Pick<EffectsConfigurationProps, 'videoTrack' | 'onSubmit'>) => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'join.effects' })
-  const [isDialogOpen, setIsDialogOpen] = useState(false)
-  const openDialog = () => setIsDialogOpen(true)
-
-  if (!BackgroundProcessorFactory.isSupported() || isMobileBrowser()) {
-    return
-  }
-
-  return (
-    <>
-      <Dialog
-        isOpen={isDialogOpen}
-        onOpenChange={setIsDialogOpen}
-        role="dialog"
-        type="flex"
-        size="large"
-      >
-        <Heading
-          slot="title"
-          level={1}
-          className={css({
-            textStyle: 'h1',
-            marginBottom: '0.25rem',
-          })}
-        >
-          {t('title')}
-        </Heading>
-        <Text
-          variant="subTitle"
-          className={css({
-            marginBottom: '1.5rem',
-          })}
-        >
-          {t('subTitle')}
-        </Text>
-        <EffectsConfiguration videoTrack={videoTrack} onSubmit={onSubmit} />
-      </Dialog>
-      <div
-        className={css({
-          position: 'absolute',
-          right: 0,
-          bottom: '0',
-          padding: '1rem',
-          zIndex: '1',
-        })}
-      >
-        <Button
-          variant="whiteCircle"
-          onPress={openDialog}
-          tooltip={t('description')}
-          aria-label={t('description')}
-        >
-          <RiImageCircleAiFill size={24} />
-        </Button>
-      </div>
-      <div
-        className={css({
-          position: 'absolute',
-          left: 0,
-          right: 0,
-          bottom: 0,
-          height: '20%',
-          backgroundImage:
-            'linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(255,255,255,0) 100%)',
-          borderBottomRadius: '1rem',
-        })}
-      />
-    </>
-  )
-}
-
 export const Join = ({
   onSubmit,
 }: {
@@ -109,11 +28,8 @@ export const Join = ({
     saveAudioInputDeviceId,
     saveVideoInputDeviceId,
     saveUsername,
-    saveProcessorSerialized,
   } = usePersistentUserChoices({})
 
-  const [audioEnabled, setAudioEnabled] = useState(true)
-  const [videoEnabled, setVideoEnabled] = useState(true)
   const [audioDeviceId, setAudioDeviceId] = useState<string>(
     initialUserChoices.audioDeviceId
   )
@@ -121,11 +37,6 @@ export const Join = ({
     initialUserChoices.videoDeviceId
   )
   const [username, setUsername] = useState<string>(initialUserChoices.username)
-  const [processor, setProcessor] = useState(
-    BackgroundProcessorFactory.deserializeProcessor(
-      initialUserChoices.processorSerialized
-    )
-  )
 
   useEffect(() => {
     saveAudioInputDeviceId(audioDeviceId)
@@ -139,14 +50,8 @@ export const Join = ({
     saveUsername(username)
   }, [username, saveUsername])
 
-  useEffect(() => {
-    saveProcessorSerialized(processor?.serialize())
-  }, [
-    processor,
-    saveProcessorSerialized,
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    JSON.stringify(processor?.serialize()),
-  ])
+  const [audioEnabled, setAudioEnabled] = useState(true)
+  const [videoEnabled, setVideoEnabled] = useState(true)
 
   const tracks = usePreviewTracks(
     {
@@ -202,20 +107,9 @@ export const Join = ({
       audioDeviceId,
       videoDeviceId,
       username,
-      processorSerialized: processor?.serialize(),
     })
   }
 
-  // This hook is used to setup the persisted user choice processor on initialization.
-  // So it's on purpose that processor is not included in the deps.
-  // We just want to wait for the videoTrack to be loaded to apply the default processor.
-  useEffect(() => {
-    if (processor && videoTrack && !videoTrack.getProcessor()) {
-      videoTrack.setProcessor(processor)
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [videoTrack])
-
   return (
     <Screen footer={false}>
       <div
@@ -280,16 +174,13 @@ export const Join = ({
                   height="720"
                   className={css({
                     display: 'block',
-                    width: '100%',
-                    height: '100%',
+                    width: '102%',
+                    height: '102%',
                     objectFit: 'cover',
                     transform: 'rotateY(180deg)',
                     opacity: 0,
                     transition: 'opacity 0.3s ease-in-out',
-                    borderRadius: '1rem',
                   })}
-                  disablePictureInPicture
-                  disableRemotePlayback
                 />
               ) : (
                 <div
@@ -313,8 +204,8 @@ export const Join = ({
                   </p>
                 </div>
               )}
-              <Effects videoTrack={videoTrack} onSubmit={setProcessor} />
             </div>
+
             <HStack justify="center" padding={1.5}>
               <SelectToggleDevice
                 source={Track.Source.Microphone}

src/frontend/src/features/rooms/livekit/components/Effects.tsx

@@ -0,0 +1,188 @@
+import { useEffect, useRef, useState } from 'react'
+import { useLocalParticipant } from '@livekit/components-react'
+import { LocalVideoTrack } from 'livekit-client'
+import { Text, P, ToggleButton, Div, H } from '@/primitives'
+import { useTranslation } from 'react-i18next'
+import { HStack, styled, VStack } from '@/styled-system/jsx'
+import {
+  BackgroundBlurFactory,
+  BackgroundBlurProcessorInterface,
+} from './blur/index'
+
+const Information = styled('div', {
+  base: {
+    backgroundColor: 'orange.50',
+    borderRadius: '4px',
+    padding: '0.75rem 0.75rem',
+    marginTop: '0.8rem',
+    alignItems: 'start',
+  },
+})
+
+enum BlurRadius {
+  NONE = 0,
+  LIGHT = 5,
+  NORMAL = 10,
+}
+
+const isSupported = BackgroundBlurFactory.isSupported()
+
+export const Effects = () => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'effects' })
+  const { isCameraEnabled, cameraTrack, localParticipant } =
+    useLocalParticipant()
+  const videoRef = useRef<HTMLVideoElement>(null)
+  const [processorPending, setProcessorPending] = useState(false)
+
+  const localCameraTrack = cameraTrack?.track as LocalVideoTrack
+
+  const getProcessor = () => {
+    return localCameraTrack?.getProcessor() as BackgroundBlurProcessorInterface
+  }
+
+  const getBlurRadius = (): BlurRadius => {
+    const processor = getProcessor()
+    return processor?.options.blurRadius || BlurRadius.NONE
+  }
+
+  const toggleBlur = async (blurRadius: number) => {
+    if (!isCameraEnabled) await localParticipant.setCameraEnabled(true)
+    if (!localCameraTrack) return
+
+    setProcessorPending(true)
+
+    const processor = getProcessor()
+    const currentBlurRadius = getBlurRadius()
+
+    try {
+      if (blurRadius == currentBlurRadius && processor) {
+        await localCameraTrack.stopProcessor()
+      } else if (!processor) {
+        await localCameraTrack.setProcessor(
+          BackgroundBlurFactory.getProcessor({ blurRadius })!
+        )
+      } else {
+        processor?.update({ blurRadius })
+      }
+    } catch (error) {
+      console.error('Error applying blur:', error)
+    } finally {
+      setProcessorPending(false)
+    }
+  }
+
+  useEffect(() => {
+    const videoElement = videoRef.current
+    if (!videoElement) return
+
+    const attachVideoTrack = async () => localCameraTrack?.attach(videoElement)
+    attachVideoTrack()
+
+    return () => {
+      if (!videoElement) return
+      localCameraTrack.detach(videoElement)
+    }
+  }, [localCameraTrack, isCameraEnabled])
+
+  const isSelected = (blurRadius: BlurRadius) => {
+    return isCameraEnabled && getBlurRadius() == blurRadius
+  }
+
+  const tooltipLabel = (blurRadius: BlurRadius) => {
+    return t(`blur.${isSelected(blurRadius) ? 'clear' : 'apply'}`)
+  }
+
+  return (
+    <VStack padding="0 1.5rem" overflowY="scroll">
+      {localCameraTrack && isCameraEnabled ? (
+        <video
+          ref={videoRef}
+          width="100%"
+          muted
+          style={{
+            transform: 'rotateY(180deg)',
+            minHeight: '175px',
+            borderRadius: '8px',
+          }}
+        />
+      ) : (
+        <div
+          style={{
+            width: '100%',
+            height: '174px',
+            display: 'flex',
+            backgroundColor: 'black',
+            justifyContent: 'center',
+            flexDirection: 'column',
+          }}
+        >
+          <P
+            style={{
+              color: 'white',
+              textAlign: 'center',
+              textWrap: 'balance',
+              marginBottom: 0,
+            }}
+          >
+            {t('activateCamera')}
+          </P>
+        </div>
+      )}
+      <Div
+        alignItems={'left'}
+        width={'100%'}
+        style={{
+          border: '1px solid #dadce0',
+          borderRadius: '8px',
+          margin: '0 .625rem',
+          padding: '0.5rem 1rem',
+        }}
+      >
+        <H
+          lvl={3}
+          style={{
+            marginBottom: '0.4rem',
+          }}
+        >
+          {t('heading')}
+        </H>
+        {isSupported ? (
+          <HStack>
+            <ToggleButton
+              size={'sm'}
+              aria-label={tooltipLabel(BlurRadius.LIGHT)}
+              tooltip={tooltipLabel(BlurRadius.LIGHT)}
+              isDisabled={processorPending}
+              onPress={async () => await toggleBlur(BlurRadius.LIGHT)}
+              isSelected={isSelected(BlurRadius.LIGHT)}
+            >
+              {t('blur.light')}
+            </ToggleButton>
+            <ToggleButton
+              size={'sm'}
+              aria-label={tooltipLabel(BlurRadius.NORMAL)}
+              tooltip={tooltipLabel(BlurRadius.NORMAL)}
+              isDisabled={processorPending}
+              onPress={async () => await toggleBlur(BlurRadius.NORMAL)}
+              isSelected={isSelected(BlurRadius.NORMAL)}
+            >
+              {t('blur.normal')}
+            </ToggleButton>
+          </HStack>
+        ) : (
+          <Text variant="sm">{t('notAvailable')}</Text>
+        )}
+        <Information>
+          <Text
+            variant="sm"
+            style={{
+              textWrap: 'balance',
+            }}
+          >
+            ⚠︎ {t('experimental')}
+          </Text>
+        </Information>
+      </Div>
+    </VStack>
+  )
+}

src/frontend/src/features/rooms/livekit/components/SidePanel.tsx

@@ -8,9 +8,9 @@ import { useTranslation } from 'react-i18next'
 import { ParticipantsList } from './controls/Participants/ParticipantsList'
 import { useSidePanel } from '../hooks/useSidePanel'
 import { ReactNode } from 'react'
+import { Effects } from './Effects'
 import { Chat } from '../prefabs/Chat'
 import { Transcript } from './Transcript'
-import { Effects } from './effects/Effects'
 
 type StyledSidePanelProps = {
   title: string

src/frontend/src/features/rooms/livekit/components/blur/BackgroundBlurCustomProcessor.ts

@@ -11,11 +11,7 @@ import {
   TIMEOUT_TICK,
   timerWorkerScript,
 } from './TimerWorker'
-import {
-  BackgroundProcessorInterface,
-  BackgroundOptions,
-  ProcessorType,
-} from '.'
+import { BackgroundBlurProcessorInterface, BackgroundOptions } from '.'
 
 const PROCESSING_WIDTH = 256
 const PROCESSING_HEIGHT = 144
@@ -32,7 +28,9 @@ const DEFAULT_BLUR = '10'
  * It also make possible to run blurring on browser that does not implement MediaStreamTrackGenerator and
  * MediaStreamTrackProcessor.
  */
-export class BackgroundCustomProcessor implements BackgroundProcessorInterface {
+export class BackgroundBlurCustomProcessor
+  implements BackgroundBlurProcessorInterface
+{
   options: BackgroundOptions
   name: string
   processedTrack?: MediaStreamTrack | undefined
@@ -61,18 +59,9 @@ export class BackgroundCustomProcessor implements BackgroundProcessorInterface {
 
   timerWorker?: Worker
 
-  type: ProcessorType
-  virtualBackgroundImage?: HTMLImageElement
-
   constructor(opts: BackgroundOptions) {
     this.name = 'blur'
     this.options = opts
-
-    if (this.options.blurRadius) {
-      this.type = ProcessorType.BLUR
-    } else {
-      this.type = ProcessorType.VIRTUAL
-    }
   }
 
   static get isSupported() {
@@ -88,7 +77,6 @@ export class BackgroundCustomProcessor implements BackgroundProcessorInterface {
     this.sourceSettings = this.source!.getSettings()
     this.videoElement = opts.element as HTMLVideoElement
 
-    this._initVirtualBackgroundImage()
     this._createMainCanvas()
     this._createMaskCanvas()
 
@@ -106,21 +94,8 @@ export class BackgroundCustomProcessor implements BackgroundProcessorInterface {
     posthog.capture('firefox-blurring-init')
   }
 
-  _initVirtualBackgroundImage() {
-    const needsUpdate =
-      this.options.imagePath &&
-      this.virtualBackgroundImage &&
-      this.virtualBackgroundImage.src !== this.options.imagePath
-    if (this.options.imagePath || needsUpdate) {
-      this.virtualBackgroundImage = document.createElement('img')
-      this.virtualBackgroundImage.crossOrigin = 'anonymous'
-      this.virtualBackgroundImage.src = this.options.imagePath!
-    }
-  }
-
   update(opts: BackgroundOptions): void {
     this.options = opts
-    this._initVirtualBackgroundImage()
   }
 
   _initWorker() {
@@ -222,7 +197,6 @@ export class BackgroundCustomProcessor implements BackgroundProcessorInterface {
     this.outputCanvasCtx!.globalCompositeOperation = 'copy'
     this.outputCanvasCtx!.filter = 'blur(8px)'
 
-    // Put opacity mask.
     this.outputCanvasCtx!.drawImage(
       this.segmentationMaskCanvas!,
       0,
@@ -235,69 +209,19 @@ export class BackgroundCustomProcessor implements BackgroundProcessorInterface {
       this.videoElement!.videoHeight
     )
 
-    // Draw clear body.
     this.outputCanvasCtx!.globalCompositeOperation = 'source-in'
     this.outputCanvasCtx!.filter = 'none'
     this.outputCanvasCtx!.drawImage(this.videoElement!, 0, 0)
 
-    // Draw blurry background.
     this.outputCanvasCtx!.globalCompositeOperation = 'destination-over'
     this.outputCanvasCtx!.filter = `blur(${this.options.blurRadius ?? DEFAULT_BLUR}px)`
     this.outputCanvasCtx!.drawImage(this.videoElement!, 0, 0)
   }
 
-  /**
-   * TODO: future improvement with WebGL.
-   */
-  async drawVirtualBackground() {
-    const mask = this.imageSegmenterResult!.categoryMask!.getAsUint8Array()
-    for (let i = 0; i < mask.length; ++i) {
-      this.segmentationMask!.data[i * 4 + 3] = 255 - mask[i]
-    }
-
-    this.segmentationMaskCanvasCtx!.putImageData(this.segmentationMask!, 0, 0)
-
-    this.outputCanvasCtx!.globalCompositeOperation = 'copy'
-    this.outputCanvasCtx!.filter = 'blur(8px)'
-
-    // Put opacity mask.
-    this.outputCanvasCtx!.drawImage(
-      this.segmentationMaskCanvas!,
-      0,
-      0,
-      PROCESSING_WIDTH,
-      PROCESSING_HEIGHT,
-      0,
-      0,
-      this.videoElement!.videoWidth,
-      this.videoElement!.videoHeight
-    )
-
-    // Draw clear body.
-    this.outputCanvasCtx!.globalCompositeOperation = 'source-in'
-    this.outputCanvasCtx!.filter = 'none'
-    this.outputCanvasCtx!.drawImage(this.videoElement!, 0, 0)
-
-    // Draw virtual background.
-    this.outputCanvasCtx!.globalCompositeOperation = 'destination-over'
-    this.outputCanvasCtx!.drawImage(
-      this.virtualBackgroundImage!,
-      0,
-      0,
-      this.outputCanvas!.width,
-      this.outputCanvas!.height
-    )
-  }
-
   async process() {
     await this.sizeSource()
     await this.segment()
-
-    if (this.options.blurRadius) {
-      await this.blur()
-    } else {
-      await this.drawVirtualBackground()
-    }
+    await this.blur()
     this.timerWorker!.postMessage({
       id: SET_TIMEOUT,
       timeMs: 1000 / 30,
@@ -354,15 +278,4 @@ export class BackgroundCustomProcessor implements BackgroundProcessorInterface {
     this.timerWorker?.terminate()
     this.imageSegmenter?.close()
   }
-
-  clone() {
-    return new BackgroundCustomProcessor(this.options)
-  }
-
-  serialize() {
-    return {
-      type: this.type,
-      options: this.options,
-    }
-  }
 }

src/frontend/src/features/rooms/livekit/components/blur/BackgroundBlurTrackProcessorJsWrapper.ts

@@ -4,11 +4,7 @@ import {
   ProcessorWrapper,
 } from '@livekit/track-processors'
 import { ProcessorOptions, Track } from 'livekit-client'
-import {
-  BackgroundProcessorInterface,
-  BackgroundOptions,
-  ProcessorType,
-} from '.'
+import { BackgroundBlurProcessorInterface, BackgroundOptions } from '.'
 
 /**
  * This is simply a wrapper around track-processor-js Processor
@@ -16,17 +12,14 @@ import {
  * used accross the project.
  */
 export class BackgroundBlurTrackProcessorJsWrapper
-  implements BackgroundProcessorInterface
+  implements BackgroundBlurProcessorInterface
 {
-  name: string = 'blur'
+  name: string = 'Blur'
 
   processor: ProcessorWrapper<BackgroundOptions>
 
-  opts: BackgroundOptions
-
   constructor(opts: BackgroundOptions) {
     this.processor = BackgroundBlur(opts.blurRadius)
-    this.opts = opts
   }
 
   async init(opts: ProcessorOptions<Track.Kind>) {
@@ -52,17 +45,4 @@ export class BackgroundBlurTrackProcessorJsWrapper
   get options() {
     return (this.processor.transformer as BackgroundTransformer).options
   }
-
-  clone() {
-    return new BackgroundBlurTrackProcessorJsWrapper({
-      blurRadius: this.options!.blurRadius,
-    })
-  }
-
-  serialize() {
-    return {
-      type: ProcessorType.BLUR,
-      options: this.options,
-    }
-  }
 }

src/frontend/src/features/rooms/livekit/components/blur/BackgroundVirtualTrackProcessorJsWrapper.ts

@@ -1,61 +0,0 @@
-import { ProcessorOptions, Track } from 'livekit-client'
-import {
-  BackgroundOptions,
-  BackgroundProcessorInterface,
-  ProcessorType,
-} from '.'
-import {
-  BackgroundTransformer,
-  ProcessorWrapper,
-  VirtualBackground,
-} from '@livekit/track-processors'
-
-export class BackgroundVirtualTrackProcessorJsWrapper
-  implements BackgroundProcessorInterface
-{
-  name = 'virtual'
-
-  processor: ProcessorWrapper<BackgroundOptions>
-
-  opts: BackgroundOptions
-
-  constructor(opts: BackgroundOptions) {
-    this.processor = VirtualBackground(opts.imagePath!)
-    this.opts = opts
-  }
-
-  async init(opts: ProcessorOptions<Track.Kind>) {
-    return this.processor.init(opts)
-  }
-
-  async restart(opts: ProcessorOptions<Track.Kind>) {
-    return this.processor.restart(opts)
-  }
-
-  async destroy() {
-    return this.processor.destroy()
-  }
-
-  update(opts: BackgroundOptions): void {
-    this.processor.updateTransformerOptions(opts)
-  }
-
-  get processedTrack() {
-    return this.processor.processedTrack
-  }
-
-  get options() {
-    return (this.processor.transformer as BackgroundTransformer).options
-  }
-
-  clone() {
-    return new BackgroundVirtualTrackProcessorJsWrapper(this.options)
-  }
-
-  serialize() {
-    return {
-      type: ProcessorType.VIRTUAL,
-      options: this.options,
-    }
-  }
-}

src/frontend/src/features/rooms/livekit/components/blur/index.ts

@@ -1,63 +1,32 @@
 import { ProcessorWrapper } from '@livekit/track-processors'
 import { Track, TrackProcessor } from 'livekit-client'
 import { BackgroundBlurTrackProcessorJsWrapper } from './BackgroundBlurTrackProcessorJsWrapper'
-import { BackgroundCustomProcessor } from './BackgroundCustomProcessor'
-import { BackgroundVirtualTrackProcessorJsWrapper } from './BackgroundVirtualTrackProcessorJsWrapper'
+import { BackgroundBlurCustomProcessor } from './BackgroundBlurCustomProcessor'
 
 export type BackgroundOptions = {
   blurRadius?: number
-  imagePath?: string
 }
 
-export interface ProcessorSerialized {
-  type: ProcessorType
-  options: BackgroundOptions
-}
-
-export interface BackgroundProcessorInterface
+export interface BackgroundBlurProcessorInterface
   extends TrackProcessor<Track.Kind> {
   update(opts: BackgroundOptions): void
   options: BackgroundOptions
-  clone(): BackgroundProcessorInterface
-  serialize(): ProcessorSerialized
 }
 
-export enum ProcessorType {
-  BLUR = 'blur',
-  VIRTUAL = 'virtual',
-}
-
-export class BackgroundProcessorFactory {
+export class BackgroundBlurFactory {
   static isSupported() {
-    return ProcessorWrapper.isSupported || BackgroundCustomProcessor.isSupported
+    return (
+      ProcessorWrapper.isSupported || BackgroundBlurCustomProcessor.isSupported
+    )
   }
 
-  static getProcessor(
-    type: ProcessorType,
-    opts: BackgroundOptions
-  ): BackgroundProcessorInterface | undefined {
-    if (type === ProcessorType.BLUR) {
-      if (ProcessorWrapper.isSupported) {
-        return new BackgroundBlurTrackProcessorJsWrapper(opts)
-      }
-      if (BackgroundCustomProcessor.isSupported) {
-        return new BackgroundCustomProcessor(opts)
-      }
-    } else if (type === ProcessorType.VIRTUAL) {
-      if (ProcessorWrapper.isSupported) {
-        return new BackgroundVirtualTrackProcessorJsWrapper(opts)
-      }
-      if (BackgroundCustomProcessor.isSupported) {
-        return new BackgroundCustomProcessor(opts)
-      }
+  static getProcessor(opts: BackgroundOptions) {
+    if (ProcessorWrapper.isSupported) {
+      return new BackgroundBlurTrackProcessorJsWrapper(opts)
     }
-    return undefined
-  }
-
-  static deserializeProcessor(data?: ProcessorSerialized) {
-    if (data?.type) {
-      return BackgroundProcessorFactory.getProcessor(data?.type, data?.options)
+    if (BackgroundBlurCustomProcessor.isSupported) {
+      return new BackgroundBlurCustomProcessor(opts)
     }
-    return undefined
+    return null
   }
 }

src/frontend/src/features/rooms/livekit/components/controls/Options/EffectsMenuItem.tsx

@@ -1,4 +1,4 @@
-import { RiImageCircleAiFill } from '@remixicon/react'
+import { RiAccountBoxLine } from '@remixicon/react'
 import { MenuItem } from 'react-aria-components'
 import { useTranslation } from 'react-i18next'
 import { menuRecipe } from '@/primitives/menuRecipe'
@@ -13,7 +13,7 @@ export const EffectsMenuItem = () => {
       onAction={() => toggleEffects()}
       className={menuRecipe({ icon: true, variant: 'dark' }).item}
     >
-      <RiImageCircleAiFill size={20} />
+      <RiAccountBoxLine size={20} />
       {t('effects')}
     </MenuItem>
   )

src/frontend/src/features/rooms/livekit/components/controls/SelectToggleDevice.tsx

@@ -13,12 +13,7 @@ import {
   RiVideoOffLine,
   RiVideoOnLine,
 } from '@remixicon/react'
-import {
-  LocalAudioTrack,
-  LocalVideoTrack,
-  Track,
-  VideoCaptureOptions,
-} from 'livekit-client'
+import { LocalAudioTrack, LocalVideoTrack, Track } from 'livekit-client'
 
 import { Shortcut } from '@/features/shortcuts/types'
 
@@ -26,8 +21,6 @@ import { ToggleDevice } from '@/features/rooms/livekit/components/controls/Toggl
 import { css } from '@/styled-system/css'
 import { ButtonRecipeProps } from '@/primitives/buttonRecipe'
 import { useEffect } from 'react'
-import { usePersistentUserChoices } from '../../hooks/usePersistentUserChoices'
-import { BackgroundProcessorFactory } from '../blur'
 
 export type ToggleSource = Exclude<
   Track.Source,
@@ -99,39 +92,6 @@ export const SelectToggleDevice = <T extends ToggleSource>({
   const { t } = useTranslation('rooms', { keyPrefix: 'join' })
   const trackProps = useTrackToggle(props)
 
-  const { userChoices } = usePersistentUserChoices({})
-
-  const toggle = () => {
-    if (props.source === Track.Source.Camera) {
-      /**
-       * We need to make sure that we apply the in-memory processor when re-enabling the camera.
-       * Before, we had the following bug:
-       * 1 - Configure a processor on join screen
-       * 2 - Turn off camera on join screen
-       * 3 - Join the room
-       * 4 - Turn on the camera
-       * 5 - No processor is applied to the camera
-       * Expected: The processor is applied.
-       *
-       * See https://github.com/numerique-gouv/meet/pull/309#issuecomment-2622404121
-       */
-      const processor = BackgroundProcessorFactory.deserializeProcessor(
-        userChoices.processorSerialized
-      )
-
-      const toggle = trackProps.toggle as (
-        forceState: boolean,
-        captureOptions: VideoCaptureOptions
-      ) => Promise<void>
-
-      toggle(!trackProps.enabled, {
-        processor: processor,
-      } as VideoCaptureOptions)
-    } else {
-      trackProps.toggle()
-    }
-  }
-
   const { devices, activeDeviceId, setActiveMediaDevice } =
     useMediaDeviceSelect({ kind: config.kind, track })
 
@@ -160,7 +120,6 @@ export const SelectToggleDevice = <T extends ToggleSource>({
         {...trackProps}
         config={config}
         variant={variant}
-        toggle={toggle}
         toggleButtonProps={{
           ...(hideMenu
             ? {

src/frontend/src/features/rooms/livekit/components/effects/Effects.tsx

@@ -1,27 +0,0 @@
-import { useLocalParticipant } from '@livekit/components-react'
-import { LocalVideoTrack } from 'livekit-client'
-import { css } from '@/styled-system/css'
-import { EffectsConfiguration } from './EffectsConfiguration'
-import { usePersistentUserChoices } from '../../hooks/usePersistentUserChoices'
-
-export const Effects = () => {
-  const { cameraTrack } = useLocalParticipant()
-  const localCameraTrack = cameraTrack?.track as LocalVideoTrack
-  const { saveProcessorSerialized } = usePersistentUserChoices()
-
-  return (
-    <div
-      className={css({
-        padding: '0 1.5rem',
-      })}
-    >
-      <EffectsConfiguration
-        videoTrack={localCameraTrack}
-        layout="vertical"
-        onSubmit={(processor) =>
-          saveProcessorSerialized(processor?.serialize())
-        }
-      />
-    </div>
-  )
-}

src/frontend/src/features/rooms/livekit/components/effects/EffectsConfiguration.tsx

@@ -1,316 +0,0 @@
-import { LocalVideoTrack } from 'livekit-client'
-import { useEffect, useRef, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import {
-  BackgroundProcessorFactory,
-  BackgroundProcessorInterface,
-  ProcessorType,
-} from '../blur'
-import { css } from '@/styled-system/css'
-import { Text, P, ToggleButton, H } from '@/primitives'
-import { styled } from '@/styled-system/jsx'
-import { BackgroundOptions } from '@livekit/track-processors'
-import { BlurOn } from '@/components/icons/BlurOn'
-import { BlurOnStrong } from '@/components/icons/BlurOnStrong'
-
-enum BlurRadius {
-  NONE = 0,
-  LIGHT = 5,
-  NORMAL = 10,
-}
-
-const isSupported = BackgroundProcessorFactory.isSupported()
-
-const Information = styled('div', {
-  base: {
-    backgroundColor: 'orange.50',
-    borderRadius: '4px',
-    padding: '0.75rem 0.75rem',
-    alignItems: 'start',
-  },
-})
-
-export type EffectsConfigurationProps = {
-  videoTrack: LocalVideoTrack
-  onSubmit?: (processor?: BackgroundProcessorInterface) => void
-  layout?: 'vertical' | 'horizontal'
-}
-
-export const EffectsConfiguration = ({
-  videoTrack,
-  onSubmit,
-  layout = 'horizontal',
-}: EffectsConfigurationProps) => {
-  const videoRef = useRef<HTMLVideoElement>(null)
-  const { t } = useTranslation('rooms', { keyPrefix: 'effects' })
-  const [processorPending, setProcessorPending] = useState(false)
-
-  useEffect(() => {
-    const videoElement = videoRef.current
-    if (!videoElement) return
-
-    const attachVideoTrack = async () => videoTrack?.attach(videoElement)
-    attachVideoTrack()
-
-    return () => {
-      if (!videoElement) return
-      videoTrack.detach(videoElement)
-    }
-  }, [videoTrack, videoTrack?.isMuted])
-
-  const toggleEffect = async (
-    type: ProcessorType,
-    options: BackgroundOptions
-  ) => {
-    if (!videoTrack) return
-    setProcessorPending(true)
-    const processor = getProcessor()
-    try {
-      if (isSelected(type, options)) {
-        // Stop processor.
-        await videoTrack.stopProcessor()
-        onSubmit?.(undefined)
-      } else if (!processor || processor.serialize().type !== type) {
-        // Change processor.
-        const newProcessor = BackgroundProcessorFactory.getProcessor(
-          type,
-          options
-        )!
-        await videoTrack.setProcessor(newProcessor)
-        onSubmit?.(newProcessor)
-      } else {
-        // Update processor.
-        processor?.update(options)
-        // We want to trigger onSubmit when options changes so the parent component is aware of it.
-        onSubmit?.(processor)
-      }
-    } catch (error) {
-      console.error('Error applying blur:', error)
-    } finally {
-      // Without setTimeout the DOM is not refreshing when updating the options.
-      setTimeout(() => setProcessorPending(false))
-    }
-  }
-
-  const getProcessor = () => {
-    return videoTrack?.getProcessor() as BackgroundProcessorInterface
-  }
-
-  const isSelected = (type: ProcessorType, options: BackgroundOptions) => {
-    const processor = getProcessor()
-    const processorSerialized = processor?.serialize()
-    return (
-      !!processor &&
-      processorSerialized.type === type &&
-      JSON.stringify(processorSerialized.options) === JSON.stringify(options)
-    )
-  }
-
-  const tooltipLabel = (type: ProcessorType, options: BackgroundOptions) => {
-    return t(`${type}.${isSelected(type, options) ? 'clear' : 'apply'}`)
-  }
-
-  return (
-    <div
-      className={css(
-        layout === 'vertical'
-          ? {
-              display: 'flex',
-              flexDirection: 'column',
-              gap: '1.5rem',
-            }
-          : {
-              display: 'flex',
-              gap: '1.5rem',
-              flexDirection: 'column',
-              md: {
-                flexDirection: 'row',
-                overflow: 'hidden',
-              },
-            }
-      )}
-    >
-      <div
-        className={css({
-          width: '100%',
-          aspectRatio: 16 / 9,
-        })}
-      >
-        {videoTrack && !videoTrack.isMuted ? (
-          <video
-            ref={videoRef}
-            width="100%"
-            muted
-            style={{
-              transform: 'rotateY(180deg)',
-              minHeight: '175px',
-              borderRadius: '8px',
-            }}
-          />
-        ) : (
-          <div
-            style={{
-              width: '100%',
-              height: '100%',
-              display: 'flex',
-              backgroundColor: 'black',
-              justifyContent: 'center',
-              flexDirection: 'column',
-            }}
-          >
-            <P
-              style={{
-                color: 'white',
-                textAlign: 'center',
-                textWrap: 'balance',
-                marginBottom: 0,
-              }}
-            >
-              {t('activateCamera')}
-            </P>
-          </div>
-        )}
-      </div>
-      <div
-        className={css(
-          layout === 'horizontal'
-            ? {
-                md: {
-                  borderLeft: '1px solid #dadce0',
-                  paddingLeft: '1.5rem',
-                  width: '420px',
-                  flexShrink: 0,
-                },
-              }
-            : {}
-        )}
-      >
-        {isSupported ? (
-          <>
-            <div>
-              <div>
-                <H
-                  lvl={3}
-                  style={{
-                    marginBottom: '1rem',
-                  }}
-                  variant="bodyXsBold"
-                >
-                  {t('blur.title')}
-                </H>
-                <div
-                  className={css({
-                    display: 'flex',
-                    gap: '1.25rem',
-                  })}
-                >
-                  <ToggleButton
-                    variant="bigSquare"
-                    aria-label={tooltipLabel(ProcessorType.BLUR, {
-                      blurRadius: BlurRadius.LIGHT,
-                    })}
-                    tooltip={tooltipLabel(ProcessorType.BLUR, {
-                      blurRadius: BlurRadius.LIGHT,
-                    })}
-                    isDisabled={processorPending}
-                    onChange={async () =>
-                      await toggleEffect(ProcessorType.BLUR, {
-                        blurRadius: BlurRadius.LIGHT,
-                      })
-                    }
-                    isSelected={isSelected(ProcessorType.BLUR, {
-                      blurRadius: BlurRadius.LIGHT,
-                    })}
-                  >
-                    <BlurOn />
-                  </ToggleButton>
-                  <ToggleButton
-                    variant="bigSquare"
-                    aria-label={tooltipLabel(ProcessorType.BLUR, {
-                      blurRadius: BlurRadius.NORMAL,
-                    })}
-                    tooltip={tooltipLabel(ProcessorType.BLUR, {
-                      blurRadius: BlurRadius.NORMAL,
-                    })}
-                    isDisabled={processorPending}
-                    onChange={async () =>
-                      await toggleEffect(ProcessorType.BLUR, {
-                        blurRadius: BlurRadius.NORMAL,
-                      })
-                    }
-                    isSelected={isSelected(ProcessorType.BLUR, {
-                      blurRadius: BlurRadius.NORMAL,
-                    })}
-                  >
-                    <BlurOnStrong />
-                  </ToggleButton>
-                </div>
-              </div>
-              <div
-                className={css({
-                  marginTop: '1.5rem',
-                })}
-              >
-                <H
-                  lvl={3}
-                  style={{
-                    marginBottom: '1rem',
-                  }}
-                  variant="bodyXsBold"
-                >
-                  {t('virtual.title')}
-                </H>
-                <div
-                  className={css({
-                    display: 'flex',
-                    gap: '1.25rem',
-                    flexWrap: 'wrap',
-                  })}
-                >
-                  {[...Array(8).keys()].map((i) => {
-                    const imagePath = `/assets/backgrounds/${i + 1}.jpg`
-                    const thumbnailPath = `/assets/backgrounds/thumbnails/${i + 1}.jpg`
-                    return (
-                      <ToggleButton
-                        key={i}
-                        variant="bigSquare"
-                        aria-label={tooltipLabel(ProcessorType.VIRTUAL, {
-                          imagePath,
-                        })}
-                        tooltip={tooltipLabel(ProcessorType.VIRTUAL, {
-                          imagePath,
-                        })}
-                        isDisabled={processorPending}
-                        onChange={async () =>
-                          await toggleEffect(ProcessorType.VIRTUAL, {
-                            imagePath,
-                          })
-                        }
-                        isSelected={isSelected(ProcessorType.VIRTUAL, {
-                          imagePath,
-                        })}
-                        className={css({
-                          bgSize: 'cover',
-                        })}
-                        style={{
-                          backgroundImage: `url(${thumbnailPath})`,
-                        }}
-                      ></ToggleButton>
-                    )
-                  })}
-                </div>
-              </div>
-            </div>
-            <Information className={css({ marginTop: '1rem' })}>
-              <Text variant="sm">⚠︎ {t('experimental')}</Text>
-            </Information>
-          </>
-        ) : (
-          <Information>
-            <Text variant="sm">{t('notAvailable')}</Text>
-          </Information>
-        )}
-      </div>
-    </div>
-  )
-}

src/frontend/src/features/rooms/livekit/hooks/usePersistentUserChoices.ts

@@ -1,56 +0,0 @@
-import { UsePersistentUserChoicesOptions } from '@livekit/components-react'
-import React from 'react'
-import { LocalUserChoices } from '../../routes/Room'
-import { saveUserChoices, loadUserChoices } from '@livekit/components-core'
-import { ProcessorSerialized } from '../components/blur'
-
-/**
- * From @livekit/component-react
- *
- * A hook that provides access to user choices stored in local storage, such as
- * selected media devices and their current state (on or off), as well as the user name.
- * @alpha
- */
-export function usePersistentUserChoices(
-  options: UsePersistentUserChoicesOptions = {}
-) {
-  const [userChoices, setSettings] = React.useState<LocalUserChoices>(
-    loadUserChoices(options.defaults, options.preventLoad ?? false)
-  )
-
-  const saveAudioInputEnabled = React.useCallback((isEnabled: boolean) => {
-    setSettings((prev) => ({ ...prev, audioEnabled: isEnabled }))
-  }, [])
-  const saveVideoInputEnabled = React.useCallback((isEnabled: boolean) => {
-    setSettings((prev) => ({ ...prev, videoEnabled: isEnabled }))
-  }, [])
-  const saveAudioInputDeviceId = React.useCallback((deviceId: string) => {
-    setSettings((prev) => ({ ...prev, audioDeviceId: deviceId }))
-  }, [])
-  const saveVideoInputDeviceId = React.useCallback((deviceId: string) => {
-    setSettings((prev) => ({ ...prev, videoDeviceId: deviceId }))
-  }, [])
-  const saveUsername = React.useCallback((username: string) => {
-    setSettings((prev) => ({ ...prev, username: username }))
-  }, [])
-  const saveProcessorSerialized = React.useCallback(
-    (processorSerialized?: ProcessorSerialized) => {
-      setSettings((prev) => ({ ...prev, processorSerialized }))
-    },
-    []
-  )
-
-  React.useEffect(() => {
-    saveUserChoices(userChoices, options.preventSave ?? false)
-  }, [userChoices, options.preventSave])
-
-  return {
-    userChoices,
-    saveAudioInputEnabled,
-    saveVideoInputEnabled,
-    saveAudioInputDeviceId,
-    saveVideoInputDeviceId,
-    saveUsername,
-    saveProcessorSerialized,
-  }
-}

src/frontend/src/features/rooms/livekit/prefabs/ControlBar/ControlBar.tsx

@@ -1,11 +1,11 @@
 import { Track } from 'livekit-client'
 import * as React from 'react'
+import { usePersistentUserChoices } from '@livekit/components-react'
 
 import { MobileControlBar } from './MobileControlBar'
 import { DesktopControlBar } from './DesktopControlBar'
 import { SettingsDialogProvider } from '../../components/controls/SettingsDialogContext'
 import { useIsMobile } from '@/utils/useIsMobile'
-import { usePersistentUserChoices } from '../../hooks/usePersistentUserChoices'
 
 /** @public */
 export type ControlBarControls = {

src/frontend/src/features/rooms/routes/Room.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
 import {
   usePersistentUserChoices,
-  type LocalUserChoices as LocalUserChoicesLK,
+  type LocalUserChoices,
 } from '@livekit/components-react'
 import { useParams } from 'wouter'
 import { ErrorScreen } from '@/components/ErrorScreen'
@@ -9,11 +9,6 @@ import { useUser, UserAware } from '@/features/auth'
 import { Conference } from '../components/Conference'
 import { Join } from '../components/Join'
 import { useKeyboardShortcuts } from '@/features/shortcuts/useKeyboardShortcuts'
-import { ProcessorSerialized } from '../livekit/components/blur'
-
-export type LocalUserChoices = LocalUserChoicesLK & {
-  processorSerialized?: ProcessorSerialized
-}
 
 export const Room = () => {
   const { isLoggedIn } = useUser()

src/frontend/src/features/sdk/SdkReverseClient.tsx

@@ -0,0 +1,53 @@
+export enum ClientMessageType {
+  ROOM_CREATED = 'ROOM_CREATED',
+}
+
+export class SdkReverseClient {
+  /**
+   * IDEA: Use API Key. Must be based on some sort of credentials ? No needs for now as now security
+   * issues are plausible.
+   */
+  static getAllowTargetOrigin() {
+    return '*'
+  }
+
+  static post(type: ClientMessageType, data: unknown = {}) {
+    window.parent.postMessage(
+      {
+        type,
+        data,
+      },
+      SdkReverseClient.getAllowTargetOrigin()
+    )
+  }
+
+  static broadcastAuthentication() {
+    const bc = new BroadcastChannel('APP_CHANNEL')
+    bc.postMessage({ type: 'AUTHENTICATED' })
+
+    /**
+     * This means the parent window has authenticated has successfully refetched user, then we can close the popup.
+     */
+    bc.onmessage = (event) => {
+      if (event.data.type === 'AUTHENTICATED_ACK') {
+        window.close()
+      }
+    }
+  }
+
+  static waitForAuthenticationAck() {
+    return new Promise<void>((resolve) => {
+      const bc = new BroadcastChannel('APP_CHANNEL')
+      bc.onmessage = async (event) => {
+        if (event.data.type === 'AUTHENTICATED') {
+          resolve()
+          bc.postMessage({ type: 'AUTHENTICATED_ACK' })
+        }
+      }
+    })
+  }
+
+  static ensureAuth() {
+    // TODO: ...
+  }
+}

src/frontend/src/features/sdk/routes/CreateButton.tsx

@@ -0,0 +1,116 @@
+import { Button } from '@/primitives/Button'
+import { useTranslation } from 'react-i18next'
+import { usePersistentUserChoices } from '@livekit/components-react'
+import { useState } from 'react'
+import { getRouteUrl } from '@/navigation/getRouteUrl'
+import { css } from '@/styled-system/css'
+import { RiCheckLine, RiFileCopyLine } from '@remixicon/react'
+import { VisioIcon } from '@/assets/VisioIcon'
+import { generateRoomId, useCreateRoom } from '../../rooms'
+import { ClientMessageType, SdkReverseClient } from '../SdkReverseClient'
+import { authUrl, useUser } from '@/features/auth'
+
+export const SdkCreateButton = () => {
+  const { isLoggedIn, ...other } = useUser()
+  const { t } = useTranslation('sdk', { keyPrefix: 'createButton' })
+  const [roomUrl, setRoomUrl] = useState<string>()
+  const [isLoading, setIsLoading] = useState(false)
+  const {
+    userChoices: { username },
+  } = usePersistentUserChoices()
+
+  const { mutateAsync: createRoom } = useCreateRoom()
+
+  const startSSO = () => {
+    SdkReverseClient.waitForAuthenticationAck().then(async () => {
+      await other.refetch()
+      submitCreateRoom()
+    })
+    const params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,
+width=400,height=900,left=100,top=100`
+    window.open(new URL('authenticate/', authUrl()).href, '', params)
+  }
+
+  const submitCreateRoom = () => {
+    setIsLoading(true)
+    setTimeout(() => {
+      const slug = generateRoomId()
+      createRoom({ slug, username }).then((data) => {
+        const roomUrlTmp = getRouteUrl('room', data.slug)
+        setRoomUrl(roomUrlTmp)
+        setIsLoading(false)
+        SdkReverseClient.post(ClientMessageType.ROOM_CREATED, {
+          url: roomUrlTmp,
+        })
+      })
+    }, 0)
+  }
+
+  const submit = () => {
+    if (isLoggedIn) {
+      submitCreateRoom()
+    } else {
+      startSSO()
+    }
+  }
+
+  return (
+    <div
+      className={css({
+        paddingTop: '3px',
+        paddingLeft: '3px',
+      })}
+    >
+      {roomUrl ? (
+        <RoomUrl roomUrl={roomUrl} />
+      ) : (
+        <Button
+          variant="primaryDark"
+          aria-label={t('label')}
+          onPress={submit}
+          data-attr="sdk-create"
+          loading={isLoading}
+          icon={<VisioIcon />}
+        >
+          {t('label')}
+        </Button>
+      )}
+    </div>
+  )
+}
+
+const RoomUrl = ({ roomUrl }: { roomUrl: string }) => {
+  const [isCopied, setIsCopied] = useState(false)
+
+  const copy = () => {
+    navigator.clipboard.writeText(roomUrl!)
+    setIsCopied(true)
+    setTimeout(() => setIsCopied(false), 1000)
+  }
+
+  return (
+    <div
+      className={css({
+        display: 'flex',
+        alignItems: 'center',
+        gap: '0.5rem',
+      })}
+    >
+      <span
+        className={css({
+          color: 'greyscale.600',
+        })}
+      >
+        {roomUrl}
+      </span>
+      <Button
+        variant={isCopied ? 'success' : 'quaternaryText'}
+        data-attr="sdk-create-copy"
+        onPress={copy}
+        square
+      >
+        {isCopied ? <RiCheckLine /> : <RiFileCopyLine />}
+      </Button>
+    </div>
+  )
+}

src/frontend/src/features/settings/components/tabs/AccountTab.tsx

@@ -1,13 +1,15 @@
 import { A, Badge, Button, DialogProps, Field, H, P } from '@/primitives'
 import { Trans, useTranslation } from 'react-i18next'
-import { useRoomContext } from '@livekit/components-react'
+import {
+  usePersistentUserChoices,
+  useRoomContext,
+} from '@livekit/components-react'
 import { logoutUrl, useUser } from '@/features/auth'
 import { css } from '@/styled-system/css'
 import { TabPanel, TabPanelProps } from '@/primitives/Tabs'
 import { HStack } from '@/styled-system/jsx'
 import { useState } from 'react'
 import { ProConnectButton } from '@/components/ProConnectButton'
-import { usePersistentUserChoices } from '@/features/rooms/livekit/hooks/usePersistentUserChoices'
 
 export type AccountTabProps = Pick<DialogProps, 'onOpenChange'> &
   Pick<TabPanelProps, 'id'>

src/frontend/src/layout/Footer.tsx

@@ -242,7 +242,7 @@ export const Footer = () => {
               {t('links.data')}
             </A>
           </StyledLi>
-          <StyledLi divider>
+          <StyledLi>
             <A
               externalIcon
               underline={false}
@@ -255,17 +255,6 @@ export const Footer = () => {
               {t('links.accessibility')}
             </A>
           </StyledLi>
-          <StyledLi>
-            <A
-              externalIcon
-              underline={false}
-              footer="minor"
-              href="https://github.com/numerique-gouv/meet/"
-              aria-label={t('links.code') + ' - ' + t('links.ariaLabel')}
-            >
-              {t('links.code')}
-            </A>
-          </StyledLi>
         </SecondRow>
         <ThirdRow>
           {t('mentions')}{' '}

src/frontend/src/locales/de/global.json

@@ -34,8 +34,7 @@
       "legalsTerms": "",
       "data": "",
       "accessibility": "",
-      "ariaLabel": "",
-      "code": ""
+      "ariaLabel": ""
     },
     "mentions": "",
     "license": ""

src/frontend/src/locales/de/rooms.json

@@ -19,11 +19,6 @@
       "label": ""
     },
     "heading": "",
-    "effects": {
-      "description": "",
-      "title": "",
-      "subTitle": ""
-    },
     "joinLabel": "",
     "joinMeeting": "",
     "toggleOff": "",
@@ -107,17 +102,11 @@
     "notAvailable": "",
     "heading": "",
     "blur": {
-      "title": "",
       "light": "",
       "normal": "",
       "apply": "",
       "clear": ""
     },
-    "virtual": {
-      "title": "",
-      "apply": "",
-      "clear": ""
-    },
     "experimental": ""
   },
   "sidePanel": {

src/frontend/src/locales/en/global.json

@@ -34,8 +34,7 @@
       "legalsTerms": "Legal Notice",
       "data": "Personal Data and Cookies",
       "accessibility": "Accessibility: audit in progress",
-      "ariaLabel": "new window",
-      "code": "Open Source Code Repository"
+      "ariaLabel": "new window"
     },
     "mentions": "Unless otherwise stated, the contents of this site are available under",
     "license": "etalab 2.0 license"

src/frontend/src/locales/en/rooms.json

@@ -18,11 +18,6 @@
       "enable": "Enable microphone",
       "label": "Microphone"
     },
-    "effects": {
-      "description": "Apply effects",
-      "title": "Effects",
-      "subTitle": "Configure your camera's effects."
-    },
     "heading": "Join the meeting",
     "joinLabel": "Join",
     "joinMeeting": "Join meeting",
@@ -103,20 +98,14 @@
   },
   "effects": {
     "activateCamera": "Your camera is disabled. Choose an option to enable it.",
-    "notAvailable": "Video effects will be available soon on your browser. We're working on it! In the meantime, you can use Google Chrome for best performance or Firefox :(",
+    "notAvailable": "The blur effect will be available soon on your browser. We're working on it! In the meantime, you can use Google Chrome for best performance or Firefox :(",
     "heading": "Blur",
     "blur": {
-      "title": "Background blur",
       "light": "Light blur",
       "normal": "Blur",
       "apply": "Enable blur",
       "clear": "Disable blur"
     },
-    "virtual": {
-      "title": "Virtual background",
-      "apply": "Enable virtual background",
-      "clear": "Disable virtual background"
-    },
     "experimental": "Experimental feature. A v2 is coming for full browser support and improved quality."
   },
   "sidePanel": {

src/frontend/src/locales/fr/global.json

@@ -34,8 +34,7 @@
       "legalsTerms": "Mentions légales",
       "data": "Données personnelles et cookie",
       "accessibility": "Accessibilités : audit en cours",
-      "ariaLabel": "nouvelle fenêtre",
-      "code": "Dépôt de code Open Source"
+      "ariaLabel": "nouvelle fenêtre"
     },
     "mentions": "Sauf mention contraire, les contenus de ce site sont disponibles sous",
     "license": "licence etalab 2.0"

src/frontend/src/locales/fr/rooms.json

@@ -19,11 +19,6 @@
       "label": "Microphone"
     },
     "heading": "Rejoindre la réunion",
-    "effects": {
-      "description": "Appliquer des effets",
-      "title": "Effets",
-      "subTitle": "Paramétrez les effets de votre caméra."
-    },
     "joinLabel": "Rejoindre",
     "joinMeeting": "Rejoindre la réjoindre",
     "toggleOff": "Cliquez pour désactiver",
@@ -103,20 +98,14 @@
   },
   "effects": {
     "activateCamera": "Votre camera est désactivée. Choisissez une option pour l'activer.",
-    "notAvailable": "Les effets vidéo seront bientôt disponible sur votre navigateur. Nous y travaillons ! En attendant, vous pouvez utiliser Google Chrome pour une meilleure performance ou Firefox :(",
+    "notAvailable": "L'effet de flou sera bientôt disponible sur votre navigateur. Nous y travaillons ! En attendant, vous pouvez utiliser Google Chrome pour une meilleure performance ou Firefox :(",
     "heading": "Flou",
     "blur": {
-      "title": "Flou d'arrière-plan",
       "light": "Léger flou",
       "normal": "Flou",
       "apply": "Appliquer le flou",
       "clear": "Désactiver le flou"
     },
-    "virtual": {
-      "title": "Arrière-plan virtuel",
-      "apply": "Appliquer l'arrière plan virtuel",
-      "clear": "Désactiver l'arrière plan virtuel"
-    },
     "experimental": "Fonctionnalité expérimentale. Une v2 arrive pour un support complet sur tous les navigateurs et une meilleur qualité."
   },
   "sidePanel": {

src/frontend/src/locales/fr/sdk.json

@@ -0,0 +1,5 @@
+{
+  "createButton": {
+    "label": "Créer un lien Visio"
+  }
+}

src/frontend/src/primitives/Button.tsx

@@ -6,12 +6,15 @@ import { type RecipeVariantProps } from '@/styled-system/css'
 import { buttonRecipe, type ButtonRecipe } from './buttonRecipe'
 import { TooltipWrapper, type TooltipWrapperProps } from './TooltipWrapper'
 import { ReactNode } from 'react'
+import { Loader } from './Loader'
 
 export type ButtonProps = RecipeVariantProps<ButtonRecipe> &
   RACButtonsProps &
   TooltipWrapperProps & {
     // Use tooltip as description below the button.
     description?: boolean
+  } & {
+    icon?: ReactNode
   }
 
 export const Button = ({
@@ -20,13 +23,16 @@ export const Button = ({
   ...props
 }: ButtonProps) => {
   const [variantProps, componentProps] = buttonRecipe.splitVariantProps(props)
+  const { className, ...remainingComponentProps } = componentProps
 
   return (
     <TooltipWrapper tooltip={tooltip} tooltipType={tooltipType}>
       <RACButton
-        className={buttonRecipe(variantProps)}
-        {...(componentProps as RACButtonsProps)}
+        className={[buttonRecipe(variantProps), className].join(' ')}
+        {...(remainingComponentProps as RACButtonsProps)}
       >
+        {!props.loading && props.icon}
+        {props.loading && <Loader />}
         {componentProps.children as ReactNode}
         {props.description && <span>{tooltip}</span>}
       </RACButton>

src/frontend/src/primitives/Dialog.tsx

@@ -11,7 +11,6 @@ import {
 import { Div, Button, Box, VerticallyOffCenter } from '@/primitives'
 import { text } from './Text'
 import { MutableRefObject } from 'react'
-import { css } from '@/styled-system/css'
 
 const StyledModalOverlay = styled(ModalOverlay, {
   base: {
@@ -49,24 +48,6 @@ const StyledRACDialog = styled(RACDialog, {
   },
 })
 
-const ModalContent = styled('div', {
-  base: {
-    margin: 'auto',
-  },
-  variants: {
-    size: {
-      full: {
-        width: 'fit-content',
-        maxWidth: '100%',
-      },
-      large: {
-        width: '100%',
-        xl: { width: '1200px' },
-      },
-    },
-  },
-})
-
 export type DialogProps = RACDialogProps & {
   title?: string
   onClose?: () => void
@@ -82,7 +63,6 @@ export type DialogProps = RACDialogProps & {
   onOpenChange?: (isOpen: boolean) => void
   type?: 'flex'
   innerRef?: MutableRefObject<HTMLDivElement | null>
-  size?: 'full' | 'large'
 }
 
 export const Dialog = ({
@@ -92,7 +72,6 @@ export const Dialog = ({
   isOpen,
   onOpenChange,
   innerRef,
-  size = 'full',
   ...dialogProps
 }: DialogProps) => {
   const isAlert = dialogProps['role'] === 'alertdialog'
@@ -115,16 +94,9 @@ export const Dialog = ({
         <StyledRACDialog {...dialogProps}>
           {({ close }) => (
             <VerticallyOffCenter>
-              <ModalContent size={size}>
+              <Div margin="auto" width="fit-content" maxWidth="full">
                 <Div margin="1rem" pointerEvents="auto">
-                  <Box
-                    size="sm"
-                    type={boxType}
-                    ref={innerRef}
-                    className={css({
-                      padding: '1.5rem',
-                    })}
-                  >
+                  <Box size="sm" type={boxType} ref={innerRef}>
                     {!!title && (
                       <Heading
                         slot="title"
@@ -152,7 +124,7 @@ export const Dialog = ({
                     )}
                   </Box>
                 </Div>
-              </ModalContent>
+              </Div>
             </VerticallyOffCenter>
           )}
         </StyledRACDialog>

src/frontend/src/primitives/Loader.tsx

@@ -0,0 +1,45 @@
+import { cva } from '@/styled-system/css'
+
+const loader = cva({
+  base: {
+    borderRadius: '50%',
+    position: 'relative',
+    animation: 'rotate 1s linear infinite',
+    '&:before, &:after': {
+      content: '""',
+      boxSizing: 'border-box',
+      position: 'absolute',
+      inset: '0',
+      borderRadius: '50%',
+      borderStyle: 'solid',
+      borderColor: 'white',
+    },
+    _before: {
+      animation: 'prixClipFix 2s linear infinite',
+    },
+    _after: {
+      borderColor: 'white',
+      animation:
+        'prixClipFix 2s linear infinite, rotate 0.5s linear infinite reverse',
+      inset: 6,
+    },
+  },
+  variants: {
+    size: {
+      small: {
+        width: '24px',
+        height: '24px',
+        '&:before, &:after': {
+          borderWidth: '2px',
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    size: 'small',
+  },
+})
+
+export const Loader = () => {
+  return <div className={loader()}></div>
+}

src/frontend/src/primitives/Text.tsx

@@ -28,14 +28,6 @@ export const text = cva({
           paddingTop: 'heading',
         },
       },
-      subTitle: {
-        fontSize: '1rem',
-        color: 'greyscale.600',
-      },
-      bodyXsBold: {
-        textStyle: 'body',
-        fontWeight: 'bold',
-      },
       body: {
         textStyle: 'body',
       },

src/frontend/src/primitives/ToggleButton.tsx

@@ -27,7 +27,7 @@ export const ToggleButton = ({
     <TooltipWrapper tooltip={tooltip} tooltipType={tooltipType}>
       <RACToggleButton
         {...componentProps}
-        className={[buttonRecipe(variantProps), props.className].join(' ')}
+        className={buttonRecipe(variantProps)}
       >
         <>
           {componentProps.children as ReactNode}

src/frontend/src/primitives/buttonRecipe.ts

@@ -8,6 +8,7 @@ export const buttonRecipe = cva({
     transition: 'background 200ms, outline 200ms, border-color 200ms',
     cursor: 'pointer',
     border: '1px solid transparent',
+    gap: '0.5rem',
   },
   variants: {
     size: {
@@ -73,35 +74,6 @@ export const buttonRecipe = cva({
           color: 'greyscale.400',
         },
       },
-      whiteCircle: {
-        color: 'white',
-        border: '1px white solid',
-        width: '56px',
-        height: '56px',
-        borderRadius: '100%',
-        '&[data-hovered]': {
-          backgroundColor: 'greyscale.100/20',
-        },
-        '&[data-pressed]': {
-          backgroundColor: 'greyscale.100/50',
-        },
-      },
-      bigSquare: {
-        width: '56px',
-        height: '56px',
-        borderColor: 'greyscale.200',
-        borderRadius: '4px',
-        backgroundColor: 'greyscale.50',
-        padding: '0',
-        flexShrink: 0,
-        '&[data-hovered]': {
-          backgroundColor: 'greyscale.100',
-        },
-        transition: 'box-shadow 0.2s ease-in-out',
-        '&[data-selected]': {
-          boxShadow: 'token(colors.primary.400) 0px 0px 0px 3px inset',
-        },
-      },
       tertiary: {
         backgroundColor: 'primary.100',
         color: 'primary.800',
@@ -168,6 +140,18 @@ export const buttonRecipe = cva({
           color: 'primaryDark.100',
         },
       },
+      quaternaryText: {
+        backgroundColor: 'transparent',
+        color: 'greyscale.600',
+        '&[data-hovered]': {
+          backgroundColor: 'greyscale.100',
+          color: 'greyscale.700',
+        },
+        '&[data-pressed]': {
+          backgroundColor: 'greyscale.100',
+          color: 'greyscale.700',
+        },
+      },
       greyscale: {
         backgroundColor: 'transparent',
         color: 'greyscale.400',
@@ -258,6 +242,9 @@ export const buttonRecipe = cva({
         width: 'full',
       },
     },
+    loading: {
+      true: {},
+    },
     // some toggle buttons make more sense without a "pushed button" style when selected because their content changes to mark the state
     shySelected: {
       true: {},

src/frontend/src/routes.ts

@@ -2,7 +2,7 @@ import { FeedbackRoute, RoomRoute, roomIdPattern } from '@/features/rooms'
 import { HomeRoute } from '@/features/home'
 
 export const routes: Record<
-  'home' | 'room' | 'feedback',
+  'home' | 'room' | 'feedback' | 'sdkCreateButton',
   {
     name: RouteName
     path: RegExp | string

src/frontend/src/styles/index.css

@@ -38,3 +38,34 @@ body:has(.lk-video-conference) #crisp-chatbox > div > a {
     transform: translateY(0);
   }
 }
+
+/**
+ * Loader animations.
+ */
+
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes prixClipFix {
+  0% {
+    clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
+  }
+  25% {
+    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
+  }
+  50% {
+    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
+  }
+  75% {
+    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
+  }
+  100% {
+    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
+  }
+}

src/sdk/consumer/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

src/sdk/consumer/README.md

@@ -0,0 +1,50 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default tseslint.config({
+  languageOptions: {
+    // other options...
+    parserOptions: {
+      project: ['./tsconfig.node.json', './tsconfig.app.json'],
+      tsconfigRootDir: import.meta.dirname,
+    },
+  },
+})
+```
+
+- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
+- Optionally add `...tseslint.configs.stylisticTypeChecked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
+
+```js
+// eslint.config.js
+import react from 'eslint-plugin-react'
+
+export default tseslint.config({
+  // Set the react version
+  settings: { react: { version: '18.3' } },
+  plugins: {
+    // Add the react plugin
+    react,
+  },
+  rules: {
+    // other rules...
+    // Enable its recommended rules
+    ...react.configs.recommended.rules,
+    ...react.configs['jsx-runtime'].rules,
+  },
+})
+```

src/sdk/consumer/eslint.config.js

@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)

src/sdk/consumer/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Visio SDK Demo</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

src/sdk/consumer/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "consumer",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "9.17.0",
+    "@types/react": "18.3.12",
+    "@types/react-dom": "18.3.1",
+    "@vitejs/plugin-react": "4.3.4",
+    "eslint": "8.57.0",
+    "eslint-plugin-react-hooks": "5.1.0",
+    "eslint-plugin-react-refresh": "0.4.18",
+    "globals": "15.14.0",
+    "typescript": "5.7.3",
+    "typescript-eslint": "8.18.2",
+    "vite": "6.0.11"
+  }
+}

src/sdk/consumer/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

src/sdk/consumer/src/App.css

@@ -0,0 +1,5 @@
+#root {
+  margin: 0 auto;
+
+  text-align: center;
+}

src/sdk/consumer/src/App.tsx

@@ -0,0 +1,42 @@
+import { VisioCreateButton } from "@gouvfr-lasuite/visio-sdk";
+import "./App.css";
+import { useState } from "react";
+
+function App() {
+  const [roomUrl, setRoomUrl] = useState("");
+
+  return (
+    <form className="form">
+      <div className="header">
+        <h2>Create event</h2>
+        <span>Visio demo app</span>
+      </div>
+      <div className="group">
+        <label>Subject</label>
+        <input type="text" />
+      </div>
+      <div className="group">
+        <label>Place</label>
+        <input type="text" />
+      </div>
+      <div className="group">
+        <label>Visioconference</label>
+        <VisioCreateButton onRoomCreated={setRoomUrl} />
+      </div>
+      <div className="group">
+        <label>Description</label>
+        <textarea />
+      </div>
+      <button
+        type="button"
+        onClick={() => {
+          alert("Room url: " + roomUrl);
+        }}
+      >
+        Create
+      </button>
+    </form>
+  );
+}
+
+export default App;

src/sdk/consumer/src/index.css

@@ -0,0 +1,74 @@
+* {
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  box-sizing: border-box;
+  color: rgb(9, 9, 11);
+}
+
+body {
+  background-color: oklch(0.985 0 0);
+  display: flex;
+  justify-content: center;
+  padding-top: 2rem;
+}
+
+h2 {
+  margin: 0;
+}
+
+span {
+  font-size: 14px;
+  color: oklch(0.372 0.044 257.287);
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  width: 500px;
+  gap: 1rem;
+  border: 1px solid #e5e7eb;
+  background-color: white;
+  border-radius: 1rem;
+  padding: 3rem;
+}
+
+.header {
+  margin-bottom: 2rem;
+}
+
+.group {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.5rem;
+}
+
+label {
+  color: rgb(9, 9, 11);
+  font-weight: 500;
+  font-size: 14px;
+}
+
+input,
+textarea {
+  border: 1px rgb(228, 228, 231) solid;
+  border-radius: 6px;
+  height: 36px;
+  width: 100%;
+  padding: 0.75rem;
+}
+
+textarea {
+  height: 200px;
+}
+
+button {
+  background-color: rgb(45, 45, 70);
+  color: white;
+  height: 46px;
+  border-radius: 4px;
+  font-size: 16px;
+  font-weight: 300;
+  cursor: pointer;
+}

src/sdk/consumer/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

src/sdk/consumer/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

src/sdk/consumer/tsconfig.app.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

src/sdk/consumer/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

src/sdk/consumer/tsconfig.node.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

src/sdk/consumer/vite.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})

src/sdk/library/.changeset/README.md

@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

src/sdk/library/.changeset/config.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://unpkg.com/@changesets/config@3.0.5/schema.json",
+  "changelog": "@changesets/cli/changelog",
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "restricted",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}

src/sdk/library/.env.production

@@ -0,0 +1 @@
+VITE_VISIO_SDK_URL=https://visio.numerique.gouv.fr/sdk

src/sdk/library/.eslintrc.cjs

@@ -0,0 +1,21 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:@tanstack/eslint-plugin-query/recommended",
+    "plugin:jsx-a11y/recommended",
+    "prettier",
+  ],
+  ignorePatterns: ["dist", ".eslintrc.cjs", "styled-system"],
+  parser: "@typescript-eslint/parser",
+  plugins: ["react-refresh"],
+  rules: {
+    "react-refresh/only-export-components": [
+      "warn",
+      { allowConstantExport: true },
+    ],
+  },
+};

src/sdk/library/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

src/sdk/library/.prettierrc

@@ -0,0 +1,5 @@
+{
+  "semi": false,
+  "trailingComma": "es5",
+  "singleQuote": true
+}

src/sdk/library/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @gouvfr-lasuite/visio-sdk
+
+## 0.0.1
+
+### Major Changes
+
+- Create library with VisioCreateButton

src/sdk/library/CONTRIBUTING.md

@@ -0,0 +1,17 @@
+# Contributing
+
+## Release
+
+1. Run `npm run build`
+
+2. Update CHANGELOG.md according to the Major / Minor / Patch semver convention.
+
+3. Based on semver upgrade the package version in `package.json`.
+
+4. Commit the changes and create a PR named "🔖(release) version packages".
+
+5. Run `npx @changesets/cli publish`. It will publish the new version of the package to NPM and create a git tag.
+
+6. Run `git push origin tag @gouvfr-lasuite/visio-sdk@<VERSION>`
+
+7. Tell everyone 🎉 !

src/sdk/library/README.md

@@ -0,0 +1,30 @@
+<div align="center">
+
+# 🎥 Visio SDK
+
+**Easily open a widget to browse user files on any of your project**
+
+<img src="docs/demo.gif" alt="" />
+
+**As simple as**
+
+</div>
+
+```ts
+import { VisioCreateButton } from "@gouvfr-lasuite/visio-sdk";
+
+function App() {
+  const [roomUrl, setRoomUrl] = useState();
+
+  return <VisioCreateButton onRoomCreated={setRoomUrl} />;
+}
+```
+
+## Installation
+
+To install, you can use npm or yarn:
+
+```
+$ npm install --save @gouvfr-lasuite/visio-sdk
+$ yarn add @gouvfr-lasuite/visio-sdk
+```

src/sdk/library/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@gouvfr-lasuite/visio-sdk",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "version": "0.0.1",
+  "type": "module",
+  "main": "./dist/visio-sdk.umd.cjs",
+  "module": "./dist/visio-sdk.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/visio-sdk.js",
+      "require": "./dist/visio-sdk.umd.cjs"
+    }
+  },
+  "files": [
+    "dist/"
+  ],
+  "scripts": {
+    "dev": "vite build -w --mode development",
+    "build": "tsc -b && vite build",
+    "lint": "eslint . --ext ts,tsx",
+    "format": "prettier --write ./src",
+    "check": "prettier --check ./src"
+  },
+  "dependencies": {
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
+  },
+  "devDependencies": {
+    "@tanstack/eslint-plugin-query": "5.64.2",
+    "@types/node": "20.14.2",
+    "@types/react": "18.3.3",
+    "@types/react-dom": "18.3.0",
+    "@typescript-eslint/eslint-plugin": "7.15.0",
+    "@typescript-eslint/parser": "7.15.0",
+    "@vitejs/plugin-react-swc": "3.5.0",
+    "eslint": "8.57.0",
+    "eslint-config-prettier": "10.0.1",
+    "eslint-plugin-react-hooks": "4.6.2",
+    "eslint-plugin-react-refresh": "0.4.7",
+    "eslint-plugin-jsx-a11y": "6.10.2",
+    "sass": "1.83.4",
+    "prettier": "3.4.2",
+    "typescript": "5.4.5",
+    "vite": "5.3.4",
+    "vite-plugin-dts": "3.9.1"
+  }
+}

src/sdk/library/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

src/sdk/library/src/Config.ts

@@ -0,0 +1,3 @@
+export const DEFAULT_CONFIG = {
+  url: import.meta.env.VITE_VISIO_SDK_URL,
+}

src/sdk/library/src/Types.ts

@@ -0,0 +1,7 @@
+import { DEFAULT_CONFIG } from '@/Config'
+
+export type ConfigType = typeof DEFAULT_CONFIG
+
+export enum ClientMessageType {
+  ROOM_CREATED = 'ROOM_CREATED',
+}

src/sdk/library/src/create/VisioCreateButton.tsx

@@ -0,0 +1,41 @@
+import { DEFAULT_CONFIG } from '@/Config'
+import { ClientMessageType } from '@/Types'
+import { useEffect } from 'react'
+
+export const VisioCreateButton = ({
+  onRoomCreated,
+}: {
+  onRoomCreated: (roomUrl: string) => void
+}) => {
+  useEffect(() => {
+    const onMessage = (event: MessageEvent) => {
+      // Make sure it is the correct origin.
+      if (event.origin !== new URL(DEFAULT_CONFIG.url).origin) {
+        return
+      }
+      if (event.data.type === ClientMessageType.ROOM_CREATED) {
+        const data = event.data.data
+        const roomUrl = data.url
+        onRoomCreated(roomUrl)
+      }
+    }
+
+    window.addEventListener('message', onMessage)
+    return () => {
+      window.removeEventListener('message', onMessage)
+    }
+  }, [onRoomCreated])
+
+  return (
+    // eslint-disable-next-line jsx-a11y/iframe-has-title
+    <iframe
+      allow="clipboard-read; clipboard-write"
+      src={DEFAULT_CONFIG.url + '/create-button'}
+      style={{
+        width: '100%',
+        height: '52px',
+        border: 'none',
+      }}
+    ></iframe>
+  )
+}

src/sdk/library/src/index.tsx

@@ -0,0 +1,3 @@
+/* eslint-disable react-refresh/only-export-components */
+export * from '@/Types'
+export * from '@/create/VisioCreateButton'

src/sdk/library/src/vite-env.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_VISIO_SDK_URL: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}

src/sdk/library/tsconfig.app.json

@@ -0,0 +1,36 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable", "WebWorker"],
+    "module": "esnext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": false,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+
+    /* Local */
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+
+    "baseUrl": "./src",
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["src"]
+}

src/sdk/library/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}

src/sdk/library/tsconfig.node.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "noEmit": true
+  },
+  "include": ["vite.config.ts"]
+}

src/sdk/library/vite.config.ts

@@ -0,0 +1,35 @@
+import path, { resolve } from "path";
+
+import react from "@vitejs/plugin-react-swc";
+import { AliasOptions, defineConfig } from "vite";
+import dts from "vite-plugin-dts";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    react(),
+    dts({ tsconfigPath: "./tsconfig.app.json", rollupTypes: true }),
+  ],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "src"),
+    } as AliasOptions,
+  },
+  build: {
+    lib: {
+      entry: resolve(__dirname, "src/index.tsx"),
+      name: "visio-sdk",
+      fileName: "visio-sdk",
+    },
+    rollupOptions: {
+      external: ["react", "react-dom"],
+      output: {
+        globals: {
+          react: "React",
+          "react-dom": "ReactDOM",
+        },
+      },
+    },
+    copyPublicDir: false,
+  },
+});

src/sdk/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "sdk",
+  "version": "0.0.0",
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "workspaces": [
+    "./library",
+    "./consumer"
+  ]
+}