From 4761334ef0658b333e1dd4bc122d282fd4bc8d59 Mon Sep 17 00:00:00 2001 From: Himanshu Date: Wed, 23 Apr 2025 12:02:06 +0530 Subject: [PATCH] Fix padding bug in chat and search --- .../integrations/perplexity/perplexitygui.tsx | 247 ++++++++++-------- gui/src/pages/gui.tsx | 1 + 2 files changed, 140 insertions(+), 108 deletions(-) diff --git a/gui/src/integrations/perplexity/perplexitygui.tsx b/gui/src/integrations/perplexity/perplexitygui.tsx index 09ad516ba5..1198f19171 100644 --- a/gui/src/integrations/perplexity/perplexitygui.tsx +++ b/gui/src/integrations/perplexity/perplexitygui.tsx @@ -45,7 +45,7 @@ import { } from "../../pages/gui"; import { CustomTutorialCard } from "@/components/mainInput/CustomTutorialCard"; import { cn } from "@/lib/utils"; -import { Citations } from './Citations'; +import { Citations } from "./Citations"; import { Button } from "@/components/ui/button"; import { HistorySidebar } from "@/components/HistorySidebar"; import styled from "styled-components"; @@ -53,7 +53,6 @@ import { lightGray, vscBackground } from "@/components"; import InventoryDetails from "../../components/InventoryDetails"; import { getLogoPath } from "@/pages/welcome/setup/ImportExtensions"; - const StepsDiv = styled.div` padding-bottom: 8px; position: relative; @@ -80,14 +79,13 @@ const InputContainer = styled.div<{ isNewSession?: boolean }>` padding-bottom: 0.3rem; border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; - position: ${props => props.isNewSession ? 'relative' : 'fixed'}; - bottom: ${props => props.isNewSession ? 'auto' : '0'}; + position: ${(props) => (props.isNewSession ? "relative" : "fixed")}; + bottom: ${(props) => (props.isNewSession ? "auto" : "0")}; left: 0; right: 0; background-color: ${vscBackground}; `; - function PerplexityGUI() { const posthog = usePostHog(); const dispatch = useDispatch(); @@ -262,6 +260,12 @@ function PerplexityGUI() { [state.perplexityHistory], ); + const adjustPadding = useCallback((height: number) => { + if (topGuiDivRef.current) { + topGuiDivRef.current.style.paddingBottom = `${height + 20}px`; + } + }, []); + // force re-render continueInputBox when history changes useEffect(() => { historyKeyRef.current += 1; @@ -274,9 +278,10 @@ function PerplexityGUI() { if (inputContainerRef.current && topGuiDivRef.current) { const scrollTop = topGuiDivRef.current.scrollTop; const height = inputContainerRef.current.offsetHeight; - const newPadding = state.perplexityHistory.length === 0 ? '0px' : `${height + 20}px`; + const newPadding = + state.perplexityHistory.length === 0 ? "0px" : `${height + 20}px`; - topGuiDivRef.current.style.paddingBottom = '0px'; + topGuiDivRef.current.style.paddingBottom = "0px"; topGuiDivRef.current.offsetHeight; // Force reflow topGuiDivRef.current.style.paddingBottom = newPadding; @@ -306,7 +311,7 @@ function PerplexityGUI() { { - setHistorySidebarOpen(false) + setHistorySidebarOpen(false); }} from="perplexity" /> @@ -314,7 +319,7 @@ function PerplexityGUI() {
{/* */} - - +
-
-
PearAI Search
-
Powered by Perplexity
+
+ PearAI Search +
+
+ Powered by Perplexity +
- AI-powered search engine: up-to-date information for docs, libraries, etc. Also good for non-coding specific questions. + AI-powered search engine: up-to-date information for + docs, libraries, etc. Also good for non-coding specific + questions.
-
)} @@ -374,106 +386,126 @@ function PerplexityGUI() { FallbackComponent={fallbackRender} onReset={() => { dispatch( - newSession({ session: undefined, source: "perplexity" }), + newSession({ + session: undefined, + source: "perplexity", + }), ); }} > - {item.message.role === "user" ? ( -
-
- { - streamResponse( - editorState, - modifiers, - ideMessenger, - index, - "perplexity", - ); - }} - isLastUserInput={isLastUserInput(index)} - isMainInput={false} - editorState={item.editorState} - contextItems={item.contextItems} - source="perplexity" - /> +
+ {item.message.role === "user" ? ( +
+
+ { + streamResponse( + editorState, + modifiers, + ideMessenger, + index, + "perplexity", + ); + }} + isLastUserInput={isLastUserInput(index)} + isMainInput={false} + editorState={item.editorState} + contextItems={item.contextItems} + source="perplexity" + /> +
-
- ) : ( -
- - } - open={ - typeof stepsOpen[index] === "undefined" - ? true - : stepsOpen[index]! - } - onToggle={() => { }} - > - {item.citations && - } - + } - isFirst={index === 0} open={ typeof stepsOpen[index] === "undefined" ? true : stepsOpen[index]! } - key={index} - onUserInput={(input: string) => { }} - item={item} - onReverse={() => { }} - onRetry={() => { - streamResponse( - state.perplexityHistory[index - 1].editorState, - state.perplexityHistory[index - 1].modifiers ?? - defaultInputModifiers, - ideMessenger, - index - 1, - "perplexity", - ); - }} - onContinueGeneration={() => { - window.postMessage( - { - messageType: "userInput", - data: { - input: "Keep going.", + onToggle={() => { }} + > + {item.citations && ( + + )} + { }} + item={item} + onReverse={() => { }} + onRetry={() => { + streamResponse( + state.perplexityHistory[index - 1] + .editorState, + state.perplexityHistory[index - 1] + .modifiers ?? defaultInputModifiers, + ideMessenger, + index - 1, + "perplexity", + ); + }} + onContinueGeneration={() => { + window.postMessage( + { + messageType: "userInput", + data: { + input: "Keep going.", + }, }, - }, - "*", - ); - }} - onDelete={() => { - dispatch( - deleteMessage({ - index: index, - source: "perplexity", - }), - ); - }} - modelTitle={ - item.promptLogs?.[0]?.completionOptions?.model ?? "" - } - source="perplexity" - /> - -
- )} + "*", + ); + }} + onDelete={() => { + dispatch( + deleteMessage({ + index: index, + source: "perplexity", + }), + ); + }} + modelTitle={ + item.promptLogs?.[0]?.completionOptions + ?.model ?? "" + } + source="perplexity" + /> + +
+ )} +
))} @@ -503,9 +535,8 @@ function PerplexityGUI() { isMainInput={true} hidden={active} source="perplexity" - className={cn( - state.perplexityHistory.length === 0 && "shadow-lg" - )} + onHeightChange={adjustPadding} + className={cn(state.perplexityHistory.length === 0 && "shadow-lg")} /> )} diff --git a/gui/src/pages/gui.tsx b/gui/src/pages/gui.tsx index 74cd572c5c..e1c66bbef7 100644 --- a/gui/src/pages/gui.tsx +++ b/gui/src/pages/gui.tsx @@ -402,6 +402,7 @@ function GUI() { >
{item.message.role === "user" ? (