Skip to content

Commit a91c06d

Browse files
gregnrgregnr
committed
feat: live share faqs
1 parent 1b4c7ac commit a91c06d

File tree

2 files changed

+229
-124
lines changed

2 files changed

+229
-124
lines changed

‎apps/postgres-new/components/chat.tsx‎

Lines changed: 109 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,11 @@ import { cn } from '~/lib/utils'
2323
import { AiIconAnimation } from './ai-icon-animation'
2424
import { useApp } from './app-provider'
2525
import ChatMessage from './chat-message'
26-
import SignInButton from './sign-in-button'
27-
import { useWorkspace } from './workspace'
2826
import { CopyableField } from './copyable-field'
27+
import SignInButton from './sign-in-button'
28+
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './ui/accordion'
2929
import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs'
30+
import { useWorkspace } from './workspace'
3031

3132
export function getInitialMessages(tables: TablesData): Message[] {
3233
return [
@@ -538,8 +539,8 @@ function LiveShareOverlay(props: { databaseId: string }) {
538539

539540
if (liveShare.isLiveSharing && liveShare.databaseId === props.databaseId) {
540541
return (
541-
<div className="h-full w-full max-w-4xl flex flex-col gap-10 p-10 absolute backdrop-blur-sm bg-card/90 z-10">
542-
<div className="flex items-center justify-center h-full flex-col gap-y-7">
542+
<div className="h-full w-full max-w-4xl absolute flex flex-col items-stretch justify-center backdrop-blur-sm bg-card/90 z-10">
543+
<div className="flex flex-col items-center justify-start gap-y-7 overflow-y-auto pt-20 pb-10">
543544
<div className="w-full text-left">
544545
<p className="text-lg">Access your in-browser database</p>
545546
<p className="text-xs text-muted-foreground">
@@ -599,6 +600,110 @@ function LiveShareOverlay(props: { databaseId: string }) {
599600
<PlugIcon size={16} />
600601
<span>Stop sharing database</span>
601602
</Button>
603+
604+
<div className="self-stretch border-b border-b-foreground/15 my-4" />
605+
606+
<Accordion type="single" collapsible className="self-stretch flex flex-col gap-2">
607+
<AccordionItem value="postgres-clients" className="border rounded-md">
608+
<AccordionTrigger className="p-0 gap-2 px-3 py-2">
609+
<div className="flex gap-2 items-center font-normal text-lighter text-sm">
610+
<span>Can I connect using any Postgres client?</span>
611+
</div>
612+
</AccordionTrigger>
613+
<AccordionContent className="p-3 prose prose-sm">
614+
<p>
615+
Yes! Any standard Postgres client that communicates using the Postgres wire
616+
protocol is supported. Connections are established over an encrypted TLS channel
617+
using the SNI extension, so your client will also need to support TLS with SNI
618+
(most modern clients support this).
619+
</p>
620+
</AccordionContent>
621+
</AccordionItem>
622+
<AccordionItem value="concurrent-connections" className="border rounded-md">
623+
<AccordionTrigger className="p-0 gap-2 px-3 py-2">
624+
<div className="flex gap-2 items-center font-normal text-lighter text-sm">
625+
<span>How many concurrent connections can I have?</span>
626+
</div>
627+
</AccordionTrigger>
628+
<AccordionContent className="p-3 prose prose-sm">
629+
<p>
630+
PGlite operates in single-user mode, so you can only establish one connection at a
631+
time per database. If you attempt to establish more than one connection using the
632+
Live Share connection string, you will receive a "too many clients" error.
633+
</p>
634+
</AccordionContent>
635+
</AccordionItem>
636+
<AccordionItem value="orms" className="border rounded-md">
637+
<AccordionTrigger className="p-0 gap-2 px-3 py-2">
638+
<div className="flex gap-2 items-center font-normal text-lighter text-sm">
639+
<span>Does this work with ORMs?</span>
640+
</div>
641+
</AccordionTrigger>
642+
<AccordionContent className="p-3 prose prose-sm">
643+
<p>
644+
Yes, as long as your ORM doesn&apos;t require multiple concurrent connections.
645+
Some ORMs like Prisma run a shadow database in parallel to your main database in
646+
order to generate migrations. In order to use Prisma, you will need to{' '}
647+
<a
648+
href="https://www.prisma.io/docs/orm/prisma-migrate/understanding-prisma-migrate/shadow-database#manually-configuring-the-shadow-database"
649+
target="__blank"
650+
rel="noopener noreferrer"
651+
>
652+
manually configure
653+
</a>{' '}
654+
your shadow database to point to another temporary database.
655+
</p>
656+
</AccordionContent>
657+
</AccordionItem>
658+
<AccordionItem value="connection-length" className="border rounded-md">
659+
<AccordionTrigger className="p-0 gap-2 px-3 py-2">
660+
<div className="flex gap-2 items-center font-normal text-lighter text-sm">
661+
<span>How long will connections last?</span>
662+
</div>
663+
</AccordionTrigger>
664+
<AccordionContent className="p-3 prose prose-sm">
665+
<p>
666+
You can connect over Live Share for as long as your browser tab is active. Once
667+
your tab is closed, the any existing connection will terminate and you will no
668+
longer be able to connect to your database using the connection string.
669+
</p>
670+
<p>
671+
To prevent overloading the system, we also enforce a 5 minute idle timeout per
672+
client connection and 1 hour total timeout per database. If you need to
673+
communicate longer than these limits, simply reconnect after the timeout.
674+
</p>
675+
</AccordionContent>
676+
</AccordionItem>
677+
<AccordionItem value="under-the-hood" className="border rounded-md">
678+
<AccordionTrigger className="p-0 gap-2 px-3 py-2">
679+
<div className="flex gap-2 items-center font-normal text-lighter text-sm">
680+
<span>How does this work under the hood?</span>
681+
</div>
682+
</AccordionTrigger>
683+
<AccordionContent className="p-3 prose prose-sm">
684+
<p>
685+
We host a{' '}
686+
<a
687+
href="https://github.com/supabase-community/postgres-new/tree/main/apps/browser-proxy"
688+
target="__blank"
689+
rel="noopener noreferrer"
690+
>
691+
lightweight proxy
692+
</a>{' '}
693+
between your Postgres client and your in-browser PGlite database. It uses{' '}
694+
<a
695+
href="https://github.com/supabase-community/pg-gateway"
696+
target="__blank"
697+
rel="noopener noreferrer"
698+
>
699+
pg-gateway
700+
</a>{' '}
701+
to proxy inbound TCP connections to the corresponding browser instance via a Web
702+
Socket reverse tunnel.
703+
</p>
704+
</AccordionContent>
705+
</AccordionItem>
706+
</Accordion>
602707
</div>
603708
</div>
604709
)

‎package-lock.json‎

Lines changed: 120 additions & 120 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)