Skip to content

Commit 29edcb4

Browse files
Himanshu-Singh-ChauhanHimanshu-Singh-Chauhan
authored
Fix padding bug in chat and search (#301)
1 parent 5a1ffd4 commit 29edcb4

2 files changed

Lines changed: 140 additions & 108 deletions

File tree

‎gui/src/integrations/perplexity/perplexitygui.tsx‎

Lines changed: 139 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -45,15 +45,14 @@ import {
4545
} from "../../pages/gui";
4646
import { CustomTutorialCard } from "@/components/mainInput/CustomTutorialCard";
4747
import { cn } from "@/lib/utils";
48-
import { Citations } from './Citations';
48+
import { Citations } from "./Citations";
4949
import { Button } from "@/components/ui/button";
5050
import { HistorySidebar } from "@/components/HistorySidebar";
5151
import styled from "styled-components";
5252
import { lightGray, vscBackground } from "@/components";
5353
import InventoryDetails from "../../components/InventoryDetails";
5454
import { getLogoPath } from "@/pages/welcome/setup/ImportExtensions";
5555

56-
5756
const StepsDiv = styled.div`
5857
padding-bottom: 8px;
5958
position: relative;
@@ -80,14 +79,13 @@ const InputContainer = styled.div<{ isNewSession?: boolean }>`
8079
padding-bottom: 0.3rem;
8180
border-top-left-radius: 0.5rem;
8281
border-top-right-radius: 0.5rem;
83-
position: ${props => props.isNewSession ? 'relative' : 'fixed'};
84-
bottom: ${props => props.isNewSession ? 'auto' : '0'};
82+
position: ${(props) => (props.isNewSession ? "relative" : "fixed")};
83+
bottom: ${(props) => (props.isNewSession ? "auto" : "0")};
8584
left: 0;
8685
right: 0;
8786
background-color: ${vscBackground};
8887
`;
8988

90-
9189
function PerplexityGUI() {
9290
const posthog = usePostHog();
9391
const dispatch = useDispatch();
@@ -262,6 +260,12 @@ function PerplexityGUI() {
262260
[state.perplexityHistory],
263261
);
264262

263+
const adjustPadding = useCallback((height: number) => {
264+
if (topGuiDivRef.current) {
265+
topGuiDivRef.current.style.paddingBottom = `${height + 20}px`;
266+
}
267+
}, []);
268+
265269
// force re-render continueInputBox when history changes
266270
useEffect(() => {
267271
historyKeyRef.current += 1;
@@ -274,9 +278,10 @@ function PerplexityGUI() {
274278
if (inputContainerRef.current && topGuiDivRef.current) {
275279
const scrollTop = topGuiDivRef.current.scrollTop;
276280
const height = inputContainerRef.current.offsetHeight;
277-
const newPadding = state.perplexityHistory.length === 0 ? '0px' : `${height + 20}px`;
281+
const newPadding =
282+
state.perplexityHistory.length === 0 ? "0px" : `${height + 20}px`;
278283

279-
topGuiDivRef.current.style.paddingBottom = '0px';
284+
topGuiDivRef.current.style.paddingBottom = "0px";
280285
topGuiDivRef.current.offsetHeight; // Force reflow
281286
topGuiDivRef.current.style.paddingBottom = newPadding;
282287

@@ -306,15 +311,15 @@ function PerplexityGUI() {
306311
<HistorySidebar
307312
isOpen={historySidebarOpen}
308313
onClose={() => {
309-
setHistorySidebarOpen(false)
314+
setHistorySidebarOpen(false);
310315
}}
311316
from="perplexity"
312317
/>
313318

314319
<div
315320
className={cn(
316321
"flex-1 flex flex-col min-w-0",
317-
historySidebarOpen ? "mr-72" : "mr-0"
322+
historySidebarOpen ? "mr-72" : "mr-0",
318323
)}
319324
>
320325
{/* <Button
@@ -333,8 +338,11 @@ function PerplexityGUI() {
333338
</>
334339
)}
335340
</Button> */}
336-
<TopGuiDiv ref={topGuiDivRef} onScroll={handleScroll} isNewSession={state.history.length === 0}>
337-
341+
<TopGuiDiv
342+
ref={topGuiDivRef}
343+
onScroll={handleScroll}
344+
isNewSession={state.history.length === 0}
345+
>
338346
<div
339347
className={cn(
340348
"",
@@ -345,7 +353,6 @@ function PerplexityGUI() {
345353
{state.perplexityHistory.length === 0 && (
346354
<div className="max-w-2xl mx-auto w-full h-[calc(100vh-210px)] text-center flex flex-col justify-center">
347355
<div className="w-full h-[700px] text-center flex flex-col items-center justify-center relative gap-5">
348-
349356
<div className="flex-1 flex absolute bottom-[260px] items-center justify-center">
350357
<img
351358
src={getLogoPath("pearai-search-splash.svg")}
@@ -355,14 +362,19 @@ function PerplexityGUI() {
355362

356363
<div className="w-[300px] h-[240px] absolute bottom-0 overflow-hidden flex-col justify-start items-start gap-5 inline-flex">
357364
<div className="flex flex-col text-left">
358-
<div className="text-2xl font-['SF Pro']">PearAI Search</div>
359-
<div className="h-[18px] opacity-50 text-xs font-normal font-['SF Pro'] leading-[18px]">Powered by Perplexity</div>
365+
<div className="text-2xl font-['SF Pro']">
366+
PearAI Search
367+
</div>
368+
<div className="h-[18px] opacity-50 text-xs font-normal font-['SF Pro'] leading-[18px]">
369+
Powered by Perplexity
370+
</div>
360371
</div>
361372
<div className="w-[300px] h-[100px] overflow-hidden text-left opacity-50 text-xs font-normal font-['SF Pro'] leading-[18px]">
362-
AI-powered search engine: up-to-date information for docs, libraries, etc. Also good for non-coding specific questions.
373+
AI-powered search engine: up-to-date information for
374+
docs, libraries, etc. Also good for non-coding specific
375+
questions.
363376
</div>
364377
</div>
365-
366378
</div>
367379
</div>
368380
)}
@@ -374,106 +386,126 @@ function PerplexityGUI() {
374386
FallbackComponent={fallbackRender}
375387
onReset={() => {
376388
dispatch(
377-
newSession({ session: undefined, source: "perplexity" }),
389+
newSession({
390+
session: undefined,
391+
source: "perplexity",
392+
}),
378393
);
379394
}}
380395
>
381-
{item.message.role === "user" ? (
382-
<div className="max-w-3xl mx-auto">
383-
<div className="max-w-96 ml-auto px-2">
384-
<ContinueInputBox
385-
key={historyKeyRef.current}
386-
onEnter={async (editorState, modifiers) => {
387-
streamResponse(
388-
editorState,
389-
modifiers,
390-
ideMessenger,
391-
index,
392-
"perplexity",
393-
);
394-
}}
395-
isLastUserInput={isLastUserInput(index)}
396-
isMainInput={false}
397-
editorState={item.editorState}
398-
contextItems={item.contextItems}
399-
source="perplexity"
400-
/>
396+
<div
397+
style={{
398+
minHeight:
399+
index === state.history.length - 1 ? "50vh" : 0,
400+
paddingBottom:
401+
index === state.history.length - 1 ? "10vh" : 0,
402+
}}
403+
>
404+
{item.message.role === "user" ? (
405+
<div className="max-w-3xl mx-auto">
406+
<div className="max-w-96 ml-auto px-2">
407+
<ContinueInputBox
408+
key={historyKeyRef.current}
409+
onEnter={async (editorState, modifiers) => {
410+
streamResponse(
411+
editorState,
412+
modifiers,
413+
ideMessenger,
414+
index,
415+
"perplexity",
416+
);
417+
}}
418+
isLastUserInput={isLastUserInput(index)}
419+
isMainInput={false}
420+
editorState={item.editorState}
421+
contextItems={item.contextItems}
422+
source="perplexity"
423+
/>
424+
</div>
401425
</div>
402-
</div>
403-
) : (
404-
<div className="thread-message">
405-
<TimelineItem
406-
item={item}
407-
iconElement={
408-
<ChatBubbleOvalLeftIcon width="16px" height="16px" />
409-
}
410-
open={
411-
typeof stepsOpen[index] === "undefined"
412-
? true
413-
: stepsOpen[index]!
414-
}
415-
onToggle={() => { }}
416-
>
417-
{item.citations &&
418-
<Citations
419-
citations={item.citations}
420-
isLast={
421-
index === sessionState.perplexityHistory.length - 1
422-
}
423-
active={active}
424-
/>}
425-
<StepContainer
426-
index={index}
427-
isLast={
428-
index === sessionState.perplexityHistory.length - 1
426+
) : (
427+
<div className="thread-message">
428+
<TimelineItem
429+
item={item}
430+
iconElement={
431+
<ChatBubbleOvalLeftIcon
432+
width="16px"
433+
height="16px"
434+
/>
429435
}
430-
isFirst={index === 0}
431436
open={
432437
typeof stepsOpen[index] === "undefined"
433438
? true
434439
: stepsOpen[index]!
435440
}
436-
key={index}
437-
onUserInput={(input: string) => { }}
438-
item={item}
439-
onReverse={() => { }}
440-
onRetry={() => {
441-
streamResponse(
442-
state.perplexityHistory[index - 1].editorState,
443-
state.perplexityHistory[index - 1].modifiers ??
444-
defaultInputModifiers,
445-
ideMessenger,
446-
index - 1,
447-
"perplexity",
448-
);
449-
}}
450-
onContinueGeneration={() => {
451-
window.postMessage(
452-
{
453-
messageType: "userInput",
454-
data: {
455-
input: "Keep going.",
441+
onToggle={() => { }}
442+
>
443+
{item.citations && (
444+
<Citations
445+
citations={item.citations}
446+
isLast={
447+
index ===
448+
sessionState.perplexityHistory.length - 1
449+
}
450+
active={active}
451+
/>
452+
)}
453+
<StepContainer
454+
index={index}
455+
isLast={
456+
index ===
457+
sessionState.perplexityHistory.length - 1
458+
}
459+
isFirst={index === 0}
460+
open={
461+
typeof stepsOpen[index] === "undefined"
462+
? true
463+
: stepsOpen[index]!
464+
}
465+
key={index}
466+
onUserInput={(input: string) => { }}
467+
item={item}
468+
onReverse={() => { }}
469+
onRetry={() => {
470+
streamResponse(
471+
state.perplexityHistory[index - 1]
472+
.editorState,
473+
state.perplexityHistory[index - 1]
474+
.modifiers ?? defaultInputModifiers,
475+
ideMessenger,
476+
index - 1,
477+
"perplexity",
478+
);
479+
}}
480+
onContinueGeneration={() => {
481+
window.postMessage(
482+
{
483+
messageType: "userInput",
484+
data: {
485+
input: "Keep going.",
486+
},
456487
},
457-
},
458-
"*",
459-
);
460-
}}
461-
onDelete={() => {
462-
dispatch(
463-
deleteMessage({
464-
index: index,
465-
source: "perplexity",
466-
}),
467-
);
468-
}}
469-
modelTitle={
470-
item.promptLogs?.[0]?.completionOptions?.model ?? ""
471-
}
472-
source="perplexity"
473-
/>
474-
</TimelineItem>
475-
</div>
476-
)}
488+
"*",
489+
);
490+
}}
491+
onDelete={() => {
492+
dispatch(
493+
deleteMessage({
494+
index: index,
495+
source: "perplexity",
496+
}),
497+
);
498+
}}
499+
modelTitle={
500+
item.promptLogs?.[0]?.completionOptions
501+
?.model ?? ""
502+
}
503+
source="perplexity"
504+
/>
505+
</TimelineItem>
506+
</div>
507+
)}
508+
</div>
477509
</ErrorBoundary>
478510
</Fragment>
479511
))}
@@ -503,9 +535,8 @@ function PerplexityGUI() {
503535
isMainInput={true}
504536
hidden={active}
505537
source="perplexity"
506-
className={cn(
507-
state.perplexityHistory.length === 0 && "shadow-lg"
508-
)}
538+
onHeightChange={adjustPadding}
539+
className={cn(state.perplexityHistory.length === 0 && "shadow-lg")}
509540
/>
510541
</InputContainer>
511542
)}

‎gui/src/pages/gui.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -402,6 +402,7 @@ function GUI() {
402402
>
403403
<div style={{
404404
minHeight: index === state.history.length - 1 ? "50vh" : 0,
405+
paddingBottom: index === state.history.length - 1 ? "10vh" : 0,
405406
}}>
406407
{item.message.role === "user" ? (
407408
<div className="max-w-3xl mx-auto">

0 commit comments

Comments
 (0)