fix: enable text selection in results panel and preserve AI prompt
Add select-text to override global user-select:none on results table, JSON view, error messages, and AI explanation. Also keep AI prompt text after generation with a clear button. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -3,7 +3,7 @@ import { Button } from "@/components/ui/button";
|
|||||||
import { Input } from "@/components/ui/input";
|
import { Input } from "@/components/ui/input";
|
||||||
import { AiSettingsPopover } from "./AiSettingsPopover";
|
import { AiSettingsPopover } from "./AiSettingsPopover";
|
||||||
import { useGenerateSql } from "@/hooks/use-ai";
|
import { useGenerateSql } from "@/hooks/use-ai";
|
||||||
import { Sparkles, Loader2, X } from "lucide-react";
|
import { Sparkles, Loader2, X, Eraser } from "lucide-react";
|
||||||
import { toast } from "sonner";
|
import { toast } from "sonner";
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
@@ -24,7 +24,6 @@ export function AiBar({ connectionId, onSqlGenerated, onClose, onExecute }: Prop
|
|||||||
{
|
{
|
||||||
onSuccess: (sql) => {
|
onSuccess: (sql) => {
|
||||||
onSqlGenerated(sql);
|
onSqlGenerated(sql);
|
||||||
setPrompt("");
|
|
||||||
},
|
},
|
||||||
onError: (err) => {
|
onError: (err) => {
|
||||||
toast.error("AI generation failed", { description: String(err) });
|
toast.error("AI generation failed", { description: String(err) });
|
||||||
@@ -77,6 +76,18 @@ export function AiBar({ connectionId, onSqlGenerated, onClose, onExecute }: Prop
|
|||||||
"Generate"
|
"Generate"
|
||||||
)}
|
)}
|
||||||
</Button>
|
</Button>
|
||||||
|
{prompt.trim() && (
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="ghost"
|
||||||
|
className="h-6 w-6 p-0"
|
||||||
|
onClick={() => setPrompt("")}
|
||||||
|
title="Clear prompt"
|
||||||
|
disabled={generateMutation.isPending}
|
||||||
|
>
|
||||||
|
<Eraser className="h-3 w-3" />
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
<AiSettingsPopover />
|
<AiSettingsPopover />
|
||||||
<Button
|
<Button
|
||||||
size="sm"
|
size="sm"
|
||||||
|
|||||||
@@ -43,7 +43,7 @@ export function ResultsJsonView({ columns, rows }: Props) {
|
|||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex h-full flex-col">
|
<div className="flex h-full select-text flex-col">
|
||||||
<div className="border-b px-3 py-1">
|
<div className="border-b px-3 py-1">
|
||||||
<span className="text-xs text-muted-foreground">
|
<span className="text-xs text-muted-foreground">
|
||||||
{rows.length} row{rows.length !== 1 ? "s" : ""}
|
{rows.length} row{rows.length !== 1 ? "s" : ""}
|
||||||
|
|||||||
@@ -44,7 +44,7 @@ export function ResultsPanel({
|
|||||||
|
|
||||||
if (aiExplanation) {
|
if (aiExplanation) {
|
||||||
return (
|
return (
|
||||||
<div className="h-full overflow-auto p-4">
|
<div className="h-full select-text overflow-auto p-4">
|
||||||
<div className="rounded-md border bg-muted/30 p-4">
|
<div className="rounded-md border bg-muted/30 p-4">
|
||||||
<div className="mb-2 flex items-center gap-2 text-xs font-medium text-muted-foreground">
|
<div className="mb-2 flex items-center gap-2 text-xs font-medium text-muted-foreground">
|
||||||
<Sparkles className="h-3.5 w-3.5" />
|
<Sparkles className="h-3.5 w-3.5" />
|
||||||
@@ -60,7 +60,7 @@ export function ResultsPanel({
|
|||||||
|
|
||||||
if (error) {
|
if (error) {
|
||||||
return (
|
return (
|
||||||
<div className="flex h-full flex-col items-center justify-center gap-3 p-4">
|
<div className="flex h-full select-text flex-col items-center justify-center gap-3 p-4">
|
||||||
<div className="flex items-start gap-2 rounded-md border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive">
|
<div className="flex items-start gap-2 rounded-md border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive">
|
||||||
<AlertCircle className="mt-0.5 h-4 w-4 shrink-0" />
|
<AlertCircle className="mt-0.5 h-4 w-4 shrink-0" />
|
||||||
<pre className="whitespace-pre-wrap font-mono text-xs">{error}</pre>
|
<pre className="whitespace-pre-wrap font-mono text-xs">{error}</pre>
|
||||||
|
|||||||
@@ -139,7 +139,7 @@ export function ResultsTable({
|
|||||||
if (colNames.length === 0) return null;
|
if (colNames.length === 0) return null;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div ref={parentRef} className="h-full overflow-auto">
|
<div ref={parentRef} className="h-full select-text overflow-auto">
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
<div className="sticky top-0 z-10 flex bg-card border-b">
|
<div className="sticky top-0 z-10 flex bg-card border-b">
|
||||||
{table.getHeaderGroups().map((headerGroup) =>
|
{table.getHeaderGroups().map((headerGroup) =>
|
||||||
|
|||||||
Reference in New Issue
Block a user