From 85027d3e3a1d35e4f5efc4fa65e89729358ae925 Mon Sep 17 00:00:00 2001
From: Joris Kalz <joris@kalz.de>
Date: Wed, 20 Dec 2023 21:46:19 +0100
Subject: [PATCH 01/11] Added Persona from Text

---
 src/apps/personas/YTPersonaCreator.tsx | 84 ++++++++++++++++----------
 1 file changed, 52 insertions(+), 32 deletions(-)

diff --git a/src/apps/personas/YTPersonaCreator.tsx b/src/apps/personas/YTPersonaCreator.tsx
index 272906df3..90d5ab32a 100644
--- a/src/apps/personas/YTPersonaCreator.tsx
+++ b/src/apps/personas/YTPersonaCreator.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { Alert, Box, Button, Card, CardContent, CircularProgress, Grid, IconButton, Input, LinearProgress, Tooltip, Typography } from '@mui/joy';
+import { Alert, Box, Button, Card, CardContent, CircularProgress, Grid, IconButton, Input, LinearProgress, Tooltip, Typography, Tabs, TabList, Tab, TabPanel } from '@mui/joy';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import WhatshotIcon from '@mui/icons-material/Whatshot';
 import YouTubeIcon from '@mui/icons-material/YouTube';
@@ -67,6 +67,7 @@ export function YTPersonaCreator() {
   const [videoURL, setVideoURL] = React.useState('');
   const [videoID, setVideoID] = React.useState('');
   const [personaTranscript, setPersonaTranscript] = React.useState<string | null>(null);
+  const [personaText, setPersonaText] = React.useState('');
 
   // external state
   const [diagramLlm, llmComponent] = useFormRadioLlmType();
@@ -93,41 +94,60 @@ export function YTPersonaCreator() {
     }
   };
 
+  // New handler for persona text change
+  const handlePersonaTextChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setPersonaText(e.target.value);
+  };
+
   return <>
 
-    <Box sx={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 1 }}>
-      <YouTubeIcon sx={{ color: '#f00' }} />
-      <Typography level='title-lg'>
-        YouTube -&gt; AI persona
-      </Typography>
-    </Box>
-
-    <form onSubmit={handleFetchTranscript}>
-      <Box sx={{ display: 'flex', flexDirection: 'row', gap: 2 }}>
-        <Input
-          required
-          type='url'
-          fullWidth
-          variant='outlined'
-          placeholder='YouTube Video URL'
-          value={videoURL} onChange={handleVideoIdChange}
-          endDecorator={
-            <IconButton
-              variant='outlined' color='neutral'
-              onClick={() => setVideoURL('https://www.youtube.com/watch?v=M_wZpSEvOkc')}
-            >
-              <WhatshotIcon />
-            </IconButton>
-          }
-        />
-        <Button
-          type='submit'
-          variant='solid' disabled={isFetching || isTransforming} loading={isFetching}
-          sx={{ minWidth: 120 }}>
+    <Typography level='title-sm' mb={4}>
+          AI Persona from YouTube or text
+    </Typography>
+    <Tabs defaultValue={0}>
+      <TabList>
+        <Tab>From YouTube Video</Tab>
+        <Tab>From Text</Tab>
+      </TabList>
+      <TabPanel value={0}>
+      <Box sx={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 1 }}>
+          <YouTubeIcon sx={{ color: '#f00' }} />
+          <Typography level="title-lg">YouTube -&gt; AI persona</Typography>
+        </Box>
+
+        <form onSubmit={handleFetchTranscript}>
+          <Box sx={{ display: 'flex', flexDirection: 'row', gap: 2 }}>
+            <Input
+              required
+              type="url"
+              fullWidth
+              variant="outlined"
+              placeholder="YouTube Video URL"
+              value={videoURL}
+              onChange={handleVideoIdChange}
+              endDecorator={
+                <IconButton variant="outlined" color="neutral" onClick={() => setVideoURL('https://www.youtube.com/watch?v=M_wZpSEvOkc')}>
+                  <WhatshotIcon />
+                </IconButton>
+              }
+            />
+            <Button type="submit" variant="solid" disabled={isFetching || isTransforming || !videoURL  } loading={isFetching} sx={{ minWidth: 120 }}>
+              Create
+            </Button>
+          </Box>
+        </form>
+      </TabPanel>
+      <TabPanel value={1}>
+        {/* New text area for users to paste copied text */}
+        <Typography level="title-md" sx={{ mb: 1 }}>
+          Paste your text here
+        </Typography>
+        <textarea placeholder="Paste your text here..." value={personaText} onChange={handlePersonaTextChange} style={{ width: '100%', minHeight: '100px' }} />
+        <Button variant="solid" disabled={isFetching || isTransforming || !personaText} onClick={() => setPersonaTranscript(personaText)} sx={{ mt: 1, mb: 2 }}>
           Create
         </Button>
-      </Box>
-    </form>
+      </TabPanel>
+    </Tabs>
 
     {/* LLM selector (chat vs fast) */}
     {!isTransforming && !isFinished && llmComponent}

From 44da92848908778ca308c84709f20bb302fb5eee Mon Sep 17 00:00:00 2001
From: Joris Kalz <joris@kalz.de>
Date: Wed, 20 Dec 2023 21:54:46 +0100
Subject: [PATCH 02/11] Optimzed text to cover both use cases

---
 .../chat/components/persona-selector/PersonaSelector.tsx  | 4 ++--
 src/apps/personas/YTPersonaCreator.tsx                    | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/apps/chat/components/persona-selector/PersonaSelector.tsx b/src/apps/chat/components/persona-selector/PersonaSelector.tsx
index 523e0cf8c..b64ed7a98 100644
--- a/src/apps/chat/components/persona-selector/PersonaSelector.tsx
+++ b/src/apps/chat/components/persona-selector/PersonaSelector.tsx
@@ -205,8 +205,8 @@ export function PersonaSelector(props: { conversationId: DConversationId, runExa
               <div>
                 <ScienceIcon />
               </div>
-              <div>
-                YouTube persona creator
+              <div style={{ textAlign: 'center' }}>
+                Persona creator
               </div>
             </Button>
           </Grid>}
diff --git a/src/apps/personas/YTPersonaCreator.tsx b/src/apps/personas/YTPersonaCreator.tsx
index 90d5ab32a..f4de26994 100644
--- a/src/apps/personas/YTPersonaCreator.tsx
+++ b/src/apps/personas/YTPersonaCreator.tsx
@@ -39,7 +39,7 @@ function useTranscriptFromVideo(videoID: string | null) {
 
 const YouTubePersonaSteps: LLMChainStep[] = [
   {
-    name: 'Analyzing the transcript',
+    name: 'Analyzing the transcript / text',
     setSystem: 'You are skilled in analyzing and embodying diverse characters. You meticulously study transcripts to capture key attributes, draft comprehensive character sheets, and refine them for authenticity. Feel free to make assumptions without hedging, be concise and be creative.',
     addUserInput: true,
     addUser: 'Conduct comprehensive research on the provided transcript. Identify key characteristics of the speaker, including age, professional field, distinct personality traits, style of communication, narrative context, and self-awareness. Additionally, consider any unique aspects such as their use of humor, their cultural background, core values, passions, fears, personal history, and social interactions. Your output for this stage is an in-depth written analysis that exhibits an understanding of both the superficial and more profound aspects of the speaker\'s persona.',
@@ -102,7 +102,7 @@ export function YTPersonaCreator() {
   return <>
 
     <Typography level='title-sm' mb={4}>
-          AI Persona from YouTube or text
+          AI Persona from YouTube or Text
     </Typography>
     <Tabs defaultValue={0}>
       <TabList>
@@ -157,7 +157,7 @@ export function YTPersonaCreator() {
       <Card sx={{ mt: 2, boxShadow: 'md' }}>
         <CardContent>
           <Typography level='title-md' sx={{ mb: 1 }}>
-            {title || 'Transcript'}
+            {title || 'Transcript / Text'}
           </Typography>
           <Box>
             {!!thumbnailUrl && <picture><img src={thumbnailUrl} alt='YouTube Video Image' height={80} style={{ float: 'left', marginRight: 8 }} /></picture>}
@@ -185,7 +185,7 @@ export function YTPersonaCreator() {
     {/* Persona! */}
     {chainOutput && <Box sx={{ mt: 2 }}>
       <Typography level='title-lg'>
-        YouTuber Persona System Prompt
+        Persona System Prompt
       </Typography>
       <Card sx={{ boxShadow: 'md' }}>
         <CardContent sx={{

From 1c15057fca93bcc64f876da7cbf551766621c3c3 Mon Sep 17 00:00:00 2001
From: Enrico Ros <enrico.ros@gmail.com>
Date: Thu, 21 Dec 2023 02:11:33 -0800
Subject: [PATCH 03/11] Persona Creator: style: update TextArea and margins

---
 src/apps/personas/YTPersonaCreator.tsx | 87 ++++++++++++++++----------
 1 file changed, 54 insertions(+), 33 deletions(-)

diff --git a/src/apps/personas/YTPersonaCreator.tsx b/src/apps/personas/YTPersonaCreator.tsx
index f4de26994..b31a6353e 100644
--- a/src/apps/personas/YTPersonaCreator.tsx
+++ b/src/apps/personas/YTPersonaCreator.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
 
-import { Alert, Box, Button, Card, CardContent, CircularProgress, Grid, IconButton, Input, LinearProgress, Tooltip, Typography, Tabs, TabList, Tab, TabPanel } from '@mui/joy';
+import { Alert, Box, Button, Card, CardContent, CircularProgress, Grid, IconButton, Input, LinearProgress, Tab, TabList, TabPanel, Tabs, Textarea, Tooltip, Typography } from '@mui/joy';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import TextFieldsIcon from '@mui/icons-material/TextFields';
 import WhatshotIcon from '@mui/icons-material/Whatshot';
 import YouTubeIcon from '@mui/icons-material/YouTube';
 
@@ -102,48 +103,68 @@ export function YTPersonaCreator() {
   return <>
 
     <Typography level='title-sm' mb={4}>
-          AI Persona from YouTube or Text
+      Create the System Prompt of an AI Persona from YouTube or Text.
     </Typography>
-    <Tabs defaultValue={0}>
+
+    <Tabs defaultValue={0} variant='outlined'>
       <TabList>
         <Tab>From YouTube Video</Tab>
         <Tab>From Text</Tab>
       </TabList>
-      <TabPanel value={0}>
-      <Box sx={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 1 }}>
-          <YouTubeIcon sx={{ color: '#f00' }} />
-          <Typography level="title-lg">YouTube -&gt; AI persona</Typography>
-        </Box>
+
+      {/* YouTube URL inputs */}
+      <TabPanel value={0} sx={{ p: 2 }}>
+
+        <Typography level='title-md' startDecorator={<YouTubeIcon sx={{ color: '#f00' }} />} sx={{ mb: 2 }}>
+          YouTube -&gt; Persona
+        </Typography>
 
         <form onSubmit={handleFetchTranscript}>
-          <Box sx={{ display: 'flex', flexDirection: 'row', gap: 2 }}>
-            <Input
-              required
-              type="url"
-              fullWidth
-              variant="outlined"
-              placeholder="YouTube Video URL"
-              value={videoURL}
-              onChange={handleVideoIdChange}
-              endDecorator={
-                <IconButton variant="outlined" color="neutral" onClick={() => setVideoURL('https://www.youtube.com/watch?v=M_wZpSEvOkc')}>
-                  <WhatshotIcon />
-                </IconButton>
-              }
-            />
-            <Button type="submit" variant="solid" disabled={isFetching || isTransforming || !videoURL  } loading={isFetching} sx={{ minWidth: 120 }}>
-              Create
-            </Button>
-          </Box>
+          <Input
+            required
+            type='url'
+            fullWidth
+            variant='outlined'
+            placeholder='YouTube Video URL'
+            value={videoURL}
+            onChange={handleVideoIdChange}
+            endDecorator={
+              <IconButton variant='outlined' color='neutral' onClick={() => setVideoURL('https://www.youtube.com/watch?v=M_wZpSEvOkc')}>
+                <WhatshotIcon />
+              </IconButton>
+            }
+            sx={{ mb: 1 }}
+          />
+          <Button type='submit' variant='solid' disabled={isFetching || isTransforming || !videoURL} loading={isFetching} sx={{ minWidth: 140 }}>
+            Create
+          </Button>
         </form>
       </TabPanel>
-      <TabPanel value={1}>
-        {/* New text area for users to paste copied text */}
-        <Typography level="title-md" sx={{ mb: 1 }}>
-          Paste your text here
+
+      {/* Text area for users to paste copied text */}
+      <TabPanel value={1} sx={{ p: 2 }}>
+
+        <Typography level='title-md' startDecorator={<TextFieldsIcon />} sx={{ mb: 2 }}>
+          <b>Text</b> -&gt; Persona
         </Typography>
-        <textarea placeholder="Paste your text here..." value={personaText} onChange={handlePersonaTextChange} style={{ width: '100%', minHeight: '100px' }} />
-        <Button variant="solid" disabled={isFetching || isTransforming || !personaText} onClick={() => setPersonaTranscript(personaText)} sx={{ mt: 1, mb: 2 }}>
+
+        <Textarea
+          variant='outlined'
+          autoFocus
+          minRows={5} maxRows={10}
+          placeholder='Paste your text here...'
+          value={personaText}
+          onChange={handlePersonaTextChange}
+          sx={{
+            backgroundColor: 'background.level1',
+            '&:focus-within': {
+              backgroundColor: 'background.popup',
+            },
+            lineHeight: 1.75,
+            mb: 1,
+          }}
+        />
+        <Button variant='solid' disabled={isFetching || isTransforming || !personaText} onClick={() => setPersonaTranscript(personaText)} sx={{ minWidth: 140 }}>
           Create
         </Button>
       </TabPanel>

From 0c3e65575c86711b53278453fea28df7fe4b72c4 Mon Sep 17 00:00:00 2001
From: Enrico Ros <enrico.ros@gmail.com>
Date: Thu, 21 Dec 2023 02:12:25 -0800
Subject: [PATCH 04/11] Persona Creator: remove YT -> renamed to
 PersonaCreator.tsx

---
 src/apps/personas/AppPersonas.tsx                             | 4 ++--
 .../personas/{YTPersonaCreator.tsx => PersonaCreator.tsx}     | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)
 rename src/apps/personas/{YTPersonaCreator.tsx => PersonaCreator.tsx} (99%)

diff --git a/src/apps/personas/AppPersonas.tsx b/src/apps/personas/AppPersonas.tsx
index f0d9c5c38..4e7cc03a1 100644
--- a/src/apps/personas/AppPersonas.tsx
+++ b/src/apps/personas/AppPersonas.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import { Box, Container, ListDivider, Sheet, Typography } from '@mui/joy';
 
-import { YTPersonaCreator } from './YTPersonaCreator';
+import { PersonaCreator } from './PersonaCreator';
 import ScienceIcon from '@mui/icons-material/Science';
 
 
@@ -30,7 +30,7 @@ export function AppPersonas() {
 
         <ListDivider sx={{ my: 2 }} />
 
-        <YTPersonaCreator />
+        <PersonaCreator />
 
       </Container>
 
diff --git a/src/apps/personas/YTPersonaCreator.tsx b/src/apps/personas/PersonaCreator.tsx
similarity index 99%
rename from src/apps/personas/YTPersonaCreator.tsx
rename to src/apps/personas/PersonaCreator.tsx
index b31a6353e..12c97ed04 100644
--- a/src/apps/personas/YTPersonaCreator.tsx
+++ b/src/apps/personas/PersonaCreator.tsx
@@ -63,7 +63,7 @@ const YouTubePersonaSteps: LLMChainStep[] = [
 ];
 
 
-export function YTPersonaCreator() {
+export function PersonaCreator() {
   // state
   const [videoURL, setVideoURL] = React.useState('');
   const [videoID, setVideoID] = React.useState('');

From 2af8437f6d3cc315c2791758629174cb93629add Mon Sep 17 00:00:00 2001
From: Enrico Ros <enrico.ros@gmail.com>
Date: Thu, 21 Dec 2023 02:49:30 -0800
Subject: [PATCH 05/11] Persona Creator: reorder blocks, and show the LLM name

---
 src/apps/personas/PersonaCreator.tsx | 116 +++++++++++++++------------
 1 file changed, 65 insertions(+), 51 deletions(-)

diff --git a/src/apps/personas/PersonaCreator.tsx b/src/apps/personas/PersonaCreator.tsx
index 12c97ed04..7c10339b8 100644
--- a/src/apps/personas/PersonaCreator.tsx
+++ b/src/apps/personas/PersonaCreator.tsx
@@ -71,7 +71,7 @@ export function PersonaCreator() {
   const [personaText, setPersonaText] = React.useState('');
 
   // external state
-  const [diagramLlm, llmComponent] = useFormRadioLlmType();
+  const [personaLlm, llmComponent] = useFormRadioLlmType();
 
   // fetch transcript when the Video ID is ready, then store it
   const { transcript, thumbnailUrl, title, isFetching, isError, error: transcriptError } =
@@ -80,7 +80,7 @@ export function PersonaCreator() {
 
   // use the transformation sequence to create a persona
   const { isFinished, isTransforming, chainProgress, chainIntermediates, chainStepName, chainOutput, chainError, abortChain } =
-    useLLMChain(YouTubePersonaSteps, diagramLlm?.id, personaTranscript ?? undefined);
+    useLLMChain(YouTubePersonaSteps, personaLlm?.id, personaTranscript ?? undefined);
 
   const handleVideoIdChange = (e: React.ChangeEvent<HTMLInputElement>) => setVideoURL(e.target.value);
 
@@ -102,20 +102,20 @@ export function PersonaCreator() {
 
   return <>
 
-    <Typography level='title-sm' mb={4}>
-      Create the System Prompt of an AI Persona from YouTube or Text.
+    <Typography level='title-sm' mb={3}>
+      Create the <em>System Prompt</em> of an AI Persona from YouTube or Text.
     </Typography>
 
-    <Tabs defaultValue={0} variant='outlined'>
-      <TabList>
+    <Tabs defaultValue={0} variant='outlined' sx={{ mb: 3 }}>
+      <TabList sx={{ minHeight: 48 }}>
         <Tab>From YouTube Video</Tab>
         <Tab>From Text</Tab>
       </TabList>
 
       {/* YouTube URL inputs */}
-      <TabPanel value={0} sx={{ p: 2 }}>
+      <TabPanel value={0} sx={{ p: 3 }}>
 
-        <Typography level='title-md' startDecorator={<YouTubeIcon sx={{ color: '#f00' }} />} sx={{ mb: 2 }}>
+        <Typography level='title-md' startDecorator={<YouTubeIcon sx={{ color: '#f00' }} />} sx={{ mb: 3 }}>
           YouTube -&gt; Persona
         </Typography>
 
@@ -133,7 +133,7 @@ export function PersonaCreator() {
                 <WhatshotIcon />
               </IconButton>
             }
-            sx={{ mb: 1 }}
+            sx={{ mb: 1.5 }}
           />
           <Button type='submit' variant='solid' disabled={isFetching || isTransforming || !videoURL} loading={isFetching} sx={{ minWidth: 140 }}>
             Create
@@ -142,16 +142,15 @@ export function PersonaCreator() {
       </TabPanel>
 
       {/* Text area for users to paste copied text */}
-      <TabPanel value={1} sx={{ p: 2 }}>
+      <TabPanel value={1} sx={{ p: 3 }}>
 
-        <Typography level='title-md' startDecorator={<TextFieldsIcon />} sx={{ mb: 2 }}>
+        <Typography level='title-md' startDecorator={<TextFieldsIcon />} sx={{ mb: 3 }}>
           <b>Text</b> -&gt; Persona
         </Typography>
 
         <Textarea
           variant='outlined'
-          autoFocus
-          minRows={5} maxRows={10}
+          minRows={4} maxRows={8}
           placeholder='Paste your text here...'
           value={personaText}
           onChange={handlePersonaTextChange}
@@ -161,35 +160,21 @@ export function PersonaCreator() {
               backgroundColor: 'background.popup',
             },
             lineHeight: 1.75,
-            mb: 1,
+            mb: 1.5,
           }}
         />
-        <Button variant='solid' disabled={isFetching || isTransforming || !personaText} onClick={() => setPersonaTranscript(personaText)} sx={{ minWidth: 140 }}>
-          Create
-        </Button>
+        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+          <Button variant='solid' disabled={isFetching || isTransforming || !personaText} onClick={() => setPersonaTranscript(personaText)} sx={{ minWidth: 140 }}>
+            Create
+          </Button>
+          {!!personaText?.length && <Typography level='body-sm'>{personaText.length.toLocaleString()}</Typography>}
+        </Box>
       </TabPanel>
     </Tabs>
 
     {/* LLM selector (chat vs fast) */}
     {!isTransforming && !isFinished && llmComponent}
 
-    {/* 1. Transcript*/}
-    {personaTranscript && (
-      <Card sx={{ mt: 2, boxShadow: 'md' }}>
-        <CardContent>
-          <Typography level='title-md' sx={{ mb: 1 }}>
-            {title || 'Transcript / Text'}
-          </Typography>
-          <Box>
-            {!!thumbnailUrl && <picture><img src={thumbnailUrl} alt='YouTube Video Image' height={80} style={{ float: 'left', marginRight: 8 }} /></picture>}
-            <Typography level='body-sm'>
-              {personaTranscript.slice(0, 280)}...
-            </Typography>
-          </Box>
-        </CardContent>
-      </Card>
-    )}
-
     {/* Errors */}
     {isError && (
       <Alert color='warning' sx={{ mt: 1 }}>
@@ -202,12 +187,12 @@ export function PersonaCreator() {
       </Alert>
     )}
 
-
     {/* Persona! */}
-    {chainOutput && <Box sx={{ mt: 2 }}>
-      <Typography level='title-lg'>
+    {chainOutput && <>
+      <Typography level='title-lg' sx={{ mt: 3, mb: 1.5 }}>
         Persona System Prompt
       </Typography>
+
       <Card sx={{ boxShadow: 'md' }}>
         <CardContent sx={{
           position: 'relative',
@@ -218,7 +203,7 @@ export function PersonaCreator() {
           </Alert>
           <Tooltip title='Copy system prompt' variant='solid'>
             <IconButton
-              variant='outlined' color='neutral' onClick={() => copyToClipboard(chainOutput, 'Persona prompt')}
+              variant='soft' color='success' onClick={() => copyToClipboard(chainOutput, 'Persona prompt')}
               sx={{
                 position: 'absolute', right: 0, zIndex: 10,
                 // opacity: 0, transition: 'opacity 0.3s',
@@ -231,17 +216,39 @@ export function PersonaCreator() {
           </Typography>
         </CardContent>
       </Card>
-    </Box>}
+    </>}
+
+    {/* Input: Transcript*/}
+    {personaTranscript && <>
+      <Typography level='title-lg' sx={{ mt: 3, mb: 1.5 }}>
+        Input Data
+      </Typography>
+
+      <Card sx={{ boxShadow: 'md' }}>
+        <CardContent>
+          <Typography level='title-md' sx={{ mb: 1 }}>
+            {title || 'Transcript / Text'}
+          </Typography>
+          <Box>
+            {!!thumbnailUrl && <picture><img src={thumbnailUrl} alt='YouTube Video Image' height={80} style={{ float: 'left', marginRight: 8 }} /></picture>}
+            <Typography level='body-sm'>
+              {personaTranscript.slice(0, 280)}...
+            </Typography>
+          </Box>
+        </CardContent>
+      </Card>
+    </>}
 
     {/* Intermediate outputs rendered as cards in a grid */}
-    {chainIntermediates && chainIntermediates.length > 0 && <Box sx={{ mt: 2 }}>
-      <Typography level='title-lg'>
+    {chainIntermediates && chainIntermediates.length > 0 && <>
+      <Typography level='title-lg' sx={{ mt: 3, mb: 1.5 }}>
         {isTransforming ? 'Working...' : 'Intermediate Work'}
       </Typography>
+
       <Grid container spacing={2}>
         {chainIntermediates.map((intermediate, i) =>
           <Grid xs={12} sm={6} md={4} key={i}>
-            <Card>
+            <Card sx={{ height: '100%' }}>
               <CardContent>
                 <Typography level='title-sm' sx={{ mb: 1 }}>
                   {i + 1}. {YouTubePersonaSteps[i].name}
@@ -254,7 +261,7 @@ export function PersonaCreator() {
           </Grid>,
         )}
       </Grid>
-    </Box>}
+    </>}
 
 
     {/* Embodiment Progress */}
@@ -262,19 +269,26 @@ export function PersonaCreator() {
       <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', my: 2 }}>
         <CircularProgress color='primary' value={Math.max(10, 100 * chainProgress)} />
       </Box>
-      <Typography color='success' level='title-lg' sx={{ mt: 1 }}>
-        Embodying Persona ...
-      </Typography>
-      <Typography color='success' level='title-sm' sx={{ mt: 1, fontWeight: 600 }}>
-        {chainStepName}
-      </Typography>
-      <LinearProgress color='success' determinate value={Math.max(10, 100 * chainProgress)} sx={{ mt: 1, mb: 2 }} />
+      <Box>
+        <Typography color='success' level='title-lg'>
+          Embodying Persona ...
+        </Typography>
+        <Typography level='title-sm' sx={{ mt: 1 }}>
+          Using: {personaLlm?.label}
+        </Typography>
+      </Box>
+      <Box>
+        <Typography color='success' level='title-sm' sx={{ fontWeight: 600 }}>
+          {chainStepName}
+        </Typography>
+        <LinearProgress color='success' determinate value={Math.max(10, 100 * chainProgress)} sx={{ mt: 1.5 }} />
+      </Box>
       <Typography level='title-sm'>
         This may take 1-2 minutes. Do not close this window or the progress will be lost.
         If you experience any errors (e.g. LLM timeouts, or context overflows for larger videos)
         please try again with faster/smaller models.
       </Typography>
-      <Button variant='soft' color='neutral' onClick={abortChain} sx={{ ml: 'auto', minWidth: 100, mt: 5 }}>
+      <Button variant='soft' color='neutral' onClick={abortChain} sx={{ ml: 'auto', minWidth: 100, mt: 3 }}>
         Cancel
       </Button>
     </GoodModal>}

From d0a125fad5a017020310ceeea58a7fec2f193dd2 Mon Sep 17 00:00:00 2001
From: Enrico Ros <enrico.ros@gmail.com>
Date: Thu, 21 Dec 2023 02:51:53 -0800
Subject: [PATCH 06/11] Persona Creator: rename model selector label

---
 src/apps/personas/PersonaCreator.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/apps/personas/PersonaCreator.tsx b/src/apps/personas/PersonaCreator.tsx
index 7c10339b8..65e725add 100644
--- a/src/apps/personas/PersonaCreator.tsx
+++ b/src/apps/personas/PersonaCreator.tsx
@@ -71,7 +71,7 @@ export function PersonaCreator() {
   const [personaText, setPersonaText] = React.useState('');
 
   // external state
-  const [personaLlm, llmComponent] = useFormRadioLlmType();
+  const [personaLlm, llmComponent] = useFormRadioLlmType('Persona Creation Model');
 
   // fetch transcript when the Video ID is ready, then store it
   const { transcript, thumbnailUrl, title, isFetching, isError, error: transcriptError } =

From 75d56bfb56fd4016cad57e89df8410677897e188 Mon Sep 17 00:00:00 2001
From: Enrico Ros <enrico.ros@gmail.com>
Date: Thu, 21 Dec 2023 03:15:03 -0800
Subject: [PATCH 07/11] Persona Creator: change the 'copy' location and improve
 paddings

---
 src/apps/personas/PersonaCreator.tsx | 47 +++++++++++++---------------
 1 file changed, 21 insertions(+), 26 deletions(-)

diff --git a/src/apps/personas/PersonaCreator.tsx b/src/apps/personas/PersonaCreator.tsx
index 65e725add..df6005bca 100644
--- a/src/apps/personas/PersonaCreator.tsx
+++ b/src/apps/personas/PersonaCreator.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import { Alert, Box, Button, Card, CardContent, CircularProgress, Grid, IconButton, Input, LinearProgress, Tab, TabList, TabPanel, Tabs, Textarea, Tooltip, Typography } from '@mui/joy';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import SettingsAccessibilityIcon from '@mui/icons-material/SettingsAccessibility';
 import TextFieldsIcon from '@mui/icons-material/TextFields';
 import WhatshotIcon from '@mui/icons-material/Whatshot';
 import YouTubeIcon from '@mui/icons-material/YouTube';
@@ -106,7 +107,7 @@ export function PersonaCreator() {
       Create the <em>System Prompt</em> of an AI Persona from YouTube or Text.
     </Typography>
 
-    <Tabs defaultValue={0} variant='outlined' sx={{ mb: 3 }}>
+    <Tabs defaultValue={0} variant='outlined'>
       <TabList sx={{ minHeight: 48 }}>
         <Tab>From YouTube Video</Tab>
         <Tab>From Text</Tab>
@@ -173,7 +174,7 @@ export function PersonaCreator() {
     </Tabs>
 
     {/* LLM selector (chat vs fast) */}
-    {!isTransforming && !isFinished && llmComponent}
+    {!isTransforming && !isFinished && <Box sx={{ mt: 3 }}>{llmComponent}</Box>}
 
     {/* Errors */}
     {isError && (
@@ -189,38 +190,32 @@ export function PersonaCreator() {
 
     {/* Persona! */}
     {chainOutput && <>
-      <Typography level='title-lg' sx={{ mt: 3, mb: 1.5 }}>
-        Persona System Prompt
-      </Typography>
+      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mt: 3, mb: 0.5 }}>
+        <Typography level='title-lg' color='success' startDecorator={<SettingsAccessibilityIcon color='success' />}>
+          Persona Prompt
+        </Typography>
+        <Tooltip title='Copy system prompt' variant='solid'>
+          <Button color='success' onClick={() => copyToClipboard(chainOutput, 'Persona prompt')} endDecorator={<ContentCopyIcon />} sx={{ minWidth: 120 }}>
+            Copy
+          </Button>
+        </Tooltip>
+      </Box>
 
       <Card sx={{ boxShadow: 'md' }}>
-        <CardContent sx={{
-          position: 'relative',
-          '&:hover > button': { opacity: 1 },
-        }}>
-          <Alert variant='soft' color='success' sx={{ mb: 1 }}>
-            You can now copy the following text and use it as Custom prompt!
-          </Alert>
-          <Tooltip title='Copy system prompt' variant='solid'>
-            <IconButton
-              variant='soft' color='success' onClick={() => copyToClipboard(chainOutput, 'Persona prompt')}
-              sx={{
-                position: 'absolute', right: 0, zIndex: 10,
-                // opacity: 0, transition: 'opacity 0.3s',
-              }}>
-              <ContentCopyIcon />
-            </IconButton>
-          </Tooltip>
-          <Typography level='body-sm'>
+        <CardContent>
+          <Typography level='title-sm' sx={{ lineHeight: 1.75, mb: 1 }}>
             {chainOutput}
           </Typography>
+          <Alert variant='soft' color='success'>
+            You may copy the text above and use it as Custom prompt!
+          </Alert>
         </CardContent>
       </Card>
     </>}
 
     {/* Input: Transcript*/}
     {personaTranscript && <>
-      <Typography level='title-lg' sx={{ mt: 3, mb: 1.5 }}>
+      <Typography level='title-lg' sx={{ mt: 3, mb: 0.5 }}>
         Input Data
       </Typography>
 
@@ -241,7 +236,7 @@ export function PersonaCreator() {
 
     {/* Intermediate outputs rendered as cards in a grid */}
     {chainIntermediates && chainIntermediates.length > 0 && <>
-      <Typography level='title-lg' sx={{ mt: 3, mb: 1.5 }}>
+      <Typography level='title-lg' sx={{ mt: 3, mb: 0.5 }}>
         {isTransforming ? 'Working...' : 'Intermediate Work'}
       </Typography>
 
@@ -264,7 +259,7 @@ export function PersonaCreator() {
     </>}
 
 
-    {/* Embodiment Progress */}
+    {/* Dialog: Embodiment Progress */}
     {isTransforming && <GoodModal open>
       <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', my: 2 }}>
         <CircularProgress color='primary' value={Math.max(10, 100 * chainProgress)} />

From 35a85ed2fa1d4624bea45ad46190ce44c9b81cf5 Mon Sep 17 00:00:00 2001
From: Enrico Ros <enrico.ros@gmail.com>
Date: Thu, 21 Dec 2023 03:32:01 -0800
Subject: [PATCH 08/11] Persona Creator: final fix I swear

---
 src/apps/personas/PersonaCreator.tsx | 58 ++++++++++++++--------------
 1 file changed, 30 insertions(+), 28 deletions(-)

diff --git a/src/apps/personas/PersonaCreator.tsx b/src/apps/personas/PersonaCreator.tsx
index df6005bca..2e319bb0a 100644
--- a/src/apps/personas/PersonaCreator.tsx
+++ b/src/apps/personas/PersonaCreator.tsx
@@ -1,13 +1,13 @@
 import * as React from 'react';
 
-import { Alert, Box, Button, Card, CardContent, CircularProgress, Grid, IconButton, Input, LinearProgress, Tab, TabList, TabPanel, Tabs, Textarea, Tooltip, Typography } from '@mui/joy';
+import { Alert, Box, Button, Card, CardContent, CircularProgress, Grid, Input, LinearProgress, Tab, TabList, TabPanel, Tabs, Textarea, Typography } from '@mui/joy';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import SettingsAccessibilityIcon from '@mui/icons-material/SettingsAccessibility';
 import TextFieldsIcon from '@mui/icons-material/TextFields';
-import WhatshotIcon from '@mui/icons-material/Whatshot';
 import YouTubeIcon from '@mui/icons-material/YouTube';
 
 import { GoodModal } from '~/common/components/GoodModal';
+import { GoodTooltip } from '~/common/components/GoodTooltip';
 import { apiQuery } from '~/common/util/trpc.client';
 import { copyToClipboard } from '~/common/util/clipboardUtils';
 import { useFormRadioLlmType } from '~/common/components/forms/useFormRadioLlmType';
@@ -129,16 +129,18 @@ export function PersonaCreator() {
             placeholder='YouTube Video URL'
             value={videoURL}
             onChange={handleVideoIdChange}
-            endDecorator={
-              <IconButton variant='outlined' color='neutral' onClick={() => setVideoURL('https://www.youtube.com/watch?v=M_wZpSEvOkc')}>
-                <WhatshotIcon />
-              </IconButton>
-            }
             sx={{ mb: 1.5 }}
           />
-          <Button type='submit' variant='solid' disabled={isFetching || isTransforming || !videoURL} loading={isFetching} sx={{ minWidth: 140 }}>
-            Create
-          </Button>
+          <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+            <Button type='submit' variant='solid' disabled={isFetching || isTransforming || !videoURL} loading={isFetching} sx={{ minWidth: 140 }}>
+              Create
+            </Button>
+            <GoodTooltip title='This example comes from the popular Fireship YouTube channel, which presents technical topics with irreverent humor.'>
+              <Button variant='outlined' color='neutral' onClick={() => setVideoURL('https://www.youtube.com/watch?v=M_wZpSEvOkc')}>
+                Example
+              </Button>
+            </GoodTooltip>
+          </Box>
         </form>
       </TabPanel>
 
@@ -190,25 +192,24 @@ export function PersonaCreator() {
 
     {/* Persona! */}
     {chainOutput && <>
-      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mt: 3, mb: 0.5 }}>
-        <Typography level='title-lg' color='success' startDecorator={<SettingsAccessibilityIcon color='success' />}>
-          Persona Prompt
-        </Typography>
-        <Tooltip title='Copy system prompt' variant='solid'>
-          <Button color='success' onClick={() => copyToClipboard(chainOutput, 'Persona prompt')} endDecorator={<ContentCopyIcon />} sx={{ minWidth: 120 }}>
-            Copy
-          </Button>
-        </Tooltip>
-      </Box>
-
-      <Card sx={{ boxShadow: 'md' }}>
+      <Card sx={{ boxShadow: 'md', mt: 3 }}>
+        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+          <Typography level='title-lg' color='success' startDecorator={<SettingsAccessibilityIcon color='success' />}>
+            Persona Prompt
+          </Typography>
+          <GoodTooltip title='Copy system prompt'>
+            <Button color='success' onClick={() => copyToClipboard(chainOutput, 'Persona prompt')} endDecorator={<ContentCopyIcon />} sx={{ minWidth: 120 }}>
+              Copy
+            </Button>
+          </GoodTooltip>
+        </Box>
         <CardContent>
-          <Typography level='title-sm' sx={{ lineHeight: 1.75, mb: 1 }}>
+          <Alert variant='soft' color='success' sx={{ mb: 1 }}>
+            You may now copy the text below and use it as Custom prompt!
+          </Alert>
+          <Typography level='title-sm' sx={{ lineHeight: 1.75 }}>
             {chainOutput}
           </Typography>
-          <Alert variant='soft' color='success'>
-            You may copy the text above and use it as Custom prompt!
-          </Alert>
         </CardContent>
       </Card>
     </>}
@@ -219,7 +220,7 @@ export function PersonaCreator() {
         Input Data
       </Typography>
 
-      <Card sx={{ boxShadow: 'md' }}>
+      <Card>
         <CardContent>
           <Typography level='title-md' sx={{ mb: 1 }}>
             {title || 'Transcript / Text'}
@@ -280,7 +281,8 @@ export function PersonaCreator() {
       </Box>
       <Typography level='title-sm'>
         This may take 1-2 minutes. Do not close this window or the progress will be lost.
-        If you experience any errors (e.g. LLM timeouts, or context overflows for larger videos)
+        While larger models will produce higher quality prompts,
+        if you experience any errors (e.g. LLM timeouts, or context overflows for larger videos)
         please try again with faster/smaller models.
       </Typography>
       <Button variant='soft' color='neutral' onClick={abortChain} sx={{ ml: 'auto', minWidth: 100, mt: 3 }}>

From 87a916ba09b5276f8be90da2a88072751e72f68f Mon Sep 17 00:00:00 2001
From: Enrico Ros <enrico.ros@gmail.com>
Date: Thu, 21 Dec 2023 04:29:31 -0800
Subject: [PATCH 09/11] Persona Creator: remove the 'Labs' flag

---
 src/apps/settings-modal/UxLabsSettings.tsx | 12 +++---------
 src/common/state/store-ux-labs.ts          |  6 ------
 2 files changed, 3 insertions(+), 15 deletions(-)

diff --git a/src/apps/settings-modal/UxLabsSettings.tsx b/src/apps/settings-modal/UxLabsSettings.tsx
index 1eb04491d..9211e60e3 100644
--- a/src/apps/settings-modal/UxLabsSettings.tsx
+++ b/src/apps/settings-modal/UxLabsSettings.tsx
@@ -5,7 +5,6 @@ import AddAPhotoIcon from '@mui/icons-material/AddAPhoto';
 import CallIcon from '@mui/icons-material/Call';
 import FormatPaintIcon from '@mui/icons-material/FormatPaint';
 import VerticalSplitIcon from '@mui/icons-material/VerticalSplit';
-import YouTubeIcon from '@mui/icons-material/YouTube';
 
 import { FormLabelStart } from '~/common/components/forms/FormLabelStart';
 import { FormSwitchControl } from '~/common/components/forms/FormSwitchControl';
@@ -19,17 +18,12 @@ export function UxLabsSettings() {
   // external state
   const isMobile = useIsMobile();
   const {
-    labsCalling, labsCameraDesktop, /*labsEnhancedUI,*/ labsMagicDraw, labsPersonaYTCreator, labsSplitBranching,
-    setLabsCalling, setLabsCameraDesktop, /*setLabsEnhancedUI,*/ setLabsMagicDraw, setLabsPersonaYTCreator, setLabsSplitBranching,
+    labsCalling, labsCameraDesktop, /*labsEnhancedUI,*/ labsMagicDraw, labsSplitBranching,
+    setLabsCalling, setLabsCameraDesktop, /*setLabsEnhancedUI,*/ setLabsMagicDraw, setLabsSplitBranching,
   } = useUXLabsStore();
 
   return <>
 
-    <FormSwitchControl
-      title={<><YouTubeIcon color={labsPersonaYTCreator ? 'primary' : undefined} sx={{ mr: 0.25 }} /> YouTube Personas</>} description={labsPersonaYTCreator ? 'Creator Enabled' : 'Disabled'}
-      checked={labsPersonaYTCreator} onChange={setLabsPersonaYTCreator}
-    />
-
     <FormSwitchControl
       title={<><FormatPaintIcon color={labsMagicDraw ? 'primary' : undefined} sx={{ mr: 0.25 }} />Assisted Draw</>} description={labsMagicDraw ? 'Enabled' : 'Disabled'}
       checked={labsMagicDraw} onChange={setLabsMagicDraw}
@@ -58,7 +52,7 @@ export function UxLabsSettings() {
     <FormControl orientation='horizontal' sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
       <FormLabelStart title='Graduated' />
       <Typography level='body-xs'>
-        <Link href='https://github.com/enricoros/big-agi/issues/192' target='_blank'>Auto Diagrams</Link> · Relative chat size · Text Tools · LLM Overheat
+        <Link href='https://github.com/enricoros/big-AGI/issues/282' target='_blank'>Persona Creator</Link> · <Link href='https://github.com/enricoros/big-agi/issues/192' target='_blank'>Auto Diagrams</Link> · Relative chat size · Text Tools · LLM Overheat
       </Typography>
     </FormControl>
 
diff --git a/src/common/state/store-ux-labs.ts b/src/common/state/store-ux-labs.ts
index 620048ec1..14b6112f2 100644
--- a/src/common/state/store-ux-labs.ts
+++ b/src/common/state/store-ux-labs.ts
@@ -24,9 +24,6 @@ interface UXLabsStore {
   labsMagicDraw: boolean;
   setLabsMagicDraw: (labsMagicDraw: boolean) => void;
 
-  labsPersonaYTCreator: boolean;
-  setLabsPersonaYTCreator: (labsPersonaYTCreator: boolean) => void;
-
   labsSplitBranching: boolean;
   setLabsSplitBranching: (labsSplitBranching: boolean) => void;
 
@@ -48,9 +45,6 @@ export const useUXLabsStore = create<UXLabsStore>()(
       labsMagicDraw: false,
       setLabsMagicDraw: (labsMagicDraw: boolean) => set({ labsMagicDraw }),
 
-      labsPersonaYTCreator: true, // NOTE: default to true, as it is a graduated experiment
-      setLabsPersonaYTCreator: (labsPersonaYTCreator: boolean) => set({ labsPersonaYTCreator }),
-
       labsSplitBranching: false,
       setLabsSplitBranching: (labsSplitBranching: boolean) => set({ labsSplitBranching }),
 

From b902a7bce8dc2fdabbdb9878896349f765a2638e Mon Sep 17 00:00:00 2001
From: Enrico Ros <enrico.ros@gmail.com>
Date: Thu, 21 Dec 2023 04:29:46 -0800
Subject: [PATCH 10/11] Persona Creator: consistent naming

---
 src/apps/personas/AppPersonas.tsx    | 9 +--------
 src/apps/personas/PersonaCreator.tsx | 8 ++++----
 2 files changed, 5 insertions(+), 12 deletions(-)

diff --git a/src/apps/personas/AppPersonas.tsx b/src/apps/personas/AppPersonas.tsx
index 4e7cc03a1..69454e867 100644
--- a/src/apps/personas/AppPersonas.tsx
+++ b/src/apps/personas/AppPersonas.tsx
@@ -18,16 +18,9 @@ export function AppPersonas() {
       <Container disableGutters maxWidth='md' sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
 
         <Typography level='title-lg' sx={{ textAlign: 'center' }}>
-          Advanced AI Personas
+          AI Personas Creator
         </Typography>
 
-        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 1 }}>
-          <Typography>
-            Experimental
-          </Typography>
-          <ScienceIcon color='primary' />
-        </Box>
-
         <ListDivider sx={{ my: 2 }} />
 
         <PersonaCreator />
diff --git a/src/apps/personas/PersonaCreator.tsx b/src/apps/personas/PersonaCreator.tsx
index 2e319bb0a..d5262b7a6 100644
--- a/src/apps/personas/PersonaCreator.tsx
+++ b/src/apps/personas/PersonaCreator.tsx
@@ -39,7 +39,7 @@ function useTranscriptFromVideo(videoID: string | null) {
 }
 
 
-const YouTubePersonaSteps: LLMChainStep[] = [
+const PersonaCreationSteps: LLMChainStep[] = [
   {
     name: 'Analyzing the transcript / text',
     setSystem: 'You are skilled in analyzing and embodying diverse characters. You meticulously study transcripts to capture key attributes, draft comprehensive character sheets, and refine them for authenticity. Feel free to make assumptions without hedging, be concise and be creative.',
@@ -81,7 +81,7 @@ export function PersonaCreator() {
 
   // use the transformation sequence to create a persona
   const { isFinished, isTransforming, chainProgress, chainIntermediates, chainStepName, chainOutput, chainError, abortChain } =
-    useLLMChain(YouTubePersonaSteps, personaLlm?.id, personaTranscript ?? undefined);
+    useLLMChain(PersonaCreationSteps, personaLlm?.id, personaTranscript ?? undefined);
 
   const handleVideoIdChange = (e: React.ChangeEvent<HTMLInputElement>) => setVideoURL(e.target.value);
 
@@ -226,7 +226,7 @@ export function PersonaCreator() {
             {title || 'Transcript / Text'}
           </Typography>
           <Box>
-            {!!thumbnailUrl && <picture><img src={thumbnailUrl} alt='YouTube Video Image' height={80} style={{ float: 'left', marginRight: 8 }} /></picture>}
+            {!!thumbnailUrl && <picture><img src={thumbnailUrl} alt='YouTube Video Thumbnail' height={80} style={{ float: 'left', marginRight: 8 }} /></picture>}
             <Typography level='body-sm'>
               {personaTranscript.slice(0, 280)}...
             </Typography>
@@ -247,7 +247,7 @@ export function PersonaCreator() {
             <Card sx={{ height: '100%' }}>
               <CardContent>
                 <Typography level='title-sm' sx={{ mb: 1 }}>
-                  {i + 1}. {YouTubePersonaSteps[i].name}
+                  {i + 1}. {PersonaCreationSteps[i].name}
                 </Typography>
                 <Typography level='body-sm'>
                   {intermediate?.slice(0, 140)}...

From c6441662b0416e3bd4f43857f9645c51cdeec7d4 Mon Sep 17 00:00:00 2001
From: Enrico Ros <enrico.ros@gmail.com>
Date: Thu, 21 Dec 2023 04:30:29 -0800
Subject: [PATCH 11/11] Persona Creator: on by default, can be hidden like
 other tiles

---
 .../persona-selector/PersonaSelector.tsx      | 58 +++++++++++++------
 src/common/app.routes.ts                      |  3 +
 2 files changed, 43 insertions(+), 18 deletions(-)

diff --git a/src/apps/chat/components/persona-selector/PersonaSelector.tsx b/src/apps/chat/components/persona-selector/PersonaSelector.tsx
index b64ed7a98..f0cbc906f 100644
--- a/src/apps/chat/components/persona-selector/PersonaSelector.tsx
+++ b/src/apps/chat/components/persona-selector/PersonaSelector.tsx
@@ -3,19 +3,20 @@ import { shallow } from 'zustand/shallow';
 
 import { Box, Button, Checkbox, Grid, IconButton, Input, Stack, Textarea, Typography } from '@mui/joy';
 import ClearIcon from '@mui/icons-material/Clear';
-import ScienceIcon from '@mui/icons-material/Science';
 import SearchIcon from '@mui/icons-material/Search';
 import TelegramIcon from '@mui/icons-material/Telegram';
 
 import { DConversationId, useChatStore } from '~/common/state/store-chats';
-import { Link } from '~/common/components/Link';
+import { navigateToPersonas } from '~/common/app.routes';
 import { useUIPreferencesStore } from '~/common/state/store-ui';
-import { useUXLabsStore } from '~/common/state/store-ux-labs';
 
 import { SystemPurposeId, SystemPurposes } from '../../../../data';
 import { usePurposeStore } from './store-purposes';
 
 
+// 'special' purpose IDs, for tile hiding purposes
+const PURPOSE_ID_PERSONA_CREATOR = '__persona-creator__';
+
 // Constants for tile sizes / grid width - breakpoints need to be computed here to work around
 // the "flex box cannot shrink over wrapped content" issue
 //
@@ -47,7 +48,6 @@ export function PersonaSelector(props: { conversationId: DConversationId, runExa
 
   // external state
   const showFinder = useUIPreferencesStore(state => state.showPurposeFinder);
-  const labsPersonaYTCreator = useUXLabsStore(state => state.labsPersonaYTCreator);
   const { systemPurposeId, setSystemPurposeId } = useChatStore(state => {
     const conversation = state.conversations.find(conversation => conversation.id === props.conversationId);
     return {
@@ -113,6 +113,8 @@ export function PersonaSelector(props: { conversationId: DConversationId, runExa
   const unfilteredPurposeIDs = (filteredIDs && showFinder) ? filteredIDs : Object.keys(SystemPurposes);
   const purposeIDs = editMode ? unfilteredPurposeIDs : unfilteredPurposeIDs.filter(id => !hiddenPurposeIDs.includes(id));
 
+  const hidePersonaCreator = hiddenPurposeIDs.includes(PURPOSE_ID_PERSONA_CREATOR);
+
   const selectedPurpose = purposeIDs.length ? (SystemPurposes[systemPurposeId] ?? null) : null;
   const selectedExample = selectedPurpose?.examples && getRandomElement(selectedPurpose.examples) || null;
 
@@ -156,10 +158,14 @@ export function PersonaSelector(props: { conversationId: DConversationId, runExa
               <Button
                 variant={(!editMode && systemPurposeId === spId) ? 'solid' : 'soft'}
                 color={(!editMode && systemPurposeId === spId) ? 'primary' : SystemPurposes[spId as SystemPurposeId]?.highlighted ? 'warning' : 'neutral'}
-                onClick={() => !editMode && handlePurposeChanged(spId as SystemPurposeId)}
+                onClick={() => editMode
+                  ? toggleHiddenPurposeId(spId)
+                  : handlePurposeChanged(spId as SystemPurposeId)
+                }
                 sx={{
                   flexDirection: 'column',
                   fontWeight: 500,
+                  // paddingInline: 1,
                   gap: bpTileGap,
                   height: bpTileSize,
                   width: bpTileSize,
@@ -171,9 +177,10 @@ export function PersonaSelector(props: { conversationId: DConversationId, runExa
               >
                 {editMode && (
                   <Checkbox
-                    label={<Typography level='body-sm'>show</Typography>}
-                    checked={!hiddenPurposeIDs.includes(spId)} onChange={() => toggleHiddenPurposeId(spId)}
-                    sx={{ alignSelf: 'flex-start' }}
+                    color='neutral'
+                    checked={!hiddenPurposeIDs.includes(spId)}
+                    // label={<Typography level='body-xs'>show</Typography>}
+                    sx={{ position: 'absolute', left: 8, top: 8 }}
                   />
                 )}
                 <div style={{ fontSize: '2rem' }}>
@@ -185,28 +192,43 @@ export function PersonaSelector(props: { conversationId: DConversationId, runExa
               </Button>
             </Grid>
           ))}
-          {/* Button to start the YouTube persona creator */}
-          {labsPersonaYTCreator && <Grid>
+          {/* Button to start the Persona Creator */}
+          {(editMode || !hidePersonaCreator) && <Grid>
             <Button
               variant='soft' color='neutral'
-              component={Link} noLinkStyle href='/personas'
+              onClick={() => editMode
+                ? toggleHiddenPurposeId(PURPOSE_ID_PERSONA_CREATOR)
+                : void navigateToPersonas()
+              }
               sx={{
-                '--Icon-fontSize': '2rem',
                 flexDirection: 'column',
                 fontWeight: 500,
-                // gap: bpTileGap,
+                // paddingInline: 1,
+                gap: bpTileGap,
                 height: bpTileSize,
                 width: bpTileSize,
-                border: `1px dashed`,
-                boxShadow: 'md',
-                backgroundColor: 'background.surface',
+                // border: `1px dashed`,
+                // borderColor: 'neutral.softActiveBg',
+                boxShadow: 'xs',
+                backgroundColor: 'neutral.softDisabledBg',
               }}
             >
+              {editMode && (
+                <Checkbox
+                  color='neutral'
+                  checked={!hidePersonaCreator}
+                  // label={<Typography level='body-xs'>show</Typography>}
+                  sx={{ position: 'absolute', left: 8, top: 8 }}
+                />
+              )}
               <div>
-                <ScienceIcon />
+                <div style={{ fontSize: '2rem' }}>
+                  🎭
+                </div>
+                {/*<SettingsAccessibilityIcon style={{ opacity: 0.5 }} />*/}
               </div>
               <div style={{ textAlign: 'center' }}>
-                Persona creator
+                Persona Creator
               </div>
             </Button>
           </Grid>}
diff --git a/src/common/app.routes.ts b/src/common/app.routes.ts
index a70994303..a4c1c4613 100644
--- a/src/common/app.routes.ts
+++ b/src/common/app.routes.ts
@@ -14,6 +14,7 @@ export const ROUTE_INDEX = '/';
 export const ROUTE_APP_CHAT = '/';
 export const ROUTE_APP_LINK_CHAT = '/link/chat/:linkId';
 export const ROUTE_APP_NEWS = '/news';
+export const ROUTE_APP_PERSONAS = '/personas';
 const ROUTE_CALLBACK_OPENROUTER = '/link/callback_openrouter';
 
 
@@ -55,6 +56,8 @@ export const navigateToChat = async (conversationId?: DConversationId) => {
 };
 export const navigateToNews = navigateFn(ROUTE_APP_NEWS);
 
+export const navigateToPersonas = navigateFn(ROUTE_APP_PERSONAS);
+
 export const navigateBack = Router.back;
 
 export const reloadPage = () => isBrowser && window.location.reload();