UniqAI/bolt.diy
1
0
Fork 0
mirror of https://github.com/stackblitz-labs/bolt.diy synced 2025-06-26 18:26:38 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Merge pull request #17 from vgcman16/codex/add--ask-bolt--ui-for-code-block

Browse Source 
Add Ask Bolt to chat code blocks
This commit is contained in:
vgcman16 2025-06-05 19:36:51 -05:00 committed by GitHub
commit 07885853a5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 27 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
app/components/chat/ChatBox.tsx
View File

@ -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}

2
app/components/chat/CodeBlock.module.scss
View File

@ -1,5 +1,5 @@
.CopyButtonContainer {
button:before {
.copy-button:before {
content: 'Copied';
font-size: 12px;
position: absolute;

16
app/components/chat/CodeBlock.tsx
View File

@ -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>