From abdd4eb13587787a64bff32c4c60edd7cc42d7f1 Mon Sep 17 00:00:00 2001
From: vgcman16 <155417613+vgcman16@users.noreply.github.com>
Date: Thu, 5 Jun 2025 19:36:40 -0500
Subject: [PATCH] feat(chat): add ask bolt action for code blocks

---
 app/components/chat/ChatBox.tsx           | 13 ++++++++++++-
 app/components/chat/CodeBlock.module.scss |  2 +-
 app/components/chat/CodeBlock.tsx         | 16 ++++++++++++++--
 3 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/app/components/chat/ChatBox.tsx b/app/components/chat/ChatBox.tsx
index 3eaab0cd..70f23899 100644
--- a/app/components/chat/ChatBox.tsx
+++ b/app/components/chat/ChatBox.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { ClientOnly } from 'remix-utils/client-only';
 import { classNames } from '~/utils/classNames';
 import { PROVIDER_LIST } from '~/utils/constants';
@@ -69,6 +69,17 @@ interface ChatBoxProps {
 }
 
 export const ChatBox: React.FC<ChatBoxProps> = (props) => {
+  useEffect(() => {
+    (window as any).__BOLT_ASK_SNIPPET__ = (code: string, lang: string) => {
+      const message = `*What does this code do?*\n\`\`\`${lang || 'plaintext'}\n${code}\n\`\`\`\n`;
+      props.handleSendMessage?.({} as any, message);
+    };
+
+    return () => {
+      delete (window as any).__BOLT_ASK_SNIPPET__;
+    };
+  }, [props.handleSendMessage]);
+
   return (
     <div
       data-prompt-enhanced={props.promptEnhanced}
diff --git a/app/components/chat/CodeBlock.module.scss b/app/components/chat/CodeBlock.module.scss
index 3f817a97..f07f40dc 100644
--- a/app/components/chat/CodeBlock.module.scss
+++ b/app/components/chat/CodeBlock.module.scss
@@ -1,5 +1,5 @@
 .CopyButtonContainer {
-  button:before {
+  .copy-button:before {
     content: 'Copied';
     font-size: 12px;
     position: absolute;
diff --git a/app/components/chat/CodeBlock.tsx b/app/components/chat/CodeBlock.tsx
index e6b09f06..2dc7c108 100644
--- a/app/components/chat/CodeBlock.tsx
+++ b/app/components/chat/CodeBlock.tsx
@@ -56,7 +56,7 @@ export const CodeBlock = memo(
         <div
           className={classNames(
             styles.CopyButtonContainer,
-            'bg-transparant absolute top-[10px] right-[10px] rounded-md z-10 text-lg flex items-center justify-center opacity-0 group-hover:opacity-100',
+            'bg-transparant absolute top-[10px] right-[10px] rounded-md z-10 text-lg flex items-center justify-center gap-1 opacity-0 group-hover:opacity-100',
             {
               'rounded-l-0 opacity-100': copied,
             },
@@ -65,7 +65,7 @@ export const CodeBlock = memo(
           {!disableCopy && (
             <button
               className={classNames(
-                'flex items-center bg-accent-500 p-[6px] justify-center before:bg-white before:rounded-l-md before:text-gray-500 before:border-r before:border-gray-300 rounded-md transition-theme',
+                'copy-button flex items-center bg-accent-500 p-[6px] justify-center before:bg-white before:rounded-l-md before:text-gray-500 before:border-r before:border-gray-300 rounded-md transition-theme',
                 {
                   'before:opacity-0': !copied,
                   'before:opacity-100': copied,
@@ -77,6 +77,18 @@ export const CodeBlock = memo(
               <div className="i-ph:clipboard-text-duotone"></div>
             </button>
           )}
+          <button
+            className="flex items-center bg-accent-500 p-[6px] justify-center rounded-md transition-theme"
+            title="Ask Bolt about this code"
+            onClick={() => {
+              const askFn = (window as any).__BOLT_ASK_SNIPPET__;
+              if (typeof askFn === 'function') {
+                askFn(code, language);
+              }
+            }}
+          >
+            <div className="i-ph:chat-circle-duotone"></div>
+          </button>
         </div>
         <div dangerouslySetInnerHTML={{ __html: html ?? '' }}></div>
       </div>