Merge pull request #9 from chartdb/jf/small_fixes_to_ui

small fixes + save when clicked on last updated
This commit is contained in:
Guy Ben-Aharon
2024-08-24 10:02:35 +03:00
committed by GitHub
3 changed files with 38 additions and 17 deletions

View File

@@ -20,7 +20,7 @@ import {
import { databaseTypeToLabelMap } from '@/lib/databases';
import { DatabaseType } from '@/lib/domain/database-type';
import { DialogProps } from '@radix-ui/react-dialog';
import { WandSparkles } from 'lucide-react';
import { Sparkles } from 'lucide-react';
import React, { useCallback, useEffect } from 'react';
export interface ExportSQLDialogProps {
@@ -59,12 +59,17 @@ export const ExportSQLDialog: React.FC<ExportSQLDialogProps> = ({
<div className="flex flex-col gap-2">
<Spinner />
<div className="flex items-center justify-center gap-1">
<WandSparkles className="h-5" />
<Label>
Generating SQL for{' '}
<Sparkles className="h-5" />
<Label className="text-lg">
AI is generating SQL for{' '}
{databaseTypeToLabelMap[targetDatabaseType]}...
</Label>
</div>
<div className="flex items-center justify-center gap-1">
<Label className="text-sm">
This should take up to 30 seconds.
</Label>
</div>
</div>
),
[targetDatabaseType]
@@ -85,7 +90,11 @@ export const ExportSQLDialog: React.FC<ExportSQLDialogProps> = ({
<DialogHeader>
<DialogTitle>Export SQL</DialogTitle>
<DialogDescription>
Export your diagram schema as SQL script
{`Export your diagram schema to ${
targetDatabaseType === DatabaseType.GENERIC
? 'SQL'
: databaseTypeToLabelMap[targetDatabaseType]
} script`}
</DialogDescription>
</DialogHeader>
<div className="flex flex-1 items-center justify-center">

View File

@@ -259,7 +259,9 @@ const generateSQLPrompt = (databaseType: string, sqlScript: string) => {
}[databaseType] || '';
const additionalInstructions = `
Just answer with the script with no additional details. give the commands flat without markdown.
**Provide just the SQL commands without markdown tags.**
Just answer with the script with no additional details.
No images are allowed. Do not try to generate or link images, including base64 data URLs.

View File

@@ -14,7 +14,7 @@ import {
} from '@/components/menubar/menubar';
import { Label } from '@/components/label/label';
import { Button } from '@/components/button/button';
import { Check, Pencil, Save } from 'lucide-react';
import { Check, Pencil } from 'lucide-react';
import { Input } from '@/components/input/input';
import { useChartDB } from '@/hooks/use-chartdb';
import { useClickAway, useKeyPressEvent } from 'react-use';
@@ -99,7 +99,7 @@ export const TopNavbar: React.FC<TopNavbarProps> = () => {
}, [exportImage]);
const openChartDBIO = useCallback(() => {
window.open('https://chartdb.io', '_blank');
window.location.href = 'https://chartdb.io';
}, []);
const openJoinSlack = useCallback(() => {
@@ -109,13 +109,14 @@ export const TopNavbar: React.FC<TopNavbarProps> = () => {
);
}, []);
const emojiAI = '✨';
return (
<nav className="flex flex-row items-center justify-between px-4 h-12 border-b">
<div className="flex flex-1 justify-start gap-x-3">
<div className="flex font-primary items-center">
<a
href="https://chartdb.io"
target="_blank"
className="cursor-pointer"
rel="noreferrer"
>
@@ -133,7 +134,6 @@ export const TopNavbar: React.FC<TopNavbarProps> = () => {
<MenubarContent>
<MenubarItem onClick={createNewDiagram}>
New
<MenubarShortcut>T</MenubarShortcut>
</MenubarItem>
<MenubarItem onClick={openDiagram}>
Open
@@ -167,6 +167,9 @@ export const TopNavbar: React.FC<TopNavbarProps> = () => {
'postgresql'
]
}
<MenubarShortcut className="text-base">
{emojiAI}
</MenubarShortcut>
</MenubarItem>
<MenubarItem
onClick={() =>
@@ -177,6 +180,9 @@ export const TopNavbar: React.FC<TopNavbarProps> = () => {
}
>
{databaseTypeToLabelMap['mysql']}
<MenubarShortcut className="text-base">
{emojiAI}
</MenubarShortcut>
</MenubarItem>
<MenubarItem
onClick={() =>
@@ -191,6 +197,9 @@ export const TopNavbar: React.FC<TopNavbarProps> = () => {
'sql_server'
]
}
<MenubarShortcut className="text-base">
{emojiAI}
</MenubarShortcut>
</MenubarItem>
<MenubarItem
onClick={() =>
@@ -201,6 +210,9 @@ export const TopNavbar: React.FC<TopNavbarProps> = () => {
}
>
{databaseTypeToLabelMap['mariadb']}
<MenubarShortcut className="text-base">
{emojiAI}
</MenubarShortcut>
</MenubarItem>
<MenubarItem
onClick={() =>
@@ -211,6 +223,9 @@ export const TopNavbar: React.FC<TopNavbarProps> = () => {
}
>
{databaseTypeToLabelMap['sqlite']}
<MenubarShortcut className="text-base">
{emojiAI}
</MenubarShortcut>
</MenubarItem>
</MenubarSubContent>
</MenubarSub>
@@ -252,12 +267,8 @@ export const TopNavbar: React.FC<TopNavbarProps> = () => {
<MenubarMenu>
<MenubarTrigger>Edit</MenubarTrigger>
<MenubarContent>
<MenubarItem>
Undo <MenubarShortcut>Z</MenubarShortcut>
</MenubarItem>
<MenubarItem>
Redo <MenubarShortcut>Z</MenubarShortcut>
</MenubarItem>
<MenubarItem>Undo</MenubarItem>
<MenubarItem>Redo</MenubarItem>
<MenubarSeparator />
<MenubarItem
onClick={() =>
@@ -350,7 +361,6 @@ export const TopNavbar: React.FC<TopNavbarProps> = () => {
<Tooltip>
<TooltipTrigger>
<Badge variant="secondary" className="flex gap-1">
<Save className="h-4" />
Last saved
<TimeAgo datetime={currentDiagram.updatedAt} />
</Badge>