We are building a web app. You produce the code for me. Let's do the entire UI today. Only produce the UI code on the front end. I'm going to provide you with pictures and describe them to you so you know what to do.

There is a menu button. 
Next to the menu button is a paperclip icon. 
There there is a text box used to input prompts to speak to my chatbot. It is a solid green prompt input bubble.
Then there is a dollar sign button. 
There is a chatbubble button. 
The color of the green used in the picture is #25A100, and the web app has a gradient color of different greys. 

When the Menu button is clicked, you'll see four bubbles that are titled differently.
The first bubble is titled 'Workers', the second is 'Sites', the third is 'Options', and the fourth is 'History'. (don't include quote marks)
Each has text to click on that either acts as a drop-down menu or direct links.
The first bubble, 'Workers', has these:
'Models' (dropdown that shows all the NLP models I have), 'Software' (dropdown that shows all the software I have), 'WHs' (dropdown that shows all the webhooks I have), 'RSS' (dropdown that shows all the RSS feeds I have), 'Agents' (dropdown that shows all the agent AI/GPTs I have), and 'Other APIs' (dropdown that shows all the other APIs I have added to SuperAGI and Dify).
The second bubble, 'Sites', has these:
'Worker sites' (the sites of everything that was under the 'Workers' bubble), 'Accounts' (my accounts to different apps that are regular), 'Social Media' (all the social media accounts I own that have been added to my SuperAGI and Dify), 'My Sites' (all the sites I've created), and 'Other Sites' (random sites). All of these are dropdowns that show the sites (or sites icon if they have one) I have added to Dify or SuperAG through webhooks or APIs and can preview them.
The third bubble, 'Options', has these:
'Search' (I can search by database and all the storage I have), 'Send Reports' (send the reports that it's supposed to send daily now and updated to the time the button was used), 'Notifications' (change the notification settings), 'Check' (check everything is working), and 'Other' (change the color of web app, turn web app to dark mode, change the voice of the chatbot for Speech2Speech mode, etc.).
The fourth bubble, 'History', has these:
'Storage' (shows the storage changes and changes to the database), 'Convos' (shows everything I've said with all chatbots and agents), 'Automations' (shows pictures of all the automation I currently have or have made on my automation platforms), and 'Growth' (shows the growth of the businesses, numbers for social media, etc.). 
If you run into any logic problems, that's fine because this is only for the UI at first. As long as all the buttons can be clicked and used, then that's fine. For the icons and images, they'll be into where they should be once their site/API is added to Dify and SuperAGI, which will be on the server side code, so just make sure it works in a basic sense on the UI code for now. 
Under the menu bubbles, there should be a 'mode' selection that changes the mode of the webapp.
Here are the different modes:
'Grow' (shows the up-to-date data and numbers for the businesses and social media, but in more detail with graphs and charts and whatever else I tell it to make (you don't have to include the graphs and charts, the agent will do that)), 'Build' (where I can code (using my coding chatbot that can auto copy and paste the code into an IDE and preview apps and sites), 'Holla' (where I can just speak to my webapps chatbot to ask stuff and talk about things or tell it to remember stuff), and 'Automate' (where I can make it create an automation with my automation software or one-time automation, and this is where the agents can be told to do one time work tasks).
Make sure that the selections for the 'mode' for when the 'menu' button is clicked, makes the order of the mode selection random every time, like with the 'paperclip' button.
The 'mode' selection should be fomated like this for example: Build | Automate | Grow | Holla

When the paperclip button is clicked, you can choose from the following options:
Take a picture or video, upload a picture or video, or upload a file (from a computer or phone). Make the selection process random every time the button is clicked (so the order isn’t take pic, upload pic, upload a file forever and can be different every time the button is clicked).
It should be a select menu that opens upwards from where the paperclip button is. 
URLs for pics, videos, and files should be accepted through the prompt input bubble, so don't include them in the paperclip button selection.
Make sure the selection menu is small and corresponds to the position of the paperclip. 

When the chatbubble button is clicked, you can choose from the following options: 
s2t (have everything I say turned into text and inserted into the prompt input bubble)
s2s (talk with the chatbot and can speak to me) (The t2s model API is going to be in the sever code for the voice to be selected in the 'options' under 'other').
Make sure that the selection menu for the chatbubble button is clicked, which makes the selection order random every time, like with the 'paperclip' button.
When I'm speaking with the chatbot in S2S, there should be an audio wave that moves to my voice. and when the chatbot is speaking, it should have the same.


When the '$' button is clicked:
If there is text, images, videos, or files in the prompt input bubble, then it acts as a button to use the input for the NLP/agent or whatever mode its on to do its work.


Here are the different modes that the webapp has when selected by pressing the menu button:

'Build' mode:
My own IDE where I can code, and it shows me a live preview of what I'm coding.
This can be used for any language on the UI side and the sever side of code.
Should auto-detect the language of the code(s) being used.
The prompt input bubble in this mode can take what I'm telling it and generate code from what I tell it I want and put the code into the IDE itself to be previewed.
When the 'Build' mode is being used on desktop, I can change how big the coding module and the preview module (for desktop and phone preview) are by a dragging mechanism with my mouse.
When the 'Build' mode is being used on the phone, the preview module is separate from the coding module, and I can see the coding and UI buttons, but when I click preview, it 'opens' another screen inside the web app that slides over the coding module and UI buttons.
Since the webapp is going to be hosted on Hostinger, the preview module should also be taken care of by the same host that's hosting the webapp. 

'Automate' mode:
This is where I can talk to the chatbot, but the prompt input bubble is connected to agents instead of a regular chatbot, so it can make changes to everything from its own web app to everything it has added to Dify and SuperAGi and use everything added as a tool to complete its tasks as well.
This can be used to make automations that go forever or automations that only go once.
This can be used to make the agent do a task forever or once.
This is where me and the agent can make content together, either by telling it to use the tools we have to do everything itself or by telling it step by step how I want the content made and which tools to use, etc.
 
'Grow' mode: 
shows the most recent data and preset graph and chart configurations when opened to. 
Then I can talk to the chatbot and ask it what I want about my data and how to grow or improve.
It should tell me what's great and what's not immediately when the 'Grow' mode is opened by reading the data at that point it was accessed (quick sentences under the chats and graphs in button format that when I click them it sends it to agents to start making those changes).

'Holla' mode:
Where I can just talk to my chatbot, get info by asking, and have it generate stuff for one-time use, unlike the agents who would generate stuff and use it however it wants.

Things and functions to make sure you include:
I can copy and paste responses from any mode to another mode of the webapp using a clipboard function where each response has a button under it.
The responses should have a read-aloud button function and buttons to like or dislike so I can have the chatbots and agents remember that I didn't like the outcome and to do better.
A share button where I can send the chatbots or agents' responses somewhere else (to email or download to a computer to be shared)
When me and the chatbot or agent are speaking using S2S, there should be a bigger '$' in #25a100 under the audio waves that I can press to let the chatbot know I'm done speaking and it can respond.
The font for everything should be in Times New Roman.
Make sure that the UI is at the button of the screen, and when the buttons are clicked, the options are above the UI.
Each of the menu bubbles must be separated by category.