From 394d1439c17350db3b5f19c6f691dad7ed3b503b Mon Sep 17 00:00:00 2001 From: SujalXplores Date: Wed, 27 Nov 2024 00:17:00 +0530 Subject: [PATCH 1/7] feat: prompt caching --- app/components/chat/Chat.client.tsx | 32 ++++++++++++++++++++++++++--- app/utils/constants.ts | 1 + 2 files changed, 30 insertions(+), 3 deletions(-) diff --git a/app/components/chat/Chat.client.tsx b/app/components/chat/Chat.client.tsx index 9841820..6cbd962 100644 --- a/app/components/chat/Chat.client.tsx +++ b/app/components/chat/Chat.client.tsx @@ -6,19 +6,20 @@ import { useStore } from '@nanostores/react'; import type { Message } from 'ai'; import { useChat } from 'ai/react'; import { useAnimate } from 'framer-motion'; -import { memo, useEffect, useRef, useState } from 'react'; +import { memo, useCallback, useEffect, useRef, useState } from 'react'; import { cssTransition, toast, ToastContainer } from 'react-toastify'; import { useMessageParser, usePromptEnhancer, useShortcuts, useSnapScroll } from '~/lib/hooks'; import { description, useChatHistory } from '~/lib/persistence'; import { chatStore } from '~/lib/stores/chat'; import { workbenchStore } from '~/lib/stores/workbench'; import { fileModificationsToHTML } from '~/utils/diff'; -import { DEFAULT_MODEL, DEFAULT_PROVIDER, PROVIDER_LIST } from '~/utils/constants'; +import { DEFAULT_MODEL, DEFAULT_PROVIDER, PROMPT_COOKIE_KEY, PROVIDER_LIST } from '~/utils/constants'; import { cubicEasingFn } from '~/utils/easings'; import { createScopedLogger, renderLogger } from '~/utils/logger'; import { BaseChat } from './BaseChat'; import Cookies from 'js-cookie'; import type { ProviderInfo } from '~/utils/types'; +import { debounce } from '~/utils/debounce'; const toastAnimation = cssTransition({ enter: 'animated fadeInRight', @@ -120,6 +121,7 @@ export const ChatImpl = memo( logger.debug('Finished streaming'); }, initialMessages, + initialInput: Cookies.get(PROMPT_COOKIE_KEY) || '', }); const { enhancingPrompt, promptEnhanced, enhancePrompt, resetEnhancer } = usePromptEnhancer(); @@ -225,12 +227,33 @@ export const ChatImpl = memo( } setInput(''); + Cookies.remove(PROMPT_COOKIE_KEY); resetEnhancer(); textareaRef.current?.blur(); }; + /** + * Handles the change event for the textarea and updates the input state. + * @param event - The change event from the textarea. + */ + const onTextareaChange = (event: React.ChangeEvent) => { + handleInputChange(event); + }; + + /** + * Debounced function to cache the prompt in cookies. + * Caches the trimmed value of the textarea input after a delay to optimize performance. + */ + const debouncedCachePrompt = useCallback( + debounce((event: React.ChangeEvent) => { + const trimmedValue = event.target.value.trim(); + Cookies.set(PROMPT_COOKIE_KEY, trimmedValue, { expires: 30 }); + }, 1000), + [], + ); + const [messageRef, scrollRef] = useSnapScroll(); useEffect(() => { @@ -268,7 +291,10 @@ export const ChatImpl = memo( setProvider={handleProviderChange} messageRef={messageRef} scrollRef={scrollRef} - handleInputChange={handleInputChange} + handleInputChange={(e) => { + onTextareaChange(e); + debouncedCachePrompt(e); + }} handleStop={abort} description={description} importChat={importChat} diff --git a/app/utils/constants.ts b/app/utils/constants.ts index 17fe9d8..d5d1efb 100644 --- a/app/utils/constants.ts +++ b/app/utils/constants.ts @@ -7,6 +7,7 @@ export const MODIFICATIONS_TAG_NAME = 'bolt_file_modifications'; export const MODEL_REGEX = /^\[Model: (.*?)\]\n\n/; export const PROVIDER_REGEX = /\[Provider: (.*?)\]\n\n/; export const DEFAULT_MODEL = 'claude-3-5-sonnet-latest'; +export const PROMPT_COOKIE_KEY = 'cachedPrompt'; const PROVIDER_LIST: ProviderInfo[] = [ { From 62bdbc416cfcf6b3a3530e8891abc24e4f7dbe76 Mon Sep 17 00:00:00 2001 From: SujalXplores Date: Wed, 27 Nov 2024 00:21:57 +0530 Subject: [PATCH 2/7] chore(doc): add prompt caching to README --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 0127dd0..b07a01f 100644 --- a/README.md +++ b/README.md @@ -31,6 +31,7 @@ https://thinktank.ottomator.ai - ✅ Ability to revert code to earlier version (@wonderwhy-er) - ✅ Cohere Integration (@hasanraiyan) - ✅ Dynamic model max token length (@hasanraiyan) +- ✅ Prompt caching (@SujalXplores) - ⬜ **HIGH PRIORITY** - Prevent Bolt from rewriting files as often (file locking and diffs) - ⬜ **HIGH PRIORITY** - Better prompting for smaller LLMs (code window sometimes doesn't start) - ⬜ **HIGH PRIORITY** - Load local projects into the app @@ -42,7 +43,6 @@ https://thinktank.ottomator.ai - ⬜ Perplexity Integration - ⬜ Vertex AI Integration - ⬜ Deploy directly to Vercel/Netlify/other similar platforms -- ⬜ Prompt caching - ⬜ Better prompt enhancing - ⬜ Have LLM plan the project in a MD file for better results/transparency - ⬜ VSCode Integration with git-like confirmations From a35e4935186b467f9e2d31dea7ab84cd2c35e524 Mon Sep 17 00:00:00 2001 From: Dustin Loring Date: Sun, 1 Dec 2024 07:34:26 -0500 Subject: [PATCH 3/7] Update BaseChat.module.scss added ray to styles --- app/components/chat/BaseChat.module.scss | 104 +++++++++++++++++++++++ 1 file changed, 104 insertions(+) diff --git a/app/components/chat/BaseChat.module.scss b/app/components/chat/BaseChat.module.scss index 3d6ed4c..cf530a1 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; +} From d85dff6f275a8d7a26971b42b60450073058aa6f Mon Sep 17 00:00:00 2001 From: Dustin Loring Date: Sun, 1 Dec 2024 07:41:23 -0500 Subject: [PATCH 4/7] Update BaseChat.tsx Added ray --- app/components/chat/BaseChat.tsx | 37 ++++++++++++++++++++++++++++++-- 1 file changed, 35 insertions(+), 2 deletions(-) diff --git a/app/components/chat/BaseChat.tsx b/app/components/chat/BaseChat.tsx index dc6aecc..2acfea7 100644 --- a/app/components/chat/BaseChat.tsx +++ b/app/components/chat/BaseChat.tsx @@ -167,6 +167,13 @@ export const BaseChat = React.forwardRef( )} data-chat-visible={showChat} > +
+
+
+
+
+
+
{() => }
@@ -205,6 +212,32 @@ export const BaseChat = React.forwardRef( }, )} > + + + + + + + + + + + + + + + + + + (