Merge branch 'refs/heads/main' into feature/ai-chat
# Conflicts: # frontend/components/dashboard/newProject.tsx # frontend/components/editor/AIChat/ChatMessage.tsx # frontend/components/editor/AIChat/ContextDisplay.tsx # frontend/components/editor/AIChat/index.tsx # frontend/components/editor/index.tsx # frontend/components/editor/sidebar/index.tsx # frontend/components/editor/terminals/terminal.tsx
This commit is contained in:
James Murdza
@ -8,7 +8,7 @@ import {
|
||||
} from "@/components/ui/dialog"
|
||||
import { zodResolver } from "@hookform/resolvers/zod"
|
||||
import Image from "next/image"
|
||||
import { useState } from "react"
|
||||
import { useCallback, useEffect, useMemo, useState } from "react"
|
||||
import { useForm } from "react-hook-form"
|
||||
import { z } from "zod"
|
||||
|
||||
@ -32,10 +32,14 @@ import {
|
||||
import { createSandbox } from "@/lib/actions"
|
||||
import { projectTemplates } from "@/lib/data"
|
||||
import { useUser } from "@clerk/nextjs"
|
||||
import { Loader2 } from "lucide-react"
|
||||
import { ChevronLeft, ChevronRight, Loader2, Search } from "lucide-react"
|
||||
import { useRouter } from "next/navigation"
|
||||
import { Button } from "../ui/button"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import type { EmblaCarouselType } from "embla-carousel"
|
||||
import useEmblaCarousel from "embla-carousel-react"
|
||||
import { WheelGesturesPlugin } from "embla-carousel-wheel-gestures"
|
||||
const formSchema = z.object({
|
||||
name: z
|
||||
.string()
|
||||
@ -55,11 +59,20 @@ export default function NewProjectModal({
|
||||
open: boolean
|
||||
setOpen: (open: boolean) => void
|
||||
}) {
|
||||
const router = useRouter()
|
||||
const user = useUser()
|
||||
const [selected, setSelected] = useState("reactjs")
|
||||
const [loading, setLoading] = useState(false)
|
||||
const router = useRouter()
|
||||
|
||||
const user = useUser()
|
||||
const [emblaRef, emblaApi] = useEmblaCarousel({ loop: false }, [
|
||||
WheelGesturesPlugin(),
|
||||
])
|
||||
const {
|
||||
prevBtnDisabled,
|
||||
nextBtnDisabled,
|
||||
onPrevButtonClick,
|
||||
onNextButtonClick,
|
||||
} = usePrevNextButtons(emblaApi)
|
||||
const [search, setSearch] = useState("")
|
||||
|
||||
const form = useForm<z.infer<typeof formSchema>>({
|
||||
resolver: zodResolver(formSchema),
|
||||
@ -69,6 +82,26 @@ export default function NewProjectModal({
|
||||
},
|
||||
})
|
||||
|
||||
const handleTemplateClick = useCallback(
|
||||
({ id, index }: { id: string; index: number }) => {
|
||||
setSelected(id)
|
||||
emblaApi?.scrollTo(index)
|
||||
},
|
||||
[emblaApi]
|
||||
)
|
||||
const filteredTemplates = useMemo(
|
||||
() =>
|
||||
projectTemplates.filter(
|
||||
(item) =>
|
||||
item.name.toLowerCase().includes(search.toLowerCase()) ||
|
||||
item.description.toLowerCase().includes(search.toLowerCase())
|
||||
),
|
||||
[search, projectTemplates]
|
||||
)
|
||||
const emptyTemplates = useMemo(
|
||||
() => filteredTemplates.length === 0,
|
||||
[filteredTemplates]
|
||||
)
|
||||
async function onSubmit(values: z.infer<typeof formSchema>) {
|
||||
if (!user.isSignedIn) return
|
||||
|
||||
@ -78,7 +111,6 @@ export default function NewProjectModal({
|
||||
const id = await createSandbox(sandboxData)
|
||||
router.push(`/code/${id}`)
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
open={open}
|
||||
@ -90,25 +122,89 @@ export default function NewProjectModal({
|
||||
<DialogHeader>
|
||||
<DialogTitle>Create A Sandbox</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="grid grid-cols-2 w-full gap-2 mt-2">
|
||||
{projectTemplates.map((item) => (
|
||||
<button
|
||||
disabled={item.disabled || loading}
|
||||
key={item.id}
|
||||
onClick={() => setSelected(item.id)}
|
||||
className={`${
|
||||
selected === item.id ? "border-foreground" : "border-border"
|
||||
} rounded-md border bg-card text-card-foreground shadow text-left p-4 flex flex-col transition-all focus-visible:outline-none focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50 disabled:cursor-not-allowed`}
|
||||
<div className="flex flex-col gap-2 max-w-full overflow-hidden">
|
||||
<div className="flex items-center justify-end">
|
||||
<SearchInput
|
||||
{...{
|
||||
value: search,
|
||||
onValueChange: setSearch,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="overflow-hidden relative" ref={emblaRef}>
|
||||
<div
|
||||
className={cn(
|
||||
"grid grid-flow-col gap-x-2 min-h-[97px]",
|
||||
emptyTemplates ? "auto-cols-[100%]" : "auto-cols-[200px]"
|
||||
)}
|
||||
>
|
||||
<div className="space-x-2 flex items-center justify-start w-full">
|
||||
<Image alt="" src={item.icon} width={20} height={20} />
|
||||
<div className="font-medium">{item.name}</div>
|
||||
</div>
|
||||
<div className="mt-2 text-muted-foreground text-sm">
|
||||
{item.description}
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
{filteredTemplates.map((item, i) => (
|
||||
<button
|
||||
disabled={item.disabled || loading}
|
||||
key={item.id}
|
||||
onClick={handleTemplateClick.bind(null, {
|
||||
id: item.id,
|
||||
index: i,
|
||||
})}
|
||||
className={cn(
|
||||
selected === item.id
|
||||
? "shadow-foreground"
|
||||
: "shadow-border",
|
||||
"shadow-[0_0_0_1px_inset] rounded-md border bg-card text-card-foreground text-left p-4 flex flex-col transition-all focus-visible:outline-none focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
)}
|
||||
>
|
||||
<div className="space-x-2 flex items-center justify-start w-full">
|
||||
<Image alt="" src={item.icon} width={20} height={20} />
|
||||
<div className="font-medium">{item.name}</div>
|
||||
</div>
|
||||
<div className="mt-2 text-muted-foreground text-xs line-clamp-2">
|
||||
{item.description}
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
{emptyTemplates && (
|
||||
<div className="flex flex-col gap-2 items-center text-center justify-center text-muted-foreground text-sm">
|
||||
<p>No templates found</p>
|
||||
<Button size="xs" asChild>
|
||||
<a
|
||||
href="https://github.com/jamesmurdza/sandbox"
|
||||
target="_blank"
|
||||
>
|
||||
Contribute
|
||||
</a>
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
className={cn(
|
||||
"absolute transition-all opacity-100 duration-400 bg-gradient-to-r from-background via-background to-transparent w-14 pl-1 left-0 top-0 -translate-x-1 bottom-0 h-full flex items-center",
|
||||
prevBtnDisabled && "opacity-0 pointer-events-none"
|
||||
)}
|
||||
>
|
||||
<Button
|
||||
size="smIcon"
|
||||
className="rounded-full"
|
||||
onClick={onPrevButtonClick}
|
||||
>
|
||||
<ChevronLeft className="size-5" />
|
||||
</Button>
|
||||
</div>
|
||||
<div
|
||||
className={cn(
|
||||
"absolute transition-all opacity-100 duration-400 bg-gradient-to-l from-background via-background to-transparent w-14 pl-1 right-0 top-0 translate-x-1 bottom-0 h-full flex items-center",
|
||||
nextBtnDisabled && "opacity-0 pointer-events-none"
|
||||
)}
|
||||
>
|
||||
<Button
|
||||
size="smIcon"
|
||||
className="rounded-full"
|
||||
onClick={onNextButtonClick}
|
||||
>
|
||||
<ChevronRight className="size-5" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Form {...form}>
|
||||
@ -176,3 +272,68 @@ export default function NewProjectModal({
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
function SearchInput({
|
||||
value,
|
||||
onValueChange,
|
||||
}: {
|
||||
value?: string
|
||||
onValueChange?: (value: string) => void
|
||||
}) {
|
||||
const onSubmit = useCallback((e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
console.log("searching")
|
||||
}, [])
|
||||
return (
|
||||
<form {...{ onSubmit }} className="w-40 h-8 ">
|
||||
<label
|
||||
htmlFor="template-search"
|
||||
className="flex gap-2 rounded-sm transition-colors bg-[#2e2e2e] border border-[--s-color] [--s-color:hsl(var(--muted-foreground))] focus-within:[--s-color:#fff] h-full items-center px-2"
|
||||
>
|
||||
<Search className="size-4 text-[--s-color] transition-colors" />
|
||||
<input
|
||||
id="template-search"
|
||||
type="text"
|
||||
name="search"
|
||||
placeholder="Search templates"
|
||||
value={value}
|
||||
onChange={(e) => onValueChange?.(e.target.value)}
|
||||
className="bg-transparent placeholder:text-muted-foreground text-white w-full focus:outline-none text-xs"
|
||||
/>
|
||||
</label>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
const usePrevNextButtons = (emblaApi: EmblaCarouselType | undefined) => {
|
||||
const [prevBtnDisabled, setPrevBtnDisabled] = useState(true)
|
||||
const [nextBtnDisabled, setNextBtnDisabled] = useState(true)
|
||||
|
||||
const onPrevButtonClick = useCallback(() => {
|
||||
if (!emblaApi) return
|
||||
emblaApi.scrollPrev()
|
||||
}, [emblaApi])
|
||||
|
||||
const onNextButtonClick = useCallback(() => {
|
||||
if (!emblaApi) return
|
||||
emblaApi.scrollNext()
|
||||
}, [emblaApi])
|
||||
|
||||
const onSelect = useCallback((emblaApi: EmblaCarouselType) => {
|
||||
setPrevBtnDisabled(!emblaApi.canScrollPrev())
|
||||
setNextBtnDisabled(!emblaApi.canScrollNext())
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (!emblaApi) return
|
||||
|
||||
onSelect(emblaApi)
|
||||
emblaApi.on("reInit", onSelect).on("select", onSelect)
|
||||
}, [emblaApi, onSelect])
|
||||
|
||||
return {
|
||||
prevBtnDisabled,
|
||||
nextBtnDisabled,
|
||||
onPrevButtonClick,
|
||||
onNextButtonClick,
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,25 +1,31 @@
|
||||
import { Check, ChevronDown, ChevronUp, Copy, CornerUpLeft } from 'lucide-react';
|
||||
import React, { useState } from 'react';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
|
||||
import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
|
||||
import remarkGfm from 'remark-gfm';
|
||||
import { Button } from '../../ui/button';
|
||||
import { copyToClipboard, stringifyContent } from './lib/chatUtils';
|
||||
import { Check, ChevronDown, ChevronUp, Copy, CornerUpLeft } from "lucide-react"
|
||||
import React, { useState } from "react"
|
||||
import ReactMarkdown from "react-markdown"
|
||||
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"
|
||||
import { vscDarkPlus } from "react-syntax-highlighter/dist/esm/styles/prism"
|
||||
import remarkGfm from "remark-gfm"
|
||||
import { Button } from "../../ui/button"
|
||||
import { copyToClipboard, stringifyContent } from "./lib/chatUtils"
|
||||
|
||||
interface MessageProps {
|
||||
message: {
|
||||
role: 'user' | 'assistant';
|
||||
content: string;
|
||||
context?: string;
|
||||
};
|
||||
setContext: (context: string | null) => void;
|
||||
setIsContextExpanded: (isExpanded: boolean) => void;
|
||||
role: "user" | "assistant"
|
||||
content: string
|
||||
context?: string
|
||||
}
|
||||
setContext: (context: string | null) => void
|
||||
setIsContextExpanded: (isExpanded: boolean) => void
|
||||
}
|
||||
|
||||
export default function ChatMessage({ message, setContext, setIsContextExpanded }: MessageProps) {
|
||||
const [expandedMessageIndex, setExpandedMessageIndex] = useState<number | null>(null);
|
||||
const [copiedText, setCopiedText] = useState<string | null>(null);
|
||||
export default function ChatMessage({
|
||||
message,
|
||||
setContext,
|
||||
setIsContextExpanded,
|
||||
}: MessageProps) {
|
||||
const [expandedMessageIndex, setExpandedMessageIndex] = useState<
|
||||
number | null
|
||||
>(null)
|
||||
const [copiedText, setCopiedText] = useState<string | null>(null)
|
||||
|
||||
const renderCopyButton = (text: any) => (
|
||||
<Button
|
||||
@ -34,17 +40,17 @@ export default function ChatMessage({ message, setContext, setIsContextExpanded
|
||||
<Copy className="w-4 h-4" />
|
||||
)}
|
||||
</Button>
|
||||
);
|
||||
)
|
||||
|
||||
const askAboutCode = (code: any) => {
|
||||
const contextString = stringifyContent(code);
|
||||
setContext(`Regarding this code:\n${contextString}`);
|
||||
setIsContextExpanded(false);
|
||||
};
|
||||
const contextString = stringifyContent(code)
|
||||
setContext(`Regarding this code:\n${contextString}`)
|
||||
setIsContextExpanded(false)
|
||||
}
|
||||
|
||||
const renderMarkdownElement = (props: any) => {
|
||||
const { node, children } = props;
|
||||
const content = stringifyContent(children);
|
||||
const { node, children } = props
|
||||
const content = stringifyContent(children)
|
||||
|
||||
return (
|
||||
<div className="relative group">
|
||||
@ -59,22 +65,30 @@ export default function ChatMessage({ message, setContext, setIsContextExpanded
|
||||
<CornerUpLeft className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
{React.createElement(node.tagName, {
|
||||
...props,
|
||||
className: `${props.className || ''} hover:bg-transparent rounded p-1 transition-colors`
|
||||
}, children)}
|
||||
{React.createElement(
|
||||
node.tagName,
|
||||
{
|
||||
...props,
|
||||
className: `${
|
||||
props.className || ""
|
||||
} hover:bg-transparent rounded p-1 transition-colors`,
|
||||
},
|
||||
children
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="text-left relative">
|
||||
<div className={`relative p-2 rounded-lg ${
|
||||
message.role === 'user'
|
||||
? 'bg-[#262626] text-white'
|
||||
: 'bg-transparent text-white'
|
||||
} max-w-full`}>
|
||||
{message.role === 'user' && (
|
||||
<div
|
||||
className={`relative p-2 rounded-lg ${
|
||||
message.role === "user"
|
||||
? "bg-[#262626] text-white"
|
||||
: "bg-transparent text-white"
|
||||
} max-w-full`}
|
||||
>
|
||||
{message.role === "user" && (
|
||||
<div className="absolute top-0 right-0 flex opacity-0 group-hover:opacity-30 transition-opacity">
|
||||
{renderCopyButton(message.content)}
|
||||
<Button
|
||||
@ -89,13 +103,13 @@ export default function ChatMessage({ message, setContext, setIsContextExpanded
|
||||
)}
|
||||
{message.context && (
|
||||
<div className="mb-2 bg-input rounded-lg">
|
||||
<div
|
||||
<div
|
||||
className="flex justify-between items-center cursor-pointer"
|
||||
onClick={() => setExpandedMessageIndex(expandedMessageIndex === 0 ? null : 0)}
|
||||
onClick={() =>
|
||||
setExpandedMessageIndex(expandedMessageIndex === 0 ? null : 0)
|
||||
}
|
||||
>
|
||||
<span className="text-sm text-gray-300">
|
||||
Context
|
||||
</span>
|
||||
<span className="text-sm text-gray-300">Context</span>
|
||||
{expandedMessageIndex === 0 ? (
|
||||
<ChevronUp size={16} />
|
||||
) : (
|
||||
@ -105,41 +119,46 @@ export default function ChatMessage({ message, setContext, setIsContextExpanded
|
||||
{expandedMessageIndex === 0 && (
|
||||
<div className="relative">
|
||||
<div className="absolute top-0 right-0 flex p-1">
|
||||
{renderCopyButton(message.context.replace(/^Regarding this code:\n/, ''))}
|
||||
{renderCopyButton(
|
||||
message.context.replace(/^Regarding this code:\n/, "")
|
||||
)}
|
||||
</div>
|
||||
{(() => {
|
||||
const code = message.context.replace(/^Regarding this code:\n/, '');
|
||||
const match = /language-(\w+)/.exec(code);
|
||||
const language = match ? match[1] : 'typescript';
|
||||
const code = message.context.replace(
|
||||
/^Regarding this code:\n/,
|
||||
""
|
||||
)
|
||||
const match = /language-(\w+)/.exec(code)
|
||||
const language = match ? match[1] : "typescript"
|
||||
return (
|
||||
<div className="pt-6">
|
||||
<textarea
|
||||
value={code}
|
||||
onChange={(e) => {
|
||||
const updatedContext = `Regarding this code:\n${e.target.value}`;
|
||||
setContext(updatedContext);
|
||||
const updatedContext = `Regarding this code:\n${e.target.value}`
|
||||
setContext(updatedContext)
|
||||
}}
|
||||
className="w-full p-2 bg-[#1e1e1e] text-white font-mono text-sm rounded"
|
||||
rows={code.split('\n').length}
|
||||
rows={code.split("\n").length}
|
||||
style={{
|
||||
resize: 'vertical',
|
||||
minHeight: '100px',
|
||||
maxHeight: '400px',
|
||||
resize: "vertical",
|
||||
minHeight: "100px",
|
||||
maxHeight: "400px",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
)
|
||||
})()}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{message.role === 'assistant' ? (
|
||||
{message.role === "assistant" ? (
|
||||
<ReactMarkdown
|
||||
remarkPlugins={[remarkGfm]}
|
||||
components={{
|
||||
code({node, className, children, ...props}) {
|
||||
const match = /language-(\w+)/.exec(className || '');
|
||||
code({ node, className, children, ...props }) {
|
||||
const match = /language-(\w+)/.exec(className || "")
|
||||
return match ? (
|
||||
<div className="relative border border-input rounded-md my-4">
|
||||
<div className="absolute top-0 left-0 px-2 py-1 text-xs font-semibold text-gray-200 bg-#1e1e1e rounded-tl">
|
||||
@ -163,8 +182,8 @@ export default function ChatMessage({ message, setContext, setIsContextExpanded
|
||||
PreTag="div"
|
||||
customStyle={{
|
||||
margin: 0,
|
||||
padding: '0.5rem',
|
||||
fontSize: '0.875rem',
|
||||
padding: "0.5rem",
|
||||
fontSize: "0.875rem",
|
||||
}}
|
||||
>
|
||||
{stringifyContent(children)}
|
||||
@ -175,7 +194,7 @@ export default function ChatMessage({ message, setContext, setIsContextExpanded
|
||||
<code className={className} {...props}>
|
||||
{children}
|
||||
</code>
|
||||
);
|
||||
)
|
||||
},
|
||||
p: renderMarkdownElement,
|
||||
h1: renderMarkdownElement,
|
||||
@ -184,18 +203,24 @@ export default function ChatMessage({ message, setContext, setIsContextExpanded
|
||||
h4: renderMarkdownElement,
|
||||
h5: renderMarkdownElement,
|
||||
h6: renderMarkdownElement,
|
||||
ul: (props) => <ul className="list-disc pl-6 mb-4 space-y-2">{props.children}</ul>,
|
||||
ol: (props) => <ol className="list-decimal pl-6 mb-4 space-y-2">{props.children}</ol>,
|
||||
ul: (props) => (
|
||||
<ul className="list-disc pl-6 mb-4 space-y-2">
|
||||
{props.children}
|
||||
</ul>
|
||||
),
|
||||
ol: (props) => (
|
||||
<ol className="list-decimal pl-6 mb-4 space-y-2">
|
||||
{props.children}
|
||||
</ol>
|
||||
),
|
||||
}}
|
||||
>
|
||||
{message.content}
|
||||
</ReactMarkdown>
|
||||
) : (
|
||||
<div className="whitespace-pre-wrap group">
|
||||
{message.content}
|
||||
</div>
|
||||
<div className="whitespace-pre-wrap group">{message.content}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,47 +1,60 @@
|
||||
import { ChevronDown, ChevronUp, X } from 'lucide-react';
|
||||
import { ChevronDown, ChevronUp, X } from "lucide-react"
|
||||
|
||||
interface ContextDisplayProps {
|
||||
context: string | null;
|
||||
isContextExpanded: boolean;
|
||||
setIsContextExpanded: (isExpanded: boolean) => void;
|
||||
setContext: (context: string | null) => void;
|
||||
context: string | null
|
||||
isContextExpanded: boolean
|
||||
setIsContextExpanded: (isExpanded: boolean) => void
|
||||
setContext: (context: string | null) => void
|
||||
}
|
||||
|
||||
export default function ContextDisplay({ context, isContextExpanded, setIsContextExpanded, setContext }: ContextDisplayProps) {
|
||||
if (!context) return null;
|
||||
export default function ContextDisplay({
|
||||
context,
|
||||
isContextExpanded,
|
||||
setIsContextExpanded,
|
||||
setContext,
|
||||
}: ContextDisplayProps) {
|
||||
if (!context) return null
|
||||
|
||||
return (
|
||||
<div className="mb-2 bg-input p-2 rounded-lg">
|
||||
<div className="flex justify-between items-center">
|
||||
<div
|
||||
className="flex-grow cursor-pointer"
|
||||
<div
|
||||
className="flex-grow cursor-pointer"
|
||||
onClick={() => setIsContextExpanded(!isContextExpanded)}
|
||||
>
|
||||
<span className="text-sm text-gray-300">
|
||||
Context
|
||||
</span>
|
||||
<span className="text-sm text-gray-300">Context</span>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
{isContextExpanded ? (
|
||||
<ChevronUp size={16} className="cursor-pointer" onClick={() => setIsContextExpanded(false)} />
|
||||
<ChevronUp
|
||||
size={16}
|
||||
className="cursor-pointer"
|
||||
onClick={() => setIsContextExpanded(false)}
|
||||
/>
|
||||
) : (
|
||||
<ChevronDown size={16} className="cursor-pointer" onClick={() => setIsContextExpanded(true)} />
|
||||
<ChevronDown
|
||||
size={16}
|
||||
className="cursor-pointer"
|
||||
onClick={() => setIsContextExpanded(true)}
|
||||
/>
|
||||
)}
|
||||
<X
|
||||
size={16}
|
||||
className="ml-2 cursor-pointer text-gray-400 hover:text-gray-200"
|
||||
<X
|
||||
size={16}
|
||||
className="ml-2 cursor-pointer text-gray-400 hover:text-gray-200"
|
||||
onClick={() => setContext(null)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{isContextExpanded && (
|
||||
<textarea
|
||||
value={context.replace(/^Regarding this code:\n/, '')}
|
||||
onChange={(e) => setContext(`Regarding this code:\n${e.target.value}`)}
|
||||
value={context.replace(/^Regarding this code:\n/, "")}
|
||||
onChange={(e) =>
|
||||
setContext(`Regarding this code:\n${e.target.value}`)
|
||||
}
|
||||
className="w-full mt-2 p-2 bg-#1e1e1e text-white rounded"
|
||||
rows={5}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
@ -24,6 +24,7 @@ import { parseTSConfigToMonacoOptions } from "@/lib/tsconfig"
|
||||
import { Sandbox, TFile, TFolder, TTab, User } from "@/lib/types"
|
||||
import {
|
||||
addNew,
|
||||
cn,
|
||||
debounce,
|
||||
deepMerge,
|
||||
processFileType,
|
||||
@ -926,7 +927,10 @@ export default function CodeEditor({
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
<div className="z-50 p-1" ref={generateWidgetRef}>
|
||||
<div
|
||||
className={cn(generate.show && "z-50 p-1")}
|
||||
ref={generateWidgetRef}
|
||||
>
|
||||
{generate.show ? (
|
||||
<GenerateInput
|
||||
user={userData}
|
||||
|
||||
@ -84,8 +84,10 @@ export default function Loading({
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full mt-1 flex flex-col">
|
||||
<div className="w-full flex justify-center">
|
||||
<Loader2 className="w-4 h-4 animate-spin" />
|
||||
<div className="w-full flex flex-col justify-center">
|
||||
{new Array(6).fill(0).map((_, i) => (
|
||||
<Skeleton key={i} className="h-[1.625rem] mb-0.5 rounded-sm" />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,20 +1,16 @@
|
||||
"use client"
|
||||
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Sandbox, TFile, TFolder, TTab } from "@/lib/types"
|
||||
import {
|
||||
FilePlus,
|
||||
FolderPlus,
|
||||
Loader2,
|
||||
MessageSquareMore,
|
||||
Sparkles,
|
||||
} from "lucide-react"
|
||||
import { useEffect, useRef, useState } from "react"
|
||||
import { FilePlus, FolderPlus, MessageSquareMore, Sparkles } from "lucide-react"
|
||||
import { useEffect, useMemo, useRef, useState } from "react"
|
||||
import { Socket } from "socket.io-client"
|
||||
import SidebarFile from "./file"
|
||||
import SidebarFolder from "./folder"
|
||||
import New from "./new"
|
||||
|
||||
import Button from "@/components/ui/customButton"
|
||||
import { Skeleton } from "@/components/ui/skeleton"
|
||||
import { sortFileExplorer } from "@/lib/utils"
|
||||
import {
|
||||
dropTargetForElements,
|
||||
monitorForElements,
|
||||
@ -52,7 +48,9 @@ export default function Sidebar({
|
||||
|
||||
const [creatingNew, setCreatingNew] = useState<"file" | "folder" | null>(null)
|
||||
const [movingId, setMovingId] = useState("")
|
||||
|
||||
const sortedFiles = useMemo(() => {
|
||||
return sortFileExplorer(files)
|
||||
}, [files])
|
||||
useEffect(() => {
|
||||
const el = ref.current
|
||||
|
||||
@ -133,13 +131,15 @@ export default function Sidebar({
|
||||
isDraggedOver ? "bg-secondary/50" : ""
|
||||
} rounded-sm w-full mt-1 flex flex-col`}
|
||||
> */}
|
||||
{files.length === 0 ? (
|
||||
<div className="w-full flex justify-center">
|
||||
<Loader2 className="w-4 h-4 animate-spin" />
|
||||
{sortedFiles.length === 0 ? (
|
||||
<div className="w-full flex flex-col justify-center">
|
||||
{new Array(6).fill(0).map((_, i) => (
|
||||
<Skeleton key={i} className="h-[1.625rem] mb-0.5 rounded-sm" />
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{files.map((child) =>
|
||||
{sortedFiles.map((child) =>
|
||||
child.type === "file" ? (
|
||||
<SidebarFile
|
||||
key={child.id}
|
||||
|
||||
@ -4,8 +4,9 @@ import { FitAddon } from "@xterm/addon-fit"
|
||||
import { Terminal } from "@xterm/xterm"
|
||||
import "./xterm.css"
|
||||
|
||||
import { debounce } from "@/lib/utils"
|
||||
import { Loader2 } from "lucide-react"
|
||||
import { useEffect, useRef } from "react"
|
||||
import { ElementRef, useEffect, useRef } from "react"
|
||||
import { Socket } from "socket.io-client"
|
||||
|
||||
export default function EditorTerminal({
|
||||
@ -21,7 +22,8 @@ export default function EditorTerminal({
|
||||
setTerm: (term: Terminal) => void
|
||||
visible: boolean
|
||||
}) {
|
||||
const terminalRef = useRef(null)
|
||||
const terminalRef = useRef<ElementRef<"div">>(null)
|
||||
const fitAddonRef = useRef<FitAddon | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (!terminalRef.current) return
|
||||
@ -39,37 +41,61 @@ export default function EditorTerminal({
|
||||
})
|
||||
|
||||
setTerm(terminal)
|
||||
|
||||
return () => {
|
||||
if (terminal) terminal.dispose()
|
||||
const dispose = () => {
|
||||
terminal.dispose()
|
||||
}
|
||||
return dispose
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (!term) return
|
||||
|
||||
if (!terminalRef.current) return
|
||||
const fitAddon = new FitAddon()
|
||||
term.loadAddon(fitAddon)
|
||||
term.open(terminalRef.current)
|
||||
fitAddon.fit()
|
||||
if (!fitAddonRef.current) {
|
||||
const fitAddon = new FitAddon()
|
||||
term.loadAddon(fitAddon)
|
||||
term.open(terminalRef.current)
|
||||
fitAddon.fit()
|
||||
fitAddonRef.current = fitAddon
|
||||
}
|
||||
|
||||
const disposableOnData = term.onData((data) => {
|
||||
socket.emit("terminalData", id, data)
|
||||
})
|
||||
|
||||
const disposableOnResize = term.onResize((dimensions) => {
|
||||
// const terminal_size = {
|
||||
// width: dimensions.cols,
|
||||
// height: dimensions.rows,
|
||||
// };
|
||||
fitAddon.fit()
|
||||
fitAddonRef.current?.fit()
|
||||
socket.emit("terminalResize", dimensions)
|
||||
})
|
||||
const resizeObserver = new ResizeObserver(
|
||||
debounce((entries) => {
|
||||
if (!fitAddonRef.current || !terminalRef.current) return
|
||||
|
||||
const entry = entries[0]
|
||||
if (!entry) return
|
||||
|
||||
const { width, height } = entry.contentRect
|
||||
|
||||
// Only call fit if the size has actually changed
|
||||
if (
|
||||
width !== terminalRef.current.offsetWidth ||
|
||||
height !== terminalRef.current.offsetHeight
|
||||
) {
|
||||
try {
|
||||
fitAddonRef.current.fit()
|
||||
} catch (err) {
|
||||
console.error("Error during fit:", err)
|
||||
}
|
||||
}
|
||||
}, 50) // Debounce for 50ms
|
||||
)
|
||||
|
||||
// start observing for resize
|
||||
resizeObserver.observe(terminalRef.current)
|
||||
return () => {
|
||||
disposableOnData.dispose()
|
||||
disposableOnResize.dispose()
|
||||
resizeObserver.disconnect()
|
||||
}
|
||||
}, [term, terminalRef.current])
|
||||
|
||||
|
||||
@ -22,15 +22,15 @@ export const projectTemplates: {
|
||||
{
|
||||
id: "nextjs",
|
||||
name: "NextJS",
|
||||
icon: "/project-icons/node.svg",
|
||||
description: "A JavaScript runtime built on the V8 JavaScript engine",
|
||||
icon: "/project-icons/next-js.svg",
|
||||
description: "a React framework for building full-stack web applications",
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
id: "streamlit",
|
||||
name: "Streamlit",
|
||||
icon: "/project-icons/python.svg",
|
||||
description: "A JavaScript runtime built on the V8 JavaScript engine",
|
||||
description: "A faster way to build and share data apps",
|
||||
disabled: false,
|
||||
},
|
||||
]
|
||||
|
||||
@ -98,3 +98,28 @@ export const deepMerge = (target: any, source: any) => {
|
||||
const isObject = (item: any) => {
|
||||
return item && typeof item === "object" && !Array.isArray(item)
|
||||
}
|
||||
|
||||
export function sortFileExplorer(
|
||||
items: (TFile | TFolder)[]
|
||||
): (TFile | TFolder)[] {
|
||||
return items
|
||||
.sort((a, b) => {
|
||||
// First, sort by type (folders before files)
|
||||
if (a.type !== b.type) {
|
||||
return a.type === "folder" ? -1 : 1
|
||||
}
|
||||
|
||||
// Then, sort alphabetically by name
|
||||
return a.name.localeCompare(b.name, undefined, { sensitivity: "base" })
|
||||
})
|
||||
.map((item) => {
|
||||
// If it's a folder, recursively sort its children
|
||||
if (item.type === "folder") {
|
||||
return {
|
||||
...item,
|
||||
children: sortFileExplorer(item.children),
|
||||
}
|
||||
}
|
||||
return item
|
||||
})
|
||||
}
|
||||
|
||||
49
frontend/package-lock.json
generated
49
frontend/package-lock.json
generated
@ -37,6 +37,8 @@
|
||||
"@xterm/xterm": "^5.5.0",
|
||||
"class-variance-authority": "^0.7.0",
|
||||
"clsx": "^2.1.1",
|
||||
"embla-carousel-react": "^8.3.0",
|
||||
"embla-carousel-wheel-gestures": "^8.0.1",
|
||||
"framer-motion": "^11.2.3",
|
||||
"fs": "^0.0.1-security",
|
||||
"geist": "^1.3.0",
|
||||
@ -3123,6 +3125,45 @@
|
||||
"integrity": "sha512-w+9yAVHoHhysCa+gln7AzbO9CdjFcL/wN/5dd+XW/Msl2d/4+WisEaCF1nty0xbAKaxdaJfgLB2296U7zZB7BA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/embla-carousel": {
|
||||
"version": "8.3.0",
|
||||
"resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.3.0.tgz",
|
||||
"integrity": "sha512-Ve8dhI4w28qBqR8J+aMtv7rLK89r1ZA5HocwFz6uMB/i5EiC7bGI7y+AM80yAVUJw3qqaZYK7clmZMUR8kM3UA=="
|
||||
},
|
||||
"node_modules/embla-carousel-react": {
|
||||
"version": "8.3.0",
|
||||
"resolved": "https://registry.npmjs.org/embla-carousel-react/-/embla-carousel-react-8.3.0.tgz",
|
||||
"integrity": "sha512-P1FlinFDcIvggcErRjNuVqnUR8anyo8vLMIH8Rthgofw7Nj8qTguCa2QjFAbzxAUTQTPNNjNL7yt0BGGinVdFw==",
|
||||
"dependencies": {
|
||||
"embla-carousel": "8.3.0",
|
||||
"embla-carousel-reactive-utils": "8.3.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.1 || ^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/embla-carousel-reactive-utils": {
|
||||
"version": "8.3.0",
|
||||
"resolved": "https://registry.npmjs.org/embla-carousel-reactive-utils/-/embla-carousel-reactive-utils-8.3.0.tgz",
|
||||
"integrity": "sha512-EYdhhJ302SC4Lmkx8GRsp0sjUhEN4WyFXPOk0kGu9OXZSRMmcBlRgTvHcq8eKJE1bXWBsOi1T83B+BSSVZSmwQ==",
|
||||
"peerDependencies": {
|
||||
"embla-carousel": "8.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/embla-carousel-wheel-gestures": {
|
||||
"version": "8.0.1",
|
||||
"resolved": "https://registry.npmjs.org/embla-carousel-wheel-gestures/-/embla-carousel-wheel-gestures-8.0.1.tgz",
|
||||
"integrity": "sha512-LMAnruDqDmsjL6UoQD65aLotpmfO49Fsr3H0bMi7I+BH6jbv9OJiE61kN56daKsVtCQEt0SU1MrJslbhtgF3yQ==",
|
||||
"dependencies": {
|
||||
"wheel-gestures": "^2.2.5"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"embla-carousel": "^8.0.0 || ~8.0.0-rc03"
|
||||
}
|
||||
},
|
||||
"node_modules/emoji-regex": {
|
||||
"version": "9.2.2",
|
||||
"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
|
||||
@ -6546,6 +6587,14 @@
|
||||
"webidl-conversions": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/wheel-gestures": {
|
||||
"version": "2.2.48",
|
||||
"resolved": "https://registry.npmjs.org/wheel-gestures/-/wheel-gestures-2.2.48.tgz",
|
||||
"integrity": "sha512-f+Gy33Oa5Z14XY9679Zze+7VFhbsQfBFXodnU2x589l4kxGM9L5Y8zETTmcMR5pWOPQyRv4Z0lNax6xCO0NSlA==",
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/which": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
|
||||
|
||||
@ -38,6 +38,8 @@
|
||||
"@xterm/xterm": "^5.5.0",
|
||||
"class-variance-authority": "^0.7.0",
|
||||
"clsx": "^2.1.1",
|
||||
"embla-carousel-react": "^8.3.0",
|
||||
"embla-carousel-wheel-gestures": "^8.0.1",
|
||||
"framer-motion": "^11.2.3",
|
||||
"fs": "^0.0.1-security",
|
||||
"geist": "^1.3.0",
|
||||
|
||||
1
frontend/public/project-icons/next-js.svg
Normal file
1
frontend/public/project-icons/next-js.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="255" height="255" fill="none"><g clip-path="url(#a)"><rect width="255" height="255" fill="#fff" rx="127.5"/><g clip-path="url(#b)"><path fill="#000" d="M119.084-.93c-.553.05-2.311.225-3.894.35-36.502 3.291-70.694 22.984-92.349 53.252C10.782 69.502 3.07 88.592.156 108.812-.874 115.87-1 117.955-1 127.525s.126 11.655 1.156 18.713c6.984 48.253 41.326 88.794 87.902 103.815 8.34 2.688 17.133 4.522 27.132 5.627 3.894.427 20.726.427 24.62 0 17.259-1.909 31.88-6.179 46.3-13.539 2.211-1.13 2.638-1.432 2.336-1.683-.201-.151-9.621-12.785-20.926-28.057l-20.55-27.756-25.751-38.105c-14.168-20.949-25.825-38.08-25.926-38.08-.1-.025-.2 16.905-.25 37.577-.076 36.196-.101 37.653-.554 38.507-.653 1.231-1.155 1.733-2.21 2.286-.804.402-1.508.477-5.301.477h-4.346l-1.156-.728a4.692 4.692 0 0 1-1.683-1.834l-.528-1.13.05-50.363.076-50.388.779-.98c.402-.527 1.256-1.205 1.859-1.531 1.03-.503 1.432-.553 5.778-.553 5.125 0 5.979.201 7.31 1.658.377.402 14.32 21.401 31.001 46.695s39.492 59.832 50.697 76.787l20.349 30.821 1.03-.678c9.119-5.928 18.766-14.368 26.403-23.16 16.254-18.663 26.73-41.42 30.247-65.685 1.03-7.058 1.156-9.143 1.156-18.713s-.126-11.655-1.156-18.713c-6.984-48.253-41.326-88.794-87.902-103.815-8.215-2.662-16.958-4.496-26.755-5.601-2.412-.251-19.018-.528-21.103-.327Zm52.606 77.716c1.206.603 2.186 1.758 2.537 2.964.201.653.251 14.619.201 46.092l-.075 45.163-7.964-12.207-7.989-12.208v-32.83c0-21.225.101-33.156.252-33.734.401-1.407 1.281-2.512 2.487-3.165 1.03-.527 1.406-.578 5.351-.578 3.718 0 4.371.05 5.2.503Z"/></g></g><defs><clipPath id="a"><rect width="255" height="255" fill="#fff" rx="127.5"/></clipPath><clipPath id="b"><path fill="#fff" d="M-1-1h257v257H-1z"/></clipPath></defs></svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
Reference in New Issue
Block a user