refactor(chat): move ScrollToBottom function outside BaseChat component
Improve code maintainability by relocating the ScrollToBottom function outside the BaseChat component. This reduces complexity and enhances readability.
This commit is contained in:
@@ -217,22 +217,6 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
|
||||
}
|
||||
}, [providerList, provider]);
|
||||
|
||||
function ScrollToBottom() {
|
||||
const { isAtBottom, scrollToBottom } = useStickToBottomContext();
|
||||
|
||||
return (
|
||||
!isAtBottom && (
|
||||
<button
|
||||
className="absolute z-50 top-[50%] translate-y-[-60%] text-4xl rounded-lg left-[50%] translate-x-[-50%] px-1.5 py-0.5 flex items-center gap-2 bg-bolt-elements-background-depth-3 border border-bolt-elements-borderColor text-bolt-elements-textPrimary text-sm"
|
||||
onClick={() => scrollToBottom()}
|
||||
>
|
||||
Go to last message
|
||||
<span className="i-ph:arrow-down animate-bounce" />
|
||||
</button>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
const onApiKeysChange = async (providerName: string, apiKey: string) => {
|
||||
const newApiKeys = { ...apiKeys, [providerName]: apiKey };
|
||||
setApiKeys(newApiKeys);
|
||||
@@ -695,3 +679,19 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
|
||||
return <Tooltip.Provider delayDuration={200}>{baseChat}</Tooltip.Provider>;
|
||||
},
|
||||
);
|
||||
|
||||
function ScrollToBottom() {
|
||||
const { isAtBottom, scrollToBottom } = useStickToBottomContext();
|
||||
|
||||
return (
|
||||
!isAtBottom && (
|
||||
<button
|
||||
className="absolute z-50 top-[50%] translate-y-[-60%] text-4xl rounded-lg left-[50%] translate-x-[-50%] px-1.5 py-0.5 flex items-center gap-2 bg-bolt-elements-background-depth-3 border border-bolt-elements-borderColor text-bolt-elements-textPrimary text-sm"
|
||||
onClick={() => scrollToBottom()}
|
||||
>
|
||||
Go to last message
|
||||
<span className="i-ph:arrow-down animate-bounce" />
|
||||
</button>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@@ -397,7 +397,7 @@ You are Bolt, an expert AI assistant and exceptional senior software developer w
|
||||
- Use premium typography with refined hierarchy and spacing.
|
||||
- Incorporate microbranding (custom icons, buttons, animations) aligned with the brand voice.
|
||||
- Use high-quality, optimized visual assets (photos, illustrations, icons).
|
||||
- Unless specified by the user, Bolt ALWAYS uses stock photos from Pexels where appropriate, only valid URLs you know exist. Bolt NEVER downloads the images and only links to them in image tags.
|
||||
- IMPORTANT: Unless specified by the user, Bolt ALWAYS uses stock photos from Pexels where appropriate, only valid URLs you know exist. Bolt NEVER downloads the images and only links to them in image tags.
|
||||
|
||||
Layout & Structure:
|
||||
- Implement a systemized spacing/sizing system (e.g., 8pt grid, design tokens).
|
||||
@@ -492,9 +492,6 @@ ULTRA IMPORTANT: Think first and reply with the artifact that contains all neces
|
||||
- Include all possible interactions (e.g., buttons, links, etc.)
|
||||
- Include all possible navigation states (e.g., back, forward, etc.)
|
||||
|
||||
8. For photos:
|
||||
- Unless specified by the user, Bolt ALWAYS uses stock photos from Pexels where appropriate, only valid URLs you know exist. Bolt NEVER downloads the images and only links to them in image tags.
|
||||
|
||||
EXPO CONFIGURATION:
|
||||
|
||||
1. Define app configuration in app.json:
|
||||
|
||||
Reference in New Issue
Block a user