I want to make chatGPT clone using Shadcn UI, a part of tailwinds css. Must use shadcn ui componets and they classes. Must use tailwind css also. My AI bot name is StromgoAI, use modern shadcn UI icons alsom use icons logo for my brand. Make full dark theme, use inter font. Use green main color. Make two div left and right, left side show left side bar with brand name and icons in top, after show some history with chat icons histry name and delete icons. And left side bar of bottom show profile icons with user name and span text show premium plan. Make sure add border in top of profile. Show 3 line when user click then show side bar of right side bar when user click close then hide side bar. Make with Animation. 

When side bar close then make sticky input box in center. And in input box show attech icons in left side, add click active icons then make background green and icons color white with radius. And add send button in input box in right side. After sticky input box called out of sticky box add in bottom in center like Stromgo AI can mistake, so Dubble check it. Make this via using span. 

And there is big, I tell you add close button but you didn't do, when user click on 3 line then open sidebar, and when open side bar hide 3 line, after add close icons in side bar add close icons of right of logo side. Need smooth animation when open and close 


- But still bug I click on 3 line but not open and still when side bar open then still show 3 line, tell hide theme when open side bar. Please add small light hover effects in evry icons. Also even in user profile. With some border radius. Remove image icons in input box. 

When user hover user profile then also show hover I don't need hover in user profile, please use bold Poppins font now. Add more padding in hover in user profile icons. Only add hover remove Animation at hover time in icons. You didn't add hover in attech icons. Make decrease width of send icons. Remove all the padding in verification-text, add 1rem padding, and add border top. 

Good, please decrease padding of input sticky box around. 0.5 and 0.6rem as you like, and add margin bottom in sticky input box. You didn't add profile hover in use profile with padding and radius. Change user name to Stromgo AI, make lable with span with green background and white text and padding with radius, "Pro" show stromo ai logo in user icons profile. 

🙂 Wow you make good Ui, now please make small span text for pro, and I need small no need to much big, make small span like little bit. Please add active system in attech icon. Make sqare width and height for sending button, and make sure icons must be in center. Please add more margin bottom.

First always open side bar, make active. After user want to close they can. Now please make decrease width of span pro. Show ™ symbol in user name of right of top. 
Show smap text of span in brand name, show Made by kaiiddo. Show this after brand name. With small text font.  When user click on attech icons make background green and colour white. Add radius also with padding. Please add minor, padding from left and right for history. 

But still you didn't apply active in attech icons, make background green and colour white. Add radius also with padding. And also you still not apply in decrease width of pro lable span. 

Please apply text of pro lable must be in center of lable. Make text center of lable. Remove active in attech icon. Add normal gray hover I don't need green hover. When user click on attech icons then show toast with icons. Attech feature is in develop, comming soon! I need animation. And yes , when I click on 3 line then not open side bar. This is bug fix it fast. 

All good, now make toast in top, i don't like, make normal text font weight. And i don't like this in and out animation I need new something. When user close side bar then look like somthing left side bar with decrease width I don't like this animation. That evryone know that when close side var then make width decrease with animation. Please fix when side bar close don't Know user that what do in close animation. When side bar close show brand name, icons and span text in side or 3 line. 

There is still something wrong, make two part of side left and Right make Left part of div add full side bar, with example 30% width. And make right part of div add full ai message box contener. Make flex left and right part div. 

Still somthing wrongly, I tell you example width 30% and you apply alsom please make example around around figer 20%. Now don't hide side bar, show when user close nav bar then show 3 line in top of side bar in side bav bar, and show only brand logo in top. Make sure first of top show 3 line after only brand logo. Show new chat icons, and user logo that's all. When user open nav bar then show that text. Don't need Histry in close nav bar. And make full max width for chat contener of right side bar, acording when open and close side bar then adjust width. 

I love you GitHub Copilot, you make acording i need. Thanks you

Now in when nav bar open show button for new chat, with icon. And profile must be show in bottom of side bar. Thats only changes. 

Current only one user that is Stromgo AI. Now please also modify it n close nav bar show user icons in bottom. And for close also show user Stromgo AI icon. Please add small text size span in top of history add text like Recently History. Make green background of New chat. Current show default message in User chat area in center, Hello Stromgo AI. I need gradiate text color. 

Ohh shit, ohh my good ohh shit you make troubleshooting my design ui you make poor I don't know what I do please check code you make dirrty ui user icons in right convert in clone that area. And privious chat histry in top. You totally make dirty ui please fix. 


Wow I am good now, you make good design now. But there is something problem. Make text like Hello, Stromgo AI!, after new line show small tiny text with Good morning. I need only "Hello, {user name}!" In gradiate text. When nav bar close please add pluse icons for new chat in close nav bar, add icons after brand logo. And add icons in attech feature in develop, comming soon.make recently history allign of message history icons. 

Wow good I like it. Please add smoth animation when nav open. I like you add close animation of nav. Remove icons of Recently History, only show text. Add small margin left of text. And make Good Morning text in align left. Make sure show random greetings message and appear evry time. And remove attech icons in toast of comming soon! Only show 2 toast at time user click, when user click then show toast after again user click then again show now new toast come in top and last toast come in after new toast. Need new animation. User click toast then show new toast. Make it continue if user click again. But max tost make Only 2. Now when nav close user hover brand icon, new chat icons. Or they Profile icons make open nav with smooth transection. But when user cursor out of nav bar then again close nav bar. 

Ohh shit, but you when user open nav bar using 3 line then make sticky, don't close nav. If user close nav bar on close icons then close nav. And you Didn't add animation when nav bar open. And make Hello, StromgoAI and good morning text in center of clint chat. Now check time acording tell to user good morning, good night, and good evning. And you why you remove my toast animation with I tell function. Please add and add i tell function and system.

Remove hover animation, for close and open nav bar in left side. I don't need any hover for open nav and close nav bar. Make greetings message also in center. 

Ohh shit you remove my old navbar close animation and systems. Please fix and give me old nav bar. 

I need animation when nav bar open. I need smooth transection animation. 

Change user profile icons, name with Kaiiddo, acording user first latter is user icon logo. Add Admin span text after user name. Now when user input any message to ai in chat must show user user message with icons name and they message in right side and always show AI message in left side. Show AI logo, name and they responses

 message. First show loading animation after show AI response.

Good, make small changes, show admin span text in profile icons no need background. I need in new line no need of side after user name. And in user chat don't show admin lable in user chat. Show Stromgo AI brand logo in ai response. Make changes don't show user name in chat conversation. Only show user logo and they message. Also with ai don't show AI name show they logo StromgoAI and they response message.

Good, now make sure show pro lable of right side of user name. And always show Stromgo AI log in ai response, there is show first A latter in logo after replace with Stromgo AI, I don't need like that. I always show Stromgo AI logo. Make sure logo must be green. 

Good, I need green circle and show white brand logo for ai response. Always show this. I need, like, disk like, regenerate and feedback icons with text. I need show this all in bottom of ai response. Add small padding with radius.

I send message but no get any response fix it


Expected i get. Remember I need "Like, dislike, regenerate and feedback icons with flex text"  make sure show OUT of ai response. Add hover like acording padding with radius. And change every icons colour acording icons, for like icons change hover when user do change color to green and make light green background with radius and padding. Make like this with all icons i tell you. 

Good, only one small changes show Action icons in bottom of ai response. And make small size make tiny. 

One more change. Show action icons of left default side don't want to show in center, need in left side. I found bug if I send big message like 2-3 line then have spacing between user icons and after show user message there is between space make it solve. And i don't know that also bug in ai response if have then also fix it. And when user send small message then text gonna left of user message make in center add small minor padding to maintent in center.c


Please make user message and ai response "Text" always left align. Make user message box contener in right side. And ai response show in left side. Still you didn't do action bar postions must be left side for ai response. I tell small minor padding add for small message but you add lot of padding please fix it.

Remove margin left in message-action. And I need message container or user message need in right side and ai response show in left side. Why you not understand??

Please remove "margin-left: 3rem in message-actions" and I like you show user message in right side but there is spacing between user logo and they message please fix it. And make text align default I don't need in center text align as you use in user message remove it. 


This my site not properly responsive make it responsive. Make z index max for left side bar for mobile. And make proper good layout for mobile. 

Make sure you must close input tag, and now. Make small input box with left and right margin inside of input box show send button for response. Make complate responsive site why you not understand?? And in mobile I want to do scroll to find input box please fix it. I send message as user but don't show user message in mobile responsive. You didn't do please help me to convert all the components as responsible. Please help me. 


Ohh shit you complete changes ui for desktop, you make to much dirty layout for desktop, please make let get my ui layouts. You make poor layout, I only tell to change in ui for only mobile responsive. 

Again new problem, make proper input layout css, you make my poor input text. Fix it. And for mobile responsive good open and close nav, but when nav open and close hide all the text icons and etc all things also when open please fix this all issues. And also I can't send message and ai not give me response please fix this also. I need my ui with all parts working and completed fully

I want to make love linkdin post for this, Analitics and make professional blog, I don't want to make big article make small, and spacifiy i made this StromgoAI using AI. I made this ai for free. Current this only replay example reply soon Making or updating working with realtime response.


I have this XMl file make only html, and I use internal css and js please make or add in each file i provide styles.css and Script.js

Comments