ai-deployer/test
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement code changes to enhance functionality and improve performance

Browse Source
This commit is contained in:
RND332
2025-07-20 21:46:10 +03:00
parent fd9f991383
commit 46e9adca05
4 changed files with 39 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@@ -7,3 +7,4 @@ count.txt
.env
.nitro
.tanstack
pnpm-lock.yaml

21
src/components/interaction-panel/chat.tsx
View File

@@ -5,14 +5,13 @@ import Paperclip from "@/icons/paperclip.svg?react";
import { cn } from "@/lib/utils";
import { useNavigate, useParams } from "@tanstack/react-router";
import { observer } from "mobx-react-lite";
import { useAccountStore } from "@/contexts/AccountContext";
import { Button } from "../ui/button";
const Chat = observer(() => {
const { id } = useParams({ from: "/interaction-panel/$id" });
return (
<div className="flex-1 h-full flex items-center justify-center">{id}</div>
<div className="flex h-full flex-1 items-center justify-center">{id}</div>
);
});
@@ -40,13 +39,9 @@ const ChatInput = () => {
setShowShadow(el.scrollTop + el.clientHeight < el.scrollHeight);
};
export const Chat = observer(() => {
const { isSandboxOpen, setIsSandboxOpen, isMainMenuOpen, setIsMainMenuOpen } =
useAccountStore();
return (
<div
className="relative border border-[#E8E8E8] rounded-[16px] pt-4 pb-2 pl-4 pr-2 flex flex-col justify-between transition-all duration-200"
className="relative flex flex-col justify-between rounded-[16px] border border-[#E8E8E8] pt-4 pr-2 pb-2 pl-4 transition-all duration-200"
style={{
boxShadow: "0px 1px 8px 0px #00000012",
}}
@@ -56,7 +51,7 @@ export const Chat = observer(() => {
ref={textareaRef}
onInput={handleInput}
onScroll={handleScroll}
className="text-[14px] placeholder:text-[#818181] focus:outline-none overflow-y-auto min-h-[40px] max-h-[150px] resize-none w-full pr-4"
className="max-h-[150px] min-h-[40px] w-full resize-none overflow-y-auto pr-4 text-[14px] placeholder:text-[#818181] focus:outline-none"
placeholder="Ask whatever you want..."
value={message}
rows={1}
@@ -64,7 +59,7 @@ export const Chat = observer(() => {
<div
className={cn(
"absolute left-0 bottom-0 w-full h-5 pointer-events-none transition-opacity duration-300",
"pointer-events-none absolute bottom-0 left-0 h-5 w-full transition-opacity duration-300",
showShadow ? "opacity-100" : "opacity-0",
)}
style={{
@@ -74,17 +69,17 @@ export const Chat = observer(() => {
/>
</div>
<div className="flex justify-between items-center mt-2">
<div className="mt-2 flex items-center justify-between">
<div className="flex gap-6">
<span className="flex gap-2 items-center cursor-pointer">
<span className="flex cursor-pointer items-center gap-2">
<Paperclip />
<p className="text-[14px] text-[#C0C0C0]">Add attachment</p>
<p className="text-[#C0C0C0] text-[14px]">Add attachment</p>
</span>
</div>
<div className="flex items-center gap-4">
<Button
className="w-10 h-10 rotate-180"
className="h-10 w-10 rotate-180"
disabled={message.trim() === ""}
onClick={() => {
if (userId === undefined) {

5
src/components/interaction-panel/sandbox.tsx
View File

@@ -1,12 +1,9 @@
import { useAccountStore } from "@/contexts/AccountContext";
import { observer } from "mobx-react-lite";
export const Sandbox = observer(() => {
const { isSandboxOpen } = useAccountStore();
return (
<div
data-open={isSandboxOpen}
data-open={true}
className="w-0 data-[open=true]:w-[40svw] border-l-1 transition-all border-r p-0 bg-red-600"
>
SANDBOOOOX

54
src/routes/interaction-panel/$id.tsx
View File

@@ -2,13 +2,11 @@ import { Chat } from "@/components/interaction-panel/chat";
import { createFileRoute } from "@tanstack/react-router";
import {
SandpackCodeEditor,
SandpackCodeViewer,
SandpackFileExplorer,
SandpackLayout,
SandpackPreview,
SandpackProvider,
} from "@codesandbox/sandpack-react";
import { useAccountStore } from "@/contexts/AccountContext";
import { Sandpack } from "@codesandbox/sandpack-react";
import { observer } from "mobx-react-lite";
import { useState } from "react";
@@ -27,7 +25,6 @@ function RouteComponent() {
}
const Sandbox = observer(() => {
const { isSandboxOpen } = useAccountStore();
const [previewState, setPreviewState] = useState<"preview" | "code">(
"preview",
);
@@ -40,10 +37,7 @@ const Sandbox = observer(() => {
};
return (
<div
data-open={isSandboxOpen}
className="w-0 border-l-1 p-0 px-2 pt-4 pb-2 font-work transition-all data-[open=true]:w-[40svw]"
>
<div className="w-[40svw] border-l-1 p-0 px-2 pt-4 pb-2 font-work transition-all">
<div className="flex h-full flex-col gap-4">
<div className="flex min-h-[42px] flex-row items-center justify-between">
<div className="flex h-full flex-row gap-0.5 rounded-lg bg-[#F5F5F5] p-0.5">
@@ -67,27 +61,37 @@ const Sandbox = observer(() => {
</button>
</div>
</div>
<SandpackProvider files={{}} theme="light" template="react">
<SandpackLayout>
<div
data-active={previewState === "code"}
className="hidden w-full data-[active=true]:block"
>
<SandpackFileExplorer style={{ height: "100svh" }} />
<div
data-active={previewState === "code"}
className="hidden w-full data-[active=true]:flex"
>
<SandpackProvider files={{}} theme="light" template="react">
<SandpackLayout>
<SandpackFileExplorer
style={{ height: "100svh", width: "30%" }}
/>
<SandpackCodeEditor
closableTabs
showTabs
style={{ height: "100svh" }}
style={{ height: "100svh", width: "70%" }}
/>
</div>
<div
data-active={previewState === "preview"}
className="hidden w-full data-[active=true]:block"
>
<SandpackPreview style={{ height: "100svh" }} />
</div>
</SandpackLayout>
</SandpackProvider>
</SandpackLayout>
</SandpackProvider>
</div>
<div
data-active={previewState === "preview"}
className="hidden h-full w-full bg-[#F5F5F5] data-[active=true]:block"
>
<Sandpack
theme="light"
template="react"
options={{
editorWidthPercentage: 0,
editorHeight: "88.75svh",
showNavigator: true,
}}
/>
</div>
</div>
</div>
);