From 5f455e6cc3649acae1df90f56c07c701ee08bd02 Mon Sep 17 00:00:00 2001
From: Qwikode <qwikode@gmail.com>
Date: Thu, 21 Nov 2024 23:32:53 +0200
Subject: [PATCH 1/2] fix(ui): header gradient and textarea border effect

---
 app/components/chat/BaseChat.module.scss      | 104 ++++++++++++++++++
 app/components/chat/BaseChat.tsx              |  55 +++++++--
 .../header/HeaderActionButtons.client.tsx     |   2 +-
 3 files changed, 153 insertions(+), 8 deletions(-)

diff --git a/app/components/chat/BaseChat.module.scss b/app/components/chat/BaseChat.module.scss
index 3d6ed4c8..204a24aa 100644
--- a/app/components/chat/BaseChat.module.scss
+++ b/app/components/chat/BaseChat.module.scss
@@ -17,3 +17,107 @@
 .Chat {
   opacity: 1;
 }
+
+.RayContainer {
+  --gradient-opacity: 0.85;
+  --ray-gradient: radial-gradient(rgba(83, 196, 255, var(--gradient-opacity)) 0%, rgba(43, 166, 255, 0) 100%);
+  transition: opacity 0.25s linear;
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  user-select: none;
+}
+
+.LightRayOne {
+  width: 480px;
+  height: 680px;
+  transform: rotate(80deg);
+  top: -540px;
+  left: 250px;
+  filter: blur(110px);
+  position: absolute;
+  border-radius: 100%;
+  background: var(--ray-gradient);
+}
+
+.LightRayTwo {
+  width: 110px;
+  height: 400px;
+  transform: rotate(-20deg);
+  top: -280px;
+  left: 350px;
+  mix-blend-mode: overlay;
+  opacity: 0.6;
+  filter: blur(60px);
+  position: absolute;
+  border-radius: 100%;
+  background: var(--ray-gradient);
+}
+
+.LightRayThree {
+  width: 400px;
+  height: 370px;
+  top: -350px;
+  left: 200px;
+  mix-blend-mode: overlay;
+  opacity: 0.6;
+  filter: blur(21px);
+  position: absolute;
+  border-radius: 100%;
+  background: var(--ray-gradient);
+}
+
+.LightRayFour {
+  position: absolute;
+  width: 330px;
+  height: 370px;
+  top: -330px;
+  left: 50px;
+  mix-blend-mode: overlay;
+  opacity: 0.5;
+  filter: blur(21px);
+  border-radius: 100%;
+  background: var(--ray-gradient);
+}
+
+.LightRayFive {
+  position: absolute;
+  width: 110px;
+  height: 400px;
+  transform: rotate(-40deg);
+  top: -280px;
+  left: -10px;
+  mix-blend-mode: overlay;
+  opacity: 0.8;
+  filter: blur(60px);
+  border-radius: 100%;
+  background: var(--ray-gradient);
+}
+
+.PromptEffectContainer {
+  --prompt-container-offset: 50px;
+  --prompt-line-stroke-width: 1px;
+  position: absolute;
+  pointer-events: none;
+  inset: calc(var(--prompt-container-offset) / -2);
+  width: calc(100% + var(--prompt-container-offset));
+  height: calc(100% + var(--prompt-container-offset));
+}
+
+.PromptEffectLine {
+  width: calc(100% - var(--prompt-container-offset) + var(--prompt-line-stroke-width));
+  height: calc(100% - var(--prompt-container-offset) + var(--prompt-line-stroke-width));
+  x: calc(var(--prompt-container-offset) / 2 - var(--prompt-line-stroke-width) / 2);
+  y: calc(var(--prompt-container-offset) / 2 - var(--prompt-line-stroke-width) / 2);
+  rx: calc(8px - var(--prompt-line-stroke-width));
+  fill: transparent;
+  stroke-width: var(--prompt-line-stroke-width);
+  stroke: url(#line-gradient);
+  stroke-dasharray: 35px 65px;
+  stroke-dashoffset: 10;
+}
+
+.PromptShine {
+  fill: url(#shine-gradient);
+  mix-blend-mode: overlay;
+}
\ No newline at end of file
diff --git a/app/components/chat/BaseChat.tsx b/app/components/chat/BaseChat.tsx
index 396fb012..e0ccb682 100644
--- a/app/components/chat/BaseChat.tsx
+++ b/app/components/chat/BaseChat.tsx
@@ -160,6 +160,13 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
         )}
         data-chat-visible={showChat}
       >
+        <div className={classNames(styles.RayContainer)}>
+          <div className={classNames(styles.LightRayOne)}></div>
+          <div className={classNames(styles.LightRayTwo)}></div>
+          <div className={classNames(styles.LightRayThree)}></div>
+          <div className={classNames(styles.LightRayFour)}></div>
+          <div className={classNames(styles.LightRayFive)}></div>
+        </div>
         <ClientOnly>{() => <Menu />}</ClientOnly>
         <div ref={scrollRef} className="flex flex-col lg:flex-row overflow-y-auto w-full h-full">
           <div className={classNames(styles.Chat, 'flex flex-col flex-grow lg:min-w-[var(--chat-min-width)] h-full')}>
@@ -192,12 +199,38 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
               </ClientOnly>
               <div
                 className={classNames(
-                  ' bg-bolt-elements-background-depth-2 p-3 rounded-lg border border-bolt-elements-borderColor relative w-full max-w-chat mx-auto z-prompt mb-6',
+                  'bg-bolt-elements-background-depth-2 p-3 rounded-lg border border-bolt-elements-borderColor relative w-full max-w-chat mx-auto z-prompt mb-6',
                   {
                     'sticky bottom-2': chatStarted,
                   },
                 )}
               >
+                <svg className={classNames(styles.PromptEffectContainer)}>
+                  <defs>
+                    <linearGradient
+                      id="line-gradient"
+                      x1="20%"
+                      y1="0%"
+                      x2="-14%"
+                      y2="10%"
+                      gradientUnits="userSpaceOnUse"
+                      gradientTransform="rotate(-45)"
+                    >
+                      <stop offset="0%" stop-color="#1488fc" stop-opacity="0%"></stop>
+                      <stop offset="40%" stop-color="#1488fc" stop-opacity="80%"></stop>
+                      <stop offset="50%" stop-color="#1488fc" stop-opacity="80%"></stop>
+                      <stop offset="100%" stop-color="#1488fc" stop-opacity="0%"></stop>
+                    </linearGradient>
+                    <linearGradient id="shine-gradient">
+                      <stop offset="0%" stop-color="white" stop-opacity="0%"></stop>
+                      <stop offset="40%" stop-color="#8adaff" stop-opacity="80%"></stop>
+                      <stop offset="50%" stop-color="#8adaff" stop-opacity="80%"></stop>
+                      <stop offset="100%" stop-color="white" stop-opacity="0%"></stop>
+                    </linearGradient>
+                  </defs>
+                  <rect className={classNames(styles.PromptEffectLine)} pathLength="100" stroke-linecap="round"></rect>
+                  <rect className={classNames(styles.PromptShine)} x="48" y="24" width="70" height="1"></rect>
+                </svg>
                 <ModelSelector
                   key={provider?.name + ':' + modelList.length}
                   model={model}
@@ -219,12 +252,12 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
 
                 <div
                   className={classNames(
-                    'shadow-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background backdrop-filter backdrop-blur-[8px] rounded-lg overflow-hidden transition-all',
+                    'relative shadow-xs border border-bolt-elements-borderColor backdrop-blur rounded-lg',
                   )}
                 >
                   <textarea
                     ref={textareaRef}
-                    className={`w-full pl-4 pt-4 pr-16 focus:outline-none focus:ring-0 focus:border-none focus:shadow-none resize-none text-md text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary bg-transparent transition-all`}
+                    className={`w-full pl-4 pt-4 pr-16 focus:outline-none resize-none text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary bg-transparent text-sm`}
                     onKeyDown={(event) => {
                       if (event.key === 'Enter') {
                         if (event.shiftKey) {
@@ -300,8 +333,16 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
               </div>
             </div>
             {!chatStarted && (
-              <div id="examples" className="relative w-full max-w-xl mx-auto mt-8 flex justify-center">
-                <div className="flex flex-col space-y-2 [mask-image:linear-gradient(to_bottom,black_0%,transparent_180%)] hover:[mask-image:none]">
+              <div
+                id="examples"
+                className="relative flex flex-col gap-9 w-full max-w-3xl mx-auto flex justify-center mt-6"
+              >
+                <div
+                  className="flex flex-wrap justify-center gap-2"
+                  style={{
+                    animation: '.25s ease-out 0s 1 _fade-and-move-in_g2ptj_1 forwards',
+                  }}
+                >
                   {EXAMPLE_PROMPTS.map((examplePrompt, index) => {
                     return (
                       <button
@@ -309,10 +350,10 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                         onClick={(event) => {
                           sendMessage?.(event, examplePrompt.text);
                         }}
-                        className="group flex items-center w-full gap-2 justify-center bg-transparent text-bolt-elements-textTertiary hover:text-bolt-elements-textPrimary transition-theme"
+                        className="border border-bolt-elements-borderColor rounded-full bg-gray-50 hover:bg-gray-100 dark:bg-gray-950 dark:hover:bg-gray-900 text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary px-3 py-1 text-xs transition-theme"
                       >
                         {examplePrompt.text}
-                        <div className="i-ph:arrow-bend-down-left" />
+                        {/* <div className="i-ph:arrow-bend-down-left" /> */}
                       </button>
                     );
                   })}
diff --git a/app/components/header/HeaderActionButtons.client.tsx b/app/components/header/HeaderActionButtons.client.tsx
index dad9a1ab..ac9382d6 100644
--- a/app/components/header/HeaderActionButtons.client.tsx
+++ b/app/components/header/HeaderActionButtons.client.tsx
@@ -19,7 +19,7 @@ export function HeaderActionButtons({}: HeaderActionButtonsProps) {
       <div className="flex border border-bolt-elements-borderColor rounded-md overflow-hidden">
         <Button
           active={showChat}
-          disabled={!canHideChat || isSmallViewport} // expand button is disabled on mobile as it's needed
+          disabled={!canHideChat || isSmallViewport} // expand button is disabled on mobile as it's not needed
           onClick={() => {
             if (canHideChat) {
               chatStore.setKey('showChat', !showChat);

From 2a31ca9b0d373a02f801b057a48ce95ffb3b4c69 Mon Sep 17 00:00:00 2001
From: Qwikode <qwikode@gmail.com>
Date: Thu, 21 Nov 2024 23:42:18 +0200
Subject: [PATCH 2/2] fix(code): remove commented code

---
 app/components/chat/BaseChat.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/components/chat/BaseChat.tsx b/app/components/chat/BaseChat.tsx
index e0ccb682..f095728b 100644
--- a/app/components/chat/BaseChat.tsx
+++ b/app/components/chat/BaseChat.tsx
@@ -353,7 +353,6 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                         className="border border-bolt-elements-borderColor rounded-full bg-gray-50 hover:bg-gray-100 dark:bg-gray-950 dark:hover:bg-gray-900 text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary px-3 py-1 text-xs transition-theme"
                       >
                         {examplePrompt.text}
-                        {/* <div className="i-ph:arrow-bend-down-left" /> */}
                       </button>
                     );
                   })}