From ba20fbe3a5772cb8c16a5d791efb1e297fb6b8b8 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Wed, 16 Apr 2025 18:31:08 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8(frontend)=20add=20beta=20tags=20to?=
 =?UTF-8?q?=20transcript=20and=20screen=20recording=20features?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add explicit beta tags to transcript and screen recording functionality to
clearly indicate these features are still in development. Helps set proper
user expectations by communicating that these capabilities may be unstable.
---
 .../rooms/livekit/components/Tools.tsx        | 23 +++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/src/frontend/src/features/rooms/livekit/components/Tools.tsx b/src/frontend/src/features/rooms/livekit/components/Tools.tsx
index 2537545d..194e5fb6 100644
--- a/src/frontend/src/features/rooms/livekit/components/Tools.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/Tools.tsx
@@ -22,6 +22,7 @@ export interface ToolsButtonProps {
   title: string
   description: string
   onPress: () => void
+  isBetaFeature?: boolean
 }
 
 const ToolButton = ({
@@ -29,6 +30,7 @@ const ToolButton = ({
   title,
   description,
   onPress,
+  isBetaFeature = false,
 }: ToolsButtonProps) => {
   return (
     <RACButton
@@ -59,9 +61,28 @@ const ToolButton = ({
           display: 'flex',
           justifyContent: 'center',
           alignItems: 'center',
+          position: 'relative',
         })}
       >
         {icon}
+        {isBetaFeature && (
+          <div
+            className={css({
+              position: 'absolute',
+              backgroundColor: 'primary.50',
+              color: 'primary.800',
+              fontSize: '12px',
+              fontWeight: 500,
+              borderRadius: '4px',
+              paddingX: '4px',
+              paddingBottom: '1px',
+              bottom: -8,
+              right: -8,
+            })}
+          >
+            BETA
+          </div>
+        )}
       </div>
       <div>
         <Text margin={false} as="h3">
@@ -127,6 +148,7 @@ export const Tools = () => {
           title={t('tools.transcript.title')}
           description={t('tools.transcript.body')}
           onPress={() => openTranscript()}
+          isBetaFeature
         />
       )}
       {hasScreenRecordingAccess && (
@@ -135,6 +157,7 @@ export const Tools = () => {
           title={t('tools.screenRecording.title')}
           description={t('tools.screenRecording.body')}
           onPress={() => openScreenRecording()}
+          isBetaFeature
         />
       )}
     </Div>