From b1021c18d642d96dcc4d5a2624ff05ec516c3929 Mon Sep 17 00:00:00 2001
From: Viktor Vasas <viktor.vasas@avalabs.org>
Date: Wed, 21 May 2025 20:32:08 +0200
Subject: [PATCH] feat: command buttons

---
 .../components/Portfolio/Prompt/Prompt.tsx    | 142 +++++++++++++++++-
 1 file changed, 136 insertions(+), 6 deletions(-)

diff --git a/src/pages/Home/components/Portfolio/Prompt/Prompt.tsx b/src/pages/Home/components/Portfolio/Prompt/Prompt.tsx
index 296848791..72c91c121 100644
--- a/src/pages/Home/components/Portfolio/Prompt/Prompt.tsx
+++ b/src/pages/Home/components/Portfolio/Prompt/Prompt.tsx
@@ -8,6 +8,8 @@ import {
   Scrollbars,
   Grow,
   Backdrop,
+  PlusIcon,
+  Slide,
 } from '@avalabs/core-k2-components';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { FunctionCallingMode } from '@google/generative-ai';
@@ -51,6 +53,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();
@@ -569,11 +572,33 @@ export function Prompt() {
                 {prompts.map((message, i) => {
                   if (message.role === 'model') {
                     return (
-                      <AIDialog
-                        message={message}
-                        key={i}
-                        scrollToBottom={scrollToBottom}
-                      />
+                      <>
+                        <AIDialog
+                          message={message}
+                          key={i}
+                          scrollToBottom={scrollToBottom}
+                        />
+                        <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} />;
@@ -581,7 +606,112 @@ export function Prompt() {
                 {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);
+                    }}
+                  >
+                    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}