Skip to content

feat: command buttons #275

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

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

feat: command buttons #275

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b1021c1
feat: command buttons
vvava May 21, 2025
d53c03c
Merge branch 'main' into feat/CP-10663/commands-shortcut
vvava May 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
144 changes: 137 additions & 7 deletions src/pages/Home/components/Portfolio/Prompt/Prompt.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ import {
Scrollbars,
Grow,
Backdrop,
PlusIcon,
Slide,
} from '@avalabs/core-k2-components';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { functionDeclarations, systemPromptTemplate } from './models';
Expand Down Expand Up @@ -52,6 +54,7 @@ export function Prompt() {
const { t } = useTranslation();
const [input, setInput] = useState<string>('');
const [isDialogOpen, setIsDialogOpen] = useState<boolean>(false);
const [isCommandsOpen, setIsCommandsOpen] = useState<boolean>(false);
const { network, networks, setNetwork, getNetwork } = useNetworkContext();
const { contacts, createContact } = useContactsContext();
const { accounts, selectAccount } = useAccountsContext();
Expand Down Expand Up @@ -659,20 +662,147 @@ export function Prompt() {
{prompts.map((message, i) => {
if (message.role === 'model') {
return (
<AIDialog
message={message}
key={i}
scrollToBottom={scrollToBottom}
isDialogOpen={isDialogOpen}
/>
<>
<AIDialog
message={message}
key={i}
scrollToBottom={scrollToBottom}
isDialogOpen={isDialogOpen}
/>
<Stack sx={{ flexDirection: 'row' }}>
<Button
variant="outlined"
sx={{ my: 0.5, width: 'auto' }}
onClick={() => {
prompt('Switch Network');
}}
>
Switch Network
</Button>
<Button
variant="outlined"
sx={{ my: 0.5, width: 'auto' }}
onClick={() => {
prompt('Tokens');
}}
>
Tokens
</Button>
</Stack>
</>
);
}
return <UserDialog message={message} key={i} />;
})}
{isTyping && <TypingAvatar />}
</Stack>
</Scrollbars>
<Stack sx={{ p: 2 }}>
<Stack
sx={{
p: 2,
flexDirection: 'row',
alignItems: 'center',
position: 'relative',
}}
>
<Slide in={isCommandsOpen} direction="right">
<Stack
sx={{
position: 'absolute',
bottom: '80px',
left: 0,
width: 'auto',
zIndex: 1,
}}
>
<Button
variant="contained"
sx={{ my: 0.5 }}
onClick={() => {
prompt('Tokens list');
setIsCommandsOpen(false);
}}
>
Comment on lines +709 to +725
Copy link
Contributor

@bartosz-the-coder-at-avalabs bartosz-the-coder-at-avalabs May 26, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please consider to use gap property of the Stack component to control the space between the buttons.
It will also result in removal of all sx={{ my: 0.5 }} lines

Suggested change
<Stack
sx={{
position: 'absolute',
bottom: '80px',
left: 0,
width: 'auto',
zIndex: 1,
}}
>
<Button
variant="contained"
sx={{ my: 0.5 }}
onClick={() => {
prompt('Tokens list');
setIsCommandsOpen(false);
}}
>
<Stack
gap={0.5}
sx={{
position: 'absolute',
bottom: '80px',
left: 0,
width: 'auto',
zIndex: 1,
}}
>
<Button
variant="contained"
onClick={() => {
prompt('Tokens list');
setIsCommandsOpen(false);
}}
>

Copy link
Contributor Author

@vvava vvava May 26, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thank you but this was only a PoC PR I won't merge it anyway :)

Tokens
</Button>
<Button
variant="contained"
sx={{ my: 0.5 }}
onClick={() => {
prompt('Networks list');
setIsCommandsOpen(false);
}}
>
Networks
</Button>
<Button
variant="contained"
sx={{ my: 0.5 }}
onClick={() => {
setIsCommandsOpen(false);
}}
>
Daily Summary
</Button>
<Button
variant="contained"
sx={{ my: 0.5 }}
onClick={() => {
prompt('Send');
setIsCommandsOpen(false);
}}
>
Send
</Button>
<Button
variant="contained"
sx={{ my: 0.5 }}
onClick={() => {
prompt('Swap');
setIsCommandsOpen(false);
}}
>
Swap
</Button>
<Button
variant="contained"
sx={{ my: 0.5 }}
onClick={() => {
prompt('Switch Account');
setIsCommandsOpen(false);
}}
>
Switch Account
</Button>
<Button
variant="contained"
sx={{ my: 0.5 }}
onClick={() => {
prompt('Bridge');
setIsCommandsOpen(false);
}}
>
Bridge
</Button>
<Button
variant="contained"
sx={{ my: 0.5 }}
onClick={() => {
prompt('Switch Network');
setIsCommandsOpen(false);
}}
>
Switch Network
</Button>
</Stack>
</Slide>
<PlusIcon
onClick={() => {
setIsCommandsOpen(!isCommandsOpen);
}}
size={24}
sx={{ cursor: 'pointer' }}
/>
<UserInput
input={input}
setInput={setInput}
Expand Down
Loading