Skip to content
New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Jump to bottom

Rework Bot guide text #876

Merged
merged 3 commits into from
Nov 30, 2023
Merged

Rework Bot guide text #876

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5776ef6
Rework text for Bldr Bot
pablo-mayrgundter Nov 30, 2023
6a1c5d4
Rework text for Bldr Bot. Remove debug from unit tests.
pablo-mayrgundter Nov 30, 2023
47fefb2
Remove more debug from unit tests.
pablo-mayrgundter Nov 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
114 changes: 68 additions & 46 deletions src/Components/ImagineControl.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,14 +106,21 @@ function ImagineDialog({isDialogDisplayed, setIsDialogDisplayed, botIconIndex, s
<Dialog
icon={<AutoFixHighIcon className='icon-share'/>}
headerText={
<Box sx={{display: 'inline-flex', flexDirection: 'column', textAlign: 'center', height: '120px', marginTop: '10px'}}>
<Box
sx={{
display: 'inline-flex',
flexDirection: 'column',
textAlign: 'center',
height: '120px',
marginTop: '10px'}}
>
<CurrentBotIcon/>
<Typography variant={'overline'}>Bldr Bot</Typography>
</Box>
}
isDialogDisplayed={isDialogDisplayed}
setIsDialogDisplayed={closeDialog}
actionTitle='Access the bot'
actionTitle='Go to #bot-the-bldr on Bldrs Discord'
actionIcon={<CopyIcon className='icon-share'/>}
actionCb={onCopy}
content={
Expand All @@ -122,7 +129,6 @@ function ImagineDialog({isDialogDisplayed, setIsDialogDisplayed, botIconIndex, s
justifyContent='flex-start'
spacing={0}
sx={{
width: '266px',
marginBottom: '4px',
}}
>
Expand All @@ -131,55 +137,71 @@ function ImagineDialog({isDialogDisplayed, setIsDialogDisplayed, botIconIndex, s
</Helmet>
<Stack
spacing={1}
sx={{textAlign: 'left', width: '240px'}}
sx={{textAlign: 'left'}}
>
<Typography variant={'body1'}>
Bldr Bot runs on our Discord.
<br/>
To join our server please follow {' '}
<Link
underline="always"
href='https://discord.gg/fY9Pa3DD'
color='inherit'
variant='overline'
>
the Invite Link
</Link>
Bldr Bot creates realistic images of CAD models using Generative AI.
</Typography>
<Typography component="div">
To access the bot:
<ul style={{marginTop: '6px', padding: '0px', paddingLeft: '30px', lineHeight: '1.8em'}}>
<li>Copy the link</li>
<li>Click Access the Bot</li>
<li>Enter <Typography variant='overline' sx={{fontWeight: 'bold'}}>/imagine</Typography> command</li>
<li>Experiment with prompts!</li>
</ul>
To use:
<ol style={{marginTop: '6px', padding: '0px', paddingLeft: '30px', lineHeight: '1.8em'}}>
<li>Copy this page&apos;s link<br/>
<TextField
sx={{
width: '90%',
}}
value={String(window.location)}
inputRef={urlTextFieldRef}
variant='outlined'
size='small'
rows={1}
InputProps={{
readOnly: true,
endAdornment: (
<InputAdornment position="end">
<IconButton
onClick={handleCopyClick}
edge="end"
size='small'
>
<ContentCopyIcon size='inherit' color='primary' sx={{width: '16px', height: '16px'}}/>
</IconButton>
</InputAdornment>
),
}}
/>
</li>
<li>Click the button below to go to our #bot-the-bldr channel</li>
<ul>
<li>(You first may need to join {' '}
<Link
underline="always"
href='https://discord.gg/fY9Pa3DD'
color='inherit'
>
The Bldrs Discord
</Link>)
</li>
</ul>
<li>When you&apos;re there:
<ol>
<li>Type {' '}
<Typography
variant='overline'
sx={{fontWeight: 'bold'}}
>
/imagine
</Typography>
</li>
<li>Paste the link you copied for this model</li>
<li>Enter some text like &apos;Model on display in warehouse&apos;</li>
<li>Hit Enter and Bldr Bot will imagine your image!</li>
</ol>
</li>
<li>Experiment with different prompts and share your creations 👨‍🎨</li>
</ol>
</Typography>
</Stack>
<TextField
sx={{
width: '246px',
}}
value={String(window.location)}
inputRef={urlTextFieldRef}
variant='outlined'
size='small'
rows={1}
InputProps={{
readOnly: true,
endAdornment: (
<InputAdornment position="end">
<IconButton
onClick={handleCopyClick}
edge="end"
size='small'
>
<ContentCopyIcon size='inherit' color='primary' sx={{width: '16px', height: '16px'}}/>
</IconButton>
</InputAdornment>
),
}}
/>
</Stack>
}
/>)
Expand Down
8 changes: 4 additions & 4 deletions src/Components/ImagineControl.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,22 +6,22 @@ import {MockComponent} from '../__mocks__/MockComponent'

describe('ImagineControl', () => {
it('renders the dialog in the document', () => {
const {getByTitle, debug} = render(<ImagineControl/>, {
const {getByTitle} = render(<ImagineControl/>, {
wrapper: MockComponent,
})
debug()

const component = getByTitle('Bldr Bot Rendering')
expect(component).toBeInTheDocument()
})

it('updates the title when the dialog is open', async () => {
const {getByTitle, debug} = render(<ImagineControl/>, {
const {getByTitle} = render(<ImagineControl/>, {
wrapper: MockComponent,
})

const button = getByTitle('Bldr Bot Rendering')
fireEvent.click(button)
debug()

await(waitFor(() => expect(document.title).toBe('BLDR Bot')))
})
})
20 changes: 10 additions & 10 deletions src/Components/LoginMenu.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,50 +8,50 @@ import ShareMock from '../ShareMock'
describe('LoginMenu', () => {
it('renders the login button when not logged in', async () => {
mockedUseAuth0.mockReturnValue(mockedUserLoggedOut)
const {debug, findByTitle, findByText} = render(<ShareMock><LoginMenu/></ShareMock>)
const {findByTitle, findByText} = render(<ShareMock><LoginMenu/></ShareMock>)
const usersMenu = await findByTitle('Users menu')
fireEvent.click(usersMenu)
debug()

const LoginWithGithub = await findByText('Log in with Github')
expect(LoginWithGithub).toBeInTheDocument()
})

it('renders the user avatar when logged in', async () => {
mockedUseAuth0.mockReturnValue(mockedUserLoggedIn)
const {debug, findByTitle, findByText} = render(<ShareMock><LoginMenu/></ShareMock>)
const {findByTitle, findByText} = render(<ShareMock><LoginMenu/></ShareMock>)
const usersMenu = await findByTitle('Users menu')
fireEvent.click(usersMenu)
debug()

const LoginWithGithub = await findByText('Log out')
expect(LoginWithGithub).toBeInTheDocument()
})

it('renders the theme selection', async () => {
mockedUseAuth0.mockReturnValue(mockedUserLoggedIn)
const {debug, findByTitle, findByText} = render(<ShareMock><LoginMenu/></ShareMock>)
const {findByTitle, findByText} = render(<ShareMock><LoginMenu/></ShareMock>)
const usersMenu = await findByTitle('Users menu')
fireEvent.click(usersMenu)
debug()

const dayThemeButton = await findByText('Day theme')
expect(dayThemeButton).toBeInTheDocument()
})

it('renders the night theme when selected', async () => {
mockedUseAuth0.mockReturnValue(mockedUserLoggedIn)
const {debug, findByTitle, findByText} = render(<ShareMock><LoginMenu/></ShareMock>)
const {findByTitle, findByText} = render(<ShareMock><LoginMenu/></ShareMock>)
const usersMenu = await findByTitle('Users menu')
fireEvent.click(usersMenu)
const dayThemeButton = await findByText('Day theme')
fireEvent.click(dayThemeButton)
debug()

const nighThemeButton = await findByText('Night theme')
expect(nighThemeButton).toBeInTheDocument()
})

it('renders users avatar when logged in', async () => {
mockedUseAuth0.mockReturnValue(mockedUserLoggedIn)
const {debug, findByAltText} = render(<ShareMock><LoginMenu/></ShareMock>)
debug()
const {findByAltText} = render(<ShareMock><LoginMenu/></ShareMock>)

const avatarImage = await findByAltText('Unit Testing')
expect(avatarImage).toBeInTheDocument()
})
Expand Down