Skip to content

Live share FAQs #111

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Oct 8, 2024
Merged

Live share FAQs #111

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a91c06d
feat: live share faqs
gregnr Oct 8, 2024
2e175b6
fix: html quotes
gregnr Oct 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
114 changes: 110 additions & 4 deletions apps/postgres-new/components/chat.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,11 @@ import { cn } from '~/lib/utils'
import { AiIconAnimation } from './ai-icon-animation'
import { useApp } from './app-provider'
import ChatMessage from './chat-message'
import SignInButton from './sign-in-button'
import { useWorkspace } from './workspace'
import { CopyableField } from './copyable-field'
import SignInButton from './sign-in-button'
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './ui/accordion'
import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs'
import { useWorkspace } from './workspace'

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

if (liveShare.isLiveSharing && liveShare.databaseId === props.databaseId) {
return (
<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">
<div className="flex items-center justify-center h-full flex-col gap-y-7">
<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">
<div className="flex flex-col items-center justify-start gap-y-7 overflow-y-auto pt-20 pb-10">
<div className="w-full text-left">
<p className="text-lg">Access your in-browser database</p>
<p className="text-xs text-muted-foreground">
Expand Down Expand Up @@ -599,6 +600,111 @@ function LiveShareOverlay(props: { databaseId: string }) {
<PlugIcon size={16} />
<span>Stop sharing database</span>
</Button>

<div className="self-stretch border-b border-b-foreground/15 my-4" />

<Accordion type="single" collapsible className="self-stretch flex flex-col gap-2">
<AccordionItem value="postgres-clients" className="border rounded-md">
<AccordionTrigger className="p-0 gap-2 px-3 py-2">
<div className="flex gap-2 items-center font-normal text-lighter text-sm">
<span>Can I connect using any Postgres client?</span>
</div>
</AccordionTrigger>
<AccordionContent className="p-3 prose prose-sm">
<p>
Yes! Any standard Postgres client that communicates using the Postgres wire
protocol is supported. Connections are established over an encrypted TLS channel
using the SNI extension, so your client will also need to support TLS with SNI
(most modern clients support this).
</p>
</AccordionContent>
</AccordionItem>
<AccordionItem value="concurrent-connections" className="border rounded-md">
<AccordionTrigger className="p-0 gap-2 px-3 py-2">
<div className="flex gap-2 items-center font-normal text-lighter text-sm">
<span>How many concurrent connections can I have?</span>
</div>
</AccordionTrigger>
<AccordionContent className="p-3 prose prose-sm">
<p>
PGlite operates in single-user mode, so you can only establish one connection at a
time per database. If you attempt to establish more than one connection using the
Live Share connection string, you will receive a &quot;too many clients&quot;
error.
</p>
</AccordionContent>
</AccordionItem>
<AccordionItem value="orms" className="border rounded-md">
<AccordionTrigger className="p-0 gap-2 px-3 py-2">
<div className="flex gap-2 items-center font-normal text-lighter text-sm">
<span>Does this work with ORMs?</span>
</div>
</AccordionTrigger>
<AccordionContent className="p-3 prose prose-sm">
<p>
Yes, as long as your ORM doesn&apos;t require multiple concurrent connections.
Some ORMs like Prisma run a shadow database in parallel to your main database in
order to generate migrations. In order to use Prisma, you will need to{' '}
<a
href="https://www.prisma.io/docs/orm/prisma-migrate/understanding-prisma-migrate/shadow-database#manually-configuring-the-shadow-database"
target="__blank"
rel="noopener noreferrer"
>
manually configure
</a>{' '}
your shadow database to point to another temporary database.
</p>
</AccordionContent>
</AccordionItem>
<AccordionItem value="connection-length" className="border rounded-md">
<AccordionTrigger className="p-0 gap-2 px-3 py-2">
<div className="flex gap-2 items-center font-normal text-lighter text-sm">
<span>How long will connections last?</span>
</div>
</AccordionTrigger>
<AccordionContent className="p-3 prose prose-sm">
<p>
You can connect over Live Share for as long as your browser tab is active. Once
your tab is closed, the any existing connection will terminate and you will no
longer be able to connect to your database using the connection string.
</p>
<p>
To prevent overloading the system, we also enforce a 5 minute idle timeout per
client connection and 1 hour total timeout per database. If you need to
communicate longer than these limits, simply reconnect after the timeout.
</p>
</AccordionContent>
</AccordionItem>
<AccordionItem value="under-the-hood" className="border rounded-md">
<AccordionTrigger className="p-0 gap-2 px-3 py-2">
<div className="flex gap-2 items-center font-normal text-lighter text-sm">
<span>How does this work under the hood?</span>
</div>
</AccordionTrigger>
<AccordionContent className="p-3 prose prose-sm">
<p>
We host a{' '}
<a
href="https://github.com/supabase-community/postgres-new/tree/main/apps/browser-proxy"
target="__blank"
rel="noopener noreferrer"
>
lightweight proxy
</a>{' '}
between your Postgres client and your in-browser PGlite database. It uses{' '}
<a
href="https://github.com/supabase-community/pg-gateway"
target="__blank"
rel="noopener noreferrer"
>
pg-gateway
</a>{' '}
to proxy inbound TCP connections to the corresponding browser instance via a Web
Socket reverse tunnel.
</p>
</AccordionContent>
</AccordionItem>
</Accordion>
</div>
</div>
)
Expand Down
240 changes: 120 additions & 120 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.