mirror of
https://github.com/supermemoryai/supermemory.git
synced 2026-09-10 22:41:17 +00:00
solve merge conflicts
This commit is contained in:
Dhravya Shah
commit
c57719446a
45 changed files with 1171 additions and 399 deletions
1
.gitattributes
vendored
Normal file
1
.gitattributes
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
*.lockb binary diff=lockb
|
||||
3
.vscode/settings.json
vendored
3
.vscode/settings.json
vendored
|
|
@ -2,5 +2,6 @@
|
|||
"css.validate": false,
|
||||
"editor.quickSuggestions": {
|
||||
"strings": true
|
||||
}
|
||||
},
|
||||
"typescript.tsdk": "node_modules/typescript/lib"
|
||||
}
|
||||
|
|
|
|||
107
SETUP-GUIDE.md
107
SETUP-GUIDE.md
|
|
@ -1,81 +1,134 @@
|
|||
# Setup guide
|
||||
# Self Hosting Guide
|
||||
|
||||
This guide will help you set up your own instance of Supermemory. This is neccessary if you want to contribute to the project or if you want to self host the project. You can read more about the stack [here](https://github.com/supermemoryai/supermemory/?tab=readme-ov-file#-the-stack).
|
||||
|
||||
## Prerequisites
|
||||
|
||||
- [bun](https://bun.sh/)
|
||||
- [turbo](https://turbo.build/repo/docs/installing)
|
||||
- [wrangler](https://developers.cloudflare.com/workers/cli-wrangler/install-update)
|
||||
- [yarn](https://yarnpkg.com/getting-started/install): yarn is required to run scripts using turborepo. bun is not supported by turborepo yet vercel/turbo#4762
|
||||
- [Cloudflare Workers](https://developers.cloudflare.com/workers/platform/pricing/): You also need to have a paid Workers plan to use the vectorize feature which is needed run the AI backend. It is currently $5/mo + usage costs.
|
||||
- [Cloudflare R2](https://developers.cloudflare.com/r2/): You need to enable R2 in the Cloudflare Dashboard for use in the web app.
|
||||
|
||||
## Steps
|
||||
|
||||
1. Clone the repo
|
||||
2. Run `bun install` in the root directory
|
||||
3. Create a `.dev.vars` file in `apps/web` with the following content:
|
||||
|
||||
### web
|
||||
|
||||
1. You need to create OAuth credentials for Google which is need for auth.js (nextauth). Visit https://developers.google.com/identity/protocols/oauth2 to learn more and https://console.cloud.google.com/apis/dashboard to create a new project and OAuth credentials. You need to set the redirect URL to `http://localhost:3000/api/auth/callback/google` for development. You can also set the redirect URL to your own domain if you are deploying the app.
|
||||
2. Create a `.dev.vars` file in `apps/web` with the following content:
|
||||
|
||||
```bash
|
||||
GOOGLE_CLIENT_ID="-" // required, visit https://developers.google.com/identity/protocols/oauth2
|
||||
GOOGLE_CLIENT_SECRET="-" // required
|
||||
NEXTAUTH_SECRET='nextauthsecret'
|
||||
GOOGLE_CLIENT_ID="" // required
|
||||
GOOGLE_CLIENT_SECRET="" // required
|
||||
NEXTAUTH_SECRET="" // generate by running `openssl rand -base64 32`
|
||||
DATABASE_URL='database.sqlite'
|
||||
NEXTAUTH_URL='http://localhost:3000'
|
||||
BACKEND_SECURITY_KEY='veryrandomsecuritykey'
|
||||
BACKEND_BASE_URL="where your backend is hosted"
|
||||
BACKEND_SECURITY_KEY="" // used to authenticate with the backend. generate a random string using `openssl rand -base64 32`
|
||||
BACKEND_BASE_URL="http://localhost:8686"
|
||||
```
|
||||
|
||||
4. Setup the database:
|
||||
> [!NOTE]
|
||||
> The `BACKEND_SECURITY_KEY` should be the same as the `SECURITY_KEY` in the `.dev.vars` file in `apps/cf-ai-backend`.
|
||||
|
||||
First, edit the `wrangler.toml` file in `apps/web` to point the d1 database to your account.
|
||||
3. KV Namespaces
|
||||
|
||||
You can create a d1 database by running this command
|
||||
|
||||
```
|
||||
bunx wrangler d1 create <YOUR_DATABASE_NAME>
|
||||
```bash
|
||||
bunx wrangler kv namespace create canvas-snaps
|
||||
```
|
||||
|
||||
And then replace database_name and database_id with the values
|
||||
```bash
|
||||
bunx wrangler kv namespace create recommendations
|
||||
```
|
||||
|
||||
Do not change the binding value in the `wrangler.toml` but update the id for the namespaces with the values you get from the above commands.
|
||||
|
||||
4. R2 Storage
|
||||
|
||||
```bash
|
||||
bunx wrangler r2 bucket create supermemory-r2
|
||||
```
|
||||
|
||||
Update bucket_name in the `wrangler.toml` file in `apps/web` to `supermemory-r2`
|
||||
|
||||
5. D1 Database
|
||||
|
||||
```bash
|
||||
bunx wrangler d1 create supermemory-db-prod
|
||||
```
|
||||
|
||||
Update the database_name and database_id in `[[env.production.d1_databases]]` with the values you get from the above command.
|
||||
|
||||
```bash
|
||||
bunx wrangler d1 create supermemory-db-preview
|
||||
```
|
||||
|
||||
Update the database_name and database_id in `[[d1_databases]]` and `[[env.preview.d1_databases]]` with the values you get from the above command.
|
||||
|
||||
> [!NOTE]
|
||||
> please don't change the binding value even if wrangler cli suggests you to do so.
|
||||
|
||||
```
|
||||
```bash
|
||||
[[d1_databases]]
|
||||
binding = "DATABASE"
|
||||
database_name = "YOUR_DATABASE_NAME"
|
||||
database_name = "supermemory-db-preview"
|
||||
database_id = "YOUR_DB_ID"
|
||||
```
|
||||
|
||||
Simply run this command in `apps/web`
|
||||
|
||||
```
|
||||
bunx wrangler d1 migrations apply <YOUR_DATABASE_NAME>
|
||||
```bash
|
||||
bunx wrangler d1 migrations apply supermemory-db-preview
|
||||
```
|
||||
|
||||
If it runs, you can set up the cloud database as well by removing the `--local` flag,
|
||||
If it runs, you can set up the cloud database as well by add the `--remote` flag,
|
||||
|
||||
if you just want to contribute to frontend then just run `bun run dev` in the root of the project and done! (you won't be able to try ai stuff), otherwise continue...
|
||||
|
||||
5. You need to host your own worker for the `apps/cf-ai-backend` module.
|
||||
### cf-ai-backend
|
||||
|
||||
1. You need to host your own worker for the `apps/cf-ai-backend` module.
|
||||
|
||||
To do this, first edit the `.dev.vars` file in `apps/cf-ai-backend` with the following content:
|
||||
|
||||
```bash
|
||||
SECURITY_KEY="veryrandomsecuritykey"
|
||||
SECURITY_KEY="veryrandomsecuritykey" // same as BACKEND_SECURITY_KEY in web
|
||||
// Why? to generate embeddings with 4000+ tokens
|
||||
OPENAI_API_KEY="sk-"
|
||||
```
|
||||
|
||||
6. Run this command to initialise vector database
|
||||
2. Run this command to initialise vector database
|
||||
> Note: You need to use the workers paid plan to use vectorize for now.
|
||||
|
||||
```
|
||||
wrangler vectorize create --dimensions=1536 supermem-vector-1 --metric=cosine
|
||||
```bash
|
||||
bunx wrangler vectorize create --dimensions=1536 supermemory --metric=cosine
|
||||
```
|
||||
|
||||
7. Change the `wrangler.toml` file in `apps/cf-ai-backend` to point to your KV namespace
|
||||
Update the index_name for `[[vectorize]]` in `wrangler.toml` file in `apps/cf-ai-backend` with the `supermemory` or the name you used in the above command.
|
||||
|
||||
8. Run `bun dev` in the root directory and Voila! You have your own supermemory instance running!
|
||||
3. Create KV namespaces for the `cf-ai-backend` module
|
||||
|
||||
> Note: You need to replace the url `https://cf-ai-backend.dhr.wtf` everywhere with your own url for the cf-ai-backend module.
|
||||
```bash
|
||||
bunx wrangler kv namespace create prod
|
||||
```
|
||||
|
||||
Update the id in `[[kv_namespaces]]` in the `wrangler.toml` file in `apps/cf-ai-backend` with the value you get from the above command.
|
||||
|
||||
```bash
|
||||
bunx wrangler kv namespace create preview
|
||||
```
|
||||
|
||||
Update the preview_id in `[[kv_namespaces]]` in the `wrangler.toml` file in `apps/cf-ai-backend` with the value you get from the above command.
|
||||
|
||||
## Local Development
|
||||
|
||||
- Run `bun dev` in the root directory and Voila! You have your own supermemory instance running!
|
||||
|
||||
> [!NOTE]
|
||||
> It sometimes takes multiple tries to successfully run the `bun dev` command. If you encounter any issues, try running the command again.
|
||||
|
||||
## Deploying
|
||||
|
||||
|
|
|
|||
|
|
@ -69,43 +69,42 @@ app.get("/api/health", (c) => {
|
|||
});
|
||||
|
||||
app.post("/api/add", zValidator("json", vectorObj), async (c) => {
|
||||
try{
|
||||
const body = c.req.valid("json");
|
||||
try {
|
||||
const body = c.req.valid("json");
|
||||
|
||||
const { store } = await initQuery(c);
|
||||
const { store } = await initQuery(c);
|
||||
|
||||
console.log(body.spaces);
|
||||
let chunks: TweetChunks | PageOrNoteChunks;
|
||||
// remove everything in <raw> tags
|
||||
const newPageContent = body.pageContent?.replace(/<raw>.*?<\/raw>/g, "");
|
||||
console.log(body.spaces);
|
||||
let chunks: TweetChunks | PageOrNoteChunks;
|
||||
// remove everything in <raw> tags
|
||||
const newPageContent = body.pageContent?.replace(/<raw>.*?<\/raw>/g, "");
|
||||
|
||||
switch (body.type) {
|
||||
case "tweet":
|
||||
chunks = chunkThread(newPageContent);
|
||||
break;
|
||||
switch (body.type) {
|
||||
case "tweet":
|
||||
chunks = chunkThread(newPageContent);
|
||||
break;
|
||||
|
||||
case "page":
|
||||
chunks = chunkPage(newPageContent);
|
||||
break;
|
||||
case "page":
|
||||
chunks = chunkPage(newPageContent);
|
||||
break;
|
||||
|
||||
case "note":
|
||||
chunks = chunkNote(newPageContent);
|
||||
break;
|
||||
case "note":
|
||||
chunks = chunkNote(newPageContent);
|
||||
break;
|
||||
}
|
||||
|
||||
await batchCreateChunksAndEmbeddings({
|
||||
store,
|
||||
body,
|
||||
chunks: chunks,
|
||||
context: c,
|
||||
});
|
||||
|
||||
return c.json({ status: "ok" });
|
||||
} catch (error) {
|
||||
console.error("Error processing request:", error);
|
||||
return c.json({ status: "error", message: error.message }, 500);
|
||||
}
|
||||
|
||||
|
||||
await batchCreateChunksAndEmbeddings({
|
||||
store,
|
||||
body,
|
||||
chunks: chunks,
|
||||
context: c,
|
||||
});
|
||||
|
||||
return c.json({ status: "ok" });
|
||||
}catch(error){
|
||||
console.error("Error processing request:", error);
|
||||
return c.json({ status: "error", message: error.message }, 500);
|
||||
}
|
||||
});
|
||||
|
||||
app.post(
|
||||
|
|
@ -425,6 +424,7 @@ app.post(
|
|||
spaces: z.string().optional(),
|
||||
sourcesOnly: z.string().optional().default("false"),
|
||||
model: z.string().optional().default("gpt-4o"),
|
||||
proMode: z.string().optional().default("false"),
|
||||
}),
|
||||
),
|
||||
zValidator("json", chatObj),
|
||||
|
|
@ -433,6 +433,7 @@ app.post(
|
|||
const body = c.req.valid("json");
|
||||
|
||||
const sourcesOnly = query.sourcesOnly === "true";
|
||||
const proMode = query.proMode === "true";
|
||||
|
||||
// Return early for dumb requests
|
||||
if (sourcesOnly && body.sources) {
|
||||
|
|
@ -440,7 +441,6 @@ app.post(
|
|||
}
|
||||
|
||||
const spaces = query.spaces?.split(",") ?? [undefined];
|
||||
console.log(spaces);
|
||||
|
||||
// Get the AI model maker and vector store
|
||||
const { model, store } = await initQuery(c, query.model);
|
||||
|
|
@ -449,14 +449,67 @@ app.post(
|
|||
const filter: VectorizeVectorMetadataFilter = {
|
||||
[`user-${query.user}`]: 1,
|
||||
};
|
||||
console.log("Spaces", spaces);
|
||||
|
||||
let proModeListedQueries: string[] = [];
|
||||
|
||||
if (proMode) {
|
||||
const addedToQuery = (await c.env.AI.run(
|
||||
// @ts-ignore
|
||||
"@hf/nousresearch/hermes-2-pro-mistral-7b",
|
||||
{
|
||||
messages: [
|
||||
{
|
||||
role: "system",
|
||||
content:
|
||||
"You are a query enhancer. You must enhance a user's query to make it more relevant to what the user might be looking for. If there's any mention of dates like 'last summer' or 'this year', you should return 'DAY: X, MONTH: Y, YEAR: Z'. If there's any mention of locations, add that to the query too. Try to keep your responses as short as possible. Add to the user's query, don't replace it. Make sure to keep your answers short.",
|
||||
},
|
||||
{ role: "user", content: query.query },
|
||||
],
|
||||
tools: [
|
||||
{
|
||||
type: "function",
|
||||
function: {
|
||||
name: "Enhance query get list",
|
||||
description:
|
||||
"Enhance the user's query to make it more relevant",
|
||||
parameters: {
|
||||
type: "object",
|
||||
properties: {
|
||||
listedQueries: {
|
||||
type: "array",
|
||||
description: "List of queries that the user has asked",
|
||||
items: {
|
||||
type: "string",
|
||||
},
|
||||
},
|
||||
},
|
||||
required: ["Enhance query get list"],
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
max_tokens: 200,
|
||||
},
|
||||
)) as {
|
||||
response?: string;
|
||||
tool_calls?: {
|
||||
name: string;
|
||||
arguments: {
|
||||
listedQueries: string[];
|
||||
};
|
||||
}[];
|
||||
};
|
||||
|
||||
proModeListedQueries =
|
||||
addedToQuery.tool_calls?.[0]?.arguments?.listedQueries ?? [];
|
||||
}
|
||||
|
||||
// Converting the query to a vector so that we can search for similar vectors
|
||||
const queryAsVector = await store.embeddings.embedQuery(query.query);
|
||||
const queryAsVector = await store.embeddings.embedQuery(
|
||||
query.query + " " + proModeListedQueries.join(" "),
|
||||
);
|
||||
const responses: VectorizeMatches = { matches: [], count: 0 };
|
||||
|
||||
console.log("hello world", spaces);
|
||||
|
||||
// SLICED to 5 to avoid too many queries
|
||||
for (const space of spaces.slice(0, 5)) {
|
||||
if (space && space.length >= 1) {
|
||||
|
|
@ -523,7 +576,13 @@ app.post(
|
|||
);
|
||||
|
||||
const metadata = normalizedData.map((datapoint) => datapoint.metadata);
|
||||
return c.json({ ids: storedContent, metadata, normalizedData });
|
||||
|
||||
return c.json({
|
||||
ids: storedContent,
|
||||
metadata,
|
||||
normalizedData,
|
||||
proModeListedQueries,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -50,6 +50,7 @@ export class OpenAIEmbeddings {
|
|||
const json = zodTypeExpected.safeParse(data);
|
||||
|
||||
if (!json.success) {
|
||||
console.log(JSON.stringify(data));
|
||||
throw new Error("Invalid response from OpenAI: " + json.error.message);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"manifest_version": 3,
|
||||
"$schema": "https://json.schemastore.org/chrome-manifest",
|
||||
"version": "2.63",
|
||||
"version": "2.63.1",
|
||||
"name": "supermemory",
|
||||
"description": "An extension for https://supermemory.ai - an AI hub for all your bookmarks.",
|
||||
"background": {
|
||||
|
|
|
|||
|
|
@ -1,17 +1,16 @@
|
|||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import {
|
||||
ArrowUturnDownIcon,
|
||||
ChevronLeftIcon,
|
||||
ChevronRightIcon,
|
||||
QuestionMarkCircleIcon,
|
||||
ArrowTurnDownLeftIcon,
|
||||
} from "@heroicons/react/24/solid";
|
||||
import { CheckIcon, PlusCircleIcon } from "@heroicons/react/24/outline";
|
||||
import { motion } from "framer-motion";
|
||||
import { useState } from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { createMemory } from "@repo/web/app/actions/doers";
|
||||
import { completeOnboarding, createMemory } from "@repo/web/app/actions/doers";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Logo from "../../../public/logo.svg";
|
||||
import Image from "next/image";
|
||||
|
|
@ -20,6 +19,18 @@ import gradientStyle from "../signin/_components/TextGradient/gradient.module.cs
|
|||
|
||||
export default function Home() {
|
||||
const [currStep, setCurrStep] = useState(0);
|
||||
const { push } = useRouter();
|
||||
|
||||
useEffect(() => {
|
||||
const updateDb = async () => {
|
||||
await completeOnboarding();
|
||||
};
|
||||
if (currStep > 3) {
|
||||
updateDb().then(() => {
|
||||
push("/home?q=what%20is%20supermemory");
|
||||
});
|
||||
}
|
||||
}, [currStep]);
|
||||
|
||||
return (
|
||||
<main className="min-h-screen text-sm text-[#B8C4C6] font-geistSans">
|
||||
|
|
@ -175,7 +186,7 @@ function StepIndicator({
|
|||
/>
|
||||
<p>Step: {currStep}/3</p>
|
||||
<ChevronRightIcon
|
||||
className="h-6"
|
||||
className="h-6 cursor-pointer"
|
||||
onClick={() => currStep <= 3 && setCurrStep(currStep + 1)}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -300,7 +311,7 @@ function StepThree({ currStep }: { currStep: number }) {
|
|||
type="submit"
|
||||
className="rounded-lg bg-[#369DFD1A] p-3 absolute bottom-4 right-2"
|
||||
>
|
||||
<ArrowTurnDownLeftIcon className="w-4 h-4 text-[#369DFD]" />
|
||||
<ArrowUturnDownIcon className="w-4 h-4 text-[#369DFD]" />
|
||||
</button>
|
||||
</form>
|
||||
</li>
|
||||
|
|
@ -374,6 +385,12 @@ function StepTwo({ currStep }: { currStep: number }) {
|
|||
}
|
||||
|
||||
function Navbar() {
|
||||
const router = useRouter();
|
||||
const handleSkip = async () => {
|
||||
await completeOnboarding();
|
||||
router.push("/home?q=what%20is%20supermemory");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-between p-4 fixed top-0 left-0 w-full">
|
||||
<Image
|
||||
|
|
@ -382,9 +399,9 @@ function Navbar() {
|
|||
className="hover:brightness-125 duration-200 size-12"
|
||||
/>
|
||||
|
||||
<Link href="/home">
|
||||
<button className="text-sm">Skip</button>
|
||||
</Link>
|
||||
<button className="text-sm" onClick={handleSkip}>
|
||||
Skip
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ async function Signin({
|
|||
const user = await auth();
|
||||
|
||||
if (user) {
|
||||
await redirect("/home");
|
||||
redirect("/home");
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
@ -64,7 +64,7 @@ async function Signin({
|
|||
action={async () => {
|
||||
"use server";
|
||||
await signIn("google", {
|
||||
redirectTo: "/home?firstTime=true",
|
||||
redirectTo: "/home",
|
||||
});
|
||||
}}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -7,9 +7,15 @@ async function Page({
|
|||
}: {
|
||||
searchParams: Record<string, string | string[] | undefined>;
|
||||
}) {
|
||||
const q = (searchParams?.q as string) ?? "from_loading";
|
||||
const q = (searchParams?.q as string) ?? "";
|
||||
return (
|
||||
<ChatWindow q={q} spaces={[]} initialChat={undefined} threadId={"idk"} />
|
||||
<ChatWindow
|
||||
proMode={false}
|
||||
q={q}
|
||||
spaces={[]}
|
||||
initialChat={undefined}
|
||||
threadId={"idk"}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,8 @@ async function Page({
|
|||
params: { chatid: string };
|
||||
searchParams: Record<string, string | string[] | undefined>;
|
||||
}) {
|
||||
const { firstTime, q, spaces } = chatSearchParamsCache.parse(searchParams);
|
||||
const { firstTime, q, spaces, proMode } =
|
||||
chatSearchParamsCache.parse(searchParams);
|
||||
|
||||
let chat: Awaited<ReturnType<typeof getFullChatThread>>;
|
||||
|
||||
|
|
@ -31,6 +32,7 @@ async function Page({
|
|||
spaces={spaces ?? []}
|
||||
initialChat={chat.data.length > 0 ? chat.data : undefined}
|
||||
threadId={params.chatid}
|
||||
proMode={proMode}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -35,14 +35,19 @@ function ChatWindow({
|
|||
parts: [],
|
||||
sources: [],
|
||||
},
|
||||
proModeProcessing: {
|
||||
queries: [],
|
||||
},
|
||||
},
|
||||
],
|
||||
threadId,
|
||||
proMode,
|
||||
}: {
|
||||
q: string;
|
||||
spaces: { id: number; name: string }[];
|
||||
initialChat?: ChatHistory[];
|
||||
threadId: string;
|
||||
proMode: boolean;
|
||||
}) {
|
||||
const [layout, setLayout] = useState<"chat" | "initial">("chat");
|
||||
const [chatHistory, setChatHistory] = useState<ChatHistory[]>(initialChat);
|
||||
|
|
@ -63,13 +68,17 @@ function ChatWindow({
|
|||
|
||||
const router = useRouter();
|
||||
|
||||
const getAnswer = async (query: string, spaces: string[]) => {
|
||||
const getAnswer = async (
|
||||
query: string,
|
||||
spaces: string[],
|
||||
proMode: boolean = false,
|
||||
) => {
|
||||
if (query.trim() === "from_loading" || query.trim().length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
const sourcesFetch = await fetch(
|
||||
`/api/chat?q=${query}&spaces=${spaces}&sourcesOnly=true&threadId=${threadId}`,
|
||||
`/api/chat?q=${query}&spaces=${spaces}&sourcesOnly=true&threadId=${threadId}&proMode=${proMode}`,
|
||||
{
|
||||
method: "POST",
|
||||
body: JSON.stringify({ chatHistory }),
|
||||
|
|
@ -91,6 +100,8 @@ function ChatWindow({
|
|||
behavior: "smooth",
|
||||
});
|
||||
|
||||
let proModeListedQueries: string[] = [];
|
||||
|
||||
const updateChatHistoryAndFetch = async () => {
|
||||
// Step 1: Update chat history with the assistant's response
|
||||
await new Promise((resolve) => {
|
||||
|
|
@ -123,6 +134,11 @@ function ChatWindow({
|
|||
).length,
|
||||
}));
|
||||
|
||||
lastAnswer.proModeProcessing.queries =
|
||||
sourcesParsed.data.proModeListedQueries ?? [];
|
||||
|
||||
proModeListedQueries = lastAnswer.proModeProcessing.queries;
|
||||
|
||||
resolve(newChatHistory);
|
||||
return newChatHistory;
|
||||
});
|
||||
|
|
@ -130,7 +146,7 @@ function ChatWindow({
|
|||
|
||||
// Step 2: Fetch data from the API
|
||||
const resp = await fetch(
|
||||
`/api/chat?q=${query}&spaces=${spaces}&threadId=${threadId}`,
|
||||
`/api/chat?q=${(query += proModeListedQueries.join(" "))}&spaces=${spaces}&threadId=${threadId}`,
|
||||
{
|
||||
method: "POST",
|
||||
body: JSON.stringify({ chatHistory, sources: sourcesParsed.data }),
|
||||
|
|
@ -181,6 +197,7 @@ function ChatWindow({
|
|||
getAnswer(
|
||||
q,
|
||||
spaces.map((s) => `${s.id}`),
|
||||
proMode,
|
||||
);
|
||||
}
|
||||
} else {
|
||||
|
|
@ -224,6 +241,28 @@ function ChatWindow({
|
|||
{chat.question}
|
||||
</h2>
|
||||
|
||||
{chat.proModeProcessing?.queries?.length > 0 && (
|
||||
<div className="flex flex-col mt-2">
|
||||
<div className="text-foreground-menu py-2">
|
||||
Pro Mode
|
||||
</div>
|
||||
<div className="text-base">
|
||||
<div className="flex gap-2 text-base">
|
||||
{chat.proModeProcessing.queries.map(
|
||||
(query, idx) => (
|
||||
<div
|
||||
className="bg-secondary rounded-md p-2"
|
||||
key={`promode-query-${idx}`}
|
||||
>
|
||||
{query}
|
||||
</div>
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex flex-col mt-2">
|
||||
<div>
|
||||
<div className="text-foreground-menu py-2">Answer</div>
|
||||
|
|
@ -407,6 +446,9 @@ function ChatWindow({
|
|||
parts: [],
|
||||
sources: [],
|
||||
},
|
||||
proModeProcessing: {
|
||||
queries: [],
|
||||
},
|
||||
},
|
||||
];
|
||||
});
|
||||
|
|
|
|||
5
apps/web/app/(dash)/chat/route.ts
Normal file
5
apps/web/app/(dash)/chat/route.ts
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
import { redirect } from "next/navigation";
|
||||
|
||||
export async function GET() {
|
||||
return redirect("/home");
|
||||
}
|
||||
|
|
@ -100,7 +100,7 @@ export function DialogContentContainer({
|
|||
}, []);
|
||||
|
||||
return (
|
||||
<DialogContent className="sm:max-w-[475px] text-[#F2F3F5] rounded-2xl bg-background z-[39] backdrop-blur-md">
|
||||
<DialogContent className="sm:max-w-[475px] text-[#F2F3F5] rounded-2xl bg-background z-[39]">
|
||||
<form
|
||||
action={async (e: FormData) => {
|
||||
const content = e.get("content")?.toString();
|
||||
|
|
|
|||
|
|
@ -13,8 +13,6 @@ import React from "react";
|
|||
function AutoBreadCrumbs() {
|
||||
const pathname = usePathname();
|
||||
|
||||
console.log(pathname.split("/").filter(Boolean));
|
||||
|
||||
return (
|
||||
<Breadcrumb className="hidden md:block">
|
||||
<BreadcrumbList>
|
||||
|
|
@ -31,7 +29,7 @@ function AutoBreadCrumbs() {
|
|||
.filter(Boolean)
|
||||
.map((path, idx, paths) => (
|
||||
<>
|
||||
<BreadcrumbItem key={path}>
|
||||
<BreadcrumbItem key={path + idx}>
|
||||
<BreadcrumbLink href={`/${paths.slice(0, idx + 1).join("/")}`}>
|
||||
{path.charAt(0).toUpperCase() + path.slice(1)}
|
||||
</BreadcrumbLink>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,14 @@ import Logo from "../../../public/logo.svg";
|
|||
import { getChatHistory } from "../../actions/fetchers";
|
||||
import NewChatButton from "./newChatButton";
|
||||
import AutoBreadCrumbs from "./autoBreadCrumbs";
|
||||
import SignOutButton from "./signOutButton";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "@repo/ui/shadcn/dropdown-menu";
|
||||
import { CaretDownIcon } from "@radix-ui/react-icons";
|
||||
|
||||
async function Header() {
|
||||
const chatThreads = await getChatHistory();
|
||||
|
|
@ -32,26 +40,28 @@ async function Header() {
|
|||
<div className="flex items-center gap-2">
|
||||
<NewChatButton />
|
||||
|
||||
<div className="relative group">
|
||||
<button className="flex duration-200 items-center text-[#7D8994] hover:bg-[#1F2429] text-[13px] gap-2 px-3 py-2 rounded-xl">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger className="inline-flex flex-row flex-nowrap items-center text-muted-foreground hover:text-foreground">
|
||||
History
|
||||
</button>
|
||||
|
||||
<div className="absolute p-4 hidden group-hover:block right-0 w-full md:w-[400px] max-h-[70vh] overflow-auto">
|
||||
<div className="bg-[#1F2429] rounded-xl p-2 flex flex-col shadow-lg">
|
||||
{chatThreads.data.map((thread) => (
|
||||
<CaretDownIcon />
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className="p-4 w-full md:w-[400px] max-h-[70vh] overflow-auto border-none">
|
||||
{chatThreads.data.map((thread) => (
|
||||
<DropdownMenuItem asChild>
|
||||
<Link
|
||||
prefetch={false}
|
||||
href={`/chat/${thread.id}`}
|
||||
key={thread.id}
|
||||
className="p-2 rounded-md hover:bg-secondary"
|
||||
className="p-2 rounded-md cursor-pointer focus:bg-secondary focus:text-current"
|
||||
>
|
||||
{thread.firstMessage}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
|
||||
<SignOutButton />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
22
apps/web/app/(dash)/header/signOutButton.tsx
Normal file
22
apps/web/app/(dash)/header/signOutButton.tsx
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
import { signOut } from "@/server/auth";
|
||||
import { Button } from "@repo/ui/shadcn/button";
|
||||
|
||||
export default function SignOutButton() {
|
||||
return (
|
||||
<form
|
||||
action={async () => {
|
||||
"use server";
|
||||
await signOut();
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
type="submit"
|
||||
className="text-[#7D8994]"
|
||||
>
|
||||
Sign Out
|
||||
</Button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,53 +1,65 @@
|
|||
import { getChatHistory } from '@repo/web/app/actions/fetchers';
|
||||
import { ArrowLongRightIcon } from '@heroicons/react/24/outline';
|
||||
import { Skeleton } from '@repo/ui/shadcn/skeleton';
|
||||
import Link from 'next/link';
|
||||
import { memo, useEffect, useState } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { chatThreads } from '@/server/db/schema';
|
||||
import { ArrowLongRightIcon } from "@heroicons/react/24/outline";
|
||||
import { Skeleton } from "@repo/ui/shadcn/skeleton";
|
||||
import { memo, useEffect, useState } from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import { getQuerySuggestions } from "@/app/actions/doers";
|
||||
|
||||
const History = memo(() => {
|
||||
const [chatThreads_, setChatThreads] = useState<
|
||||
(typeof chatThreads.$inferSelect)[] | null
|
||||
>(null);
|
||||
const History = memo(({ setQuery }: { setQuery: (q: string) => void }) => {
|
||||
const [suggestions, setSuggestions] = useState<string[] | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
const chatThreads = await getChatHistory();
|
||||
if (!chatThreads.success || !chatThreads.data) {
|
||||
console.error(chatThreads.error);
|
||||
return;
|
||||
}
|
||||
setChatThreads(chatThreads.data.reverse().slice(0, 3));
|
||||
})();
|
||||
}, []);
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
const suggestions = await getQuerySuggestions();
|
||||
if (!suggestions.success || !suggestions.data) {
|
||||
console.error(suggestions.error);
|
||||
setSuggestions([]);
|
||||
return;
|
||||
}
|
||||
console.log(suggestions);
|
||||
if (typeof suggestions.data === "string") {
|
||||
const queries = suggestions.data.slice(1, -1).split(", ");
|
||||
const parsedQueries = queries.map((query) =>
|
||||
query.replace(/^'|'$/g, ""),
|
||||
);
|
||||
console.log(parsedQueries);
|
||||
setSuggestions(parsedQueries);
|
||||
return;
|
||||
}
|
||||
setSuggestions(suggestions.data.reverse().slice(0, 3));
|
||||
})();
|
||||
}, []);
|
||||
|
||||
if (!chatThreads) {
|
||||
return (
|
||||
<>
|
||||
<Skeleton className="w-[80%] h-4 bg-[#3b444b] "></Skeleton>
|
||||
<Skeleton className="w-[40%] h-4 bg-[#3b444b] "></Skeleton>
|
||||
<Skeleton className="w-[60%] h-4 bg-[#3b444b] "></Skeleton>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ul className="text-base list-none space-y-3 text-[#b9b9b9] mt-8">
|
||||
{chatThreads_?.map((thread) => (
|
||||
<motion.li
|
||||
initial={{ opacity: 0, filter: 'blur(1px)' }}
|
||||
animate={{ opacity: 1, filter: 'blur(0px)' }}
|
||||
className="flex items-center gap-2 truncate"
|
||||
>
|
||||
<ArrowLongRightIcon className="h-5" />{' '}
|
||||
<Link prefetch={false} href={`/chat/${thread.id}`}>
|
||||
{thread.firstMessage}
|
||||
</Link>
|
||||
</motion.li>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
return (
|
||||
<ul className="text-base list-none space-y-3 text-[#b9b9b9] mt-8">
|
||||
{!suggestions && (
|
||||
<>
|
||||
<Skeleton
|
||||
key="loader-1"
|
||||
className="w-[80%] h-4 bg-[#3b444b] "
|
||||
></Skeleton>
|
||||
<Skeleton
|
||||
key="loader-2"
|
||||
className="w-[40%] h-4 bg-[#3b444b] "
|
||||
></Skeleton>
|
||||
<Skeleton
|
||||
key="loader-3"
|
||||
className="w-[60%] h-4 bg-[#3b444b] "
|
||||
></Skeleton>
|
||||
</>
|
||||
)}
|
||||
{suggestions?.map((suggestion) => (
|
||||
<motion.li
|
||||
initial={{ opacity: 0, filter: "blur(1px)" }}
|
||||
animate={{ opacity: 1, filter: "blur(0px)" }}
|
||||
className="flex items-center gap-2 truncate cursor-pointer"
|
||||
key={suggestion}
|
||||
onClick={() => setQuery(suggestion)}
|
||||
>
|
||||
<ArrowLongRightIcon className="h-5" /> {suggestion}
|
||||
</motion.li>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
});
|
||||
|
||||
export default History;
|
||||
|
|
|
|||
|
|
@ -4,12 +4,15 @@ import React, { useEffect, useState } from "react";
|
|||
import QueryInput from "./queryinput";
|
||||
import { getSessionAuthToken, getSpaces } from "@/app/actions/fetchers";
|
||||
import { redirect, useRouter } from "next/navigation";
|
||||
import { createChatThread, linkTelegramToUser } from "@/app/actions/doers";
|
||||
import {
|
||||
createChatThread,
|
||||
getQuerySuggestions,
|
||||
linkTelegramToUser,
|
||||
} from "@/app/actions/doers";
|
||||
import { toast } from "sonner";
|
||||
import { motion } from "framer-motion";
|
||||
import { ChromeIcon, GithubIcon, TwitterIcon } from "lucide-react";
|
||||
import { ChromeIcon, GithubIcon, MailIcon, TwitterIcon } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { homeSearchParamsCache } from "@/lib/searchParams";
|
||||
import History from "./history";
|
||||
|
||||
const slap = {
|
||||
|
|
@ -26,28 +29,14 @@ const slap = {
|
|||
};
|
||||
|
||||
function Page({ searchParams }: { searchParams: Record<string, string> }) {
|
||||
// TODO: use this to show a welcome page/modal
|
||||
const firstTime = searchParams.firstTime === "true";
|
||||
|
||||
const query = searchParams.q || "";
|
||||
|
||||
if (firstTime) {
|
||||
redirect("/onboarding");
|
||||
}
|
||||
|
||||
const [queryPresent, setQueryPresent] = useState<boolean>(false);
|
||||
|
||||
const [telegramUser, setTelegramUser] = useState<string | undefined>(
|
||||
searchParams.telegramUser as string,
|
||||
);
|
||||
const [extensionInstalled, setExtensionInstalled] = useState<
|
||||
string | undefined
|
||||
>(searchParams.extension as string);
|
||||
|
||||
const { push } = useRouter();
|
||||
const telegramUser = searchParams.telegramUser;
|
||||
const extensionInstalled = searchParams.extension;
|
||||
const [query, setQuery] = useState(searchParams.q || "");
|
||||
|
||||
const [spaces, setSpaces] = useState<{ id: number; name: string }[]>([]);
|
||||
|
||||
const { push } = useRouter();
|
||||
|
||||
useEffect(() => {
|
||||
if (telegramUser) {
|
||||
const linkTelegram = async () => {
|
||||
|
|
@ -63,10 +52,6 @@ function Page({ searchParams }: { searchParams: Record<string, string> }) {
|
|||
linkTelegram();
|
||||
}
|
||||
|
||||
if (extensionInstalled) {
|
||||
toast.success("Extension installed successfully");
|
||||
}
|
||||
|
||||
getSpaces().then((res) => {
|
||||
if (res.success && res.data) {
|
||||
setSpaces(res.data);
|
||||
|
|
@ -77,21 +62,21 @@ function Page({ searchParams }: { searchParams: Record<string, string> }) {
|
|||
|
||||
getSessionAuthToken().then((token) => {
|
||||
if (typeof window === "undefined") return;
|
||||
if (extensionInstalled) {
|
||||
toast.success("Extension installed successfully");
|
||||
}
|
||||
window.postMessage({ token: token.data }, "*");
|
||||
});
|
||||
}, [telegramUser]);
|
||||
|
||||
return (
|
||||
<div className="max-w-3xl h-full justify-center flex mx-auto w-full flex-col px-2 md:px-0">
|
||||
{/* all content goes here */}
|
||||
{/* <div className="">hi {firstTime ? 'first time' : ''}</div> */}
|
||||
|
||||
<motion.h1
|
||||
{...{
|
||||
...slap,
|
||||
transition: { ...slap.transition, delay: 0.2 },
|
||||
}}
|
||||
className="text-center mx-auto bg-[linear-gradient(180deg,_#FFF_0%,_rgba(255,_255,_255,_0.00)_202.08%)] bg-clip-text text-4xl tracking-tighter text-transparent md:text-5xl"
|
||||
className="text-center mx-auto bg-[linear-gradient(180deg,_#FFF_0%,_rgba(255,_255,_255,_0.00)_202.08%)] bg-clip-text text-4xl tracking-tighter text-transparent md:text-5xl pb-2"
|
||||
>
|
||||
<span>Ask your</span>{" "}
|
||||
<span className="inline-flex items-center gap-2 bg-gradient-to-r to-blue-300 from-zinc-300 text-transparent bg-clip-text">
|
||||
|
|
@ -99,17 +84,16 @@ function Page({ searchParams }: { searchParams: Record<string, string> }) {
|
|||
</span>
|
||||
</motion.h1>
|
||||
|
||||
<div className="w-full pb-20 mt-12">
|
||||
<div className="w-full pb-20 mt-10">
|
||||
<QueryInput
|
||||
initialQuery={query}
|
||||
setQueryPresent={setQueryPresent}
|
||||
handleSubmit={async (q, spaces) => {
|
||||
query={query}
|
||||
setQuery={setQuery}
|
||||
handleSubmit={async (q, spaces, proMode) => {
|
||||
if (q.length === 0) {
|
||||
toast.error("Query is required");
|
||||
return;
|
||||
}
|
||||
|
||||
console.log("creating thread");
|
||||
const threadid = await createChatThread(q);
|
||||
|
||||
if (!threadid.success || !threadid.data) {
|
||||
|
|
@ -117,15 +101,14 @@ function Page({ searchParams }: { searchParams: Record<string, string> }) {
|
|||
return;
|
||||
}
|
||||
|
||||
console.log("pushing to chat");
|
||||
push(
|
||||
`/chat/${threadid.data}?spaces=${JSON.stringify(spaces)}&q=${q}`,
|
||||
`/chat/${threadid.data}?spaces=${JSON.stringify(spaces)}&q=${q}&proMode=${proMode}`,
|
||||
);
|
||||
}}
|
||||
initialSpaces={spaces}
|
||||
/>
|
||||
|
||||
<History />
|
||||
<History setQuery={setQuery} />
|
||||
</div>
|
||||
|
||||
<div className="w-full fixed bottom-0 left-0 p-4">
|
||||
|
|
@ -140,12 +123,12 @@ function Page({ searchParams }: { searchParams: Record<string, string> }) {
|
|||
Install extension
|
||||
</Link>
|
||||
<Link
|
||||
href="https://github.com/supermemoryai/supermemory/issues/new"
|
||||
href="mailto:feedback@supermemory.ai"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="flex items-center gap-2 text-muted-foreground hover:text-grey-50 duration-300"
|
||||
>
|
||||
<GithubIcon className="w-4 h-4" />
|
||||
<MailIcon className="w-4 h-4" />
|
||||
Bug report
|
||||
</Link>
|
||||
<Link
|
||||
|
|
|
|||
|
|
@ -1,26 +1,32 @@
|
|||
"use client";
|
||||
|
||||
import React, { useState } from "react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { FilterSpaces } from "./filterSpaces";
|
||||
import { ArrowRightIcon } from "@repo/ui/icons";
|
||||
import Image from "next/image";
|
||||
import { Switch } from "@repo/ui/shadcn/switch";
|
||||
import { Label } from "@repo/ui/shadcn/label";
|
||||
|
||||
function QueryInput({
|
||||
setQueryPresent,
|
||||
initialQuery,
|
||||
initialSpaces,
|
||||
handleSubmit,
|
||||
query,
|
||||
setQuery,
|
||||
}: {
|
||||
setQueryPresent: (t: boolean) => void;
|
||||
initialSpaces?: {
|
||||
id: number;
|
||||
name: string;
|
||||
}[];
|
||||
initialQuery?: string;
|
||||
mini?: boolean;
|
||||
handleSubmit: (q: string, spaces: { id: number; name: string }[]) => void;
|
||||
handleSubmit: (
|
||||
q: string,
|
||||
spaces: { id: number; name: string }[],
|
||||
proMode: boolean,
|
||||
) => void;
|
||||
query: string;
|
||||
setQuery: (q: string) => void;
|
||||
}) {
|
||||
const [q, setQ] = useState(initialQuery || "");
|
||||
const [proMode, setProMode] = useState(false);
|
||||
|
||||
const [selectedSpaces, setSelectedSpaces] = useState<
|
||||
{ id: number; name: string }[]
|
||||
|
|
@ -34,11 +40,11 @@ function QueryInput({
|
|||
{/* input and action button */}
|
||||
<form
|
||||
action={async () => {
|
||||
if (q.trim().length === 0) {
|
||||
if (query.trim().length === 0) {
|
||||
return;
|
||||
}
|
||||
handleSubmit(q, selectedSpaces);
|
||||
setQ("");
|
||||
handleSubmit(query, selectedSpaces, proMode);
|
||||
setQuery("");
|
||||
}}
|
||||
>
|
||||
<textarea
|
||||
|
|
@ -51,20 +57,15 @@ function QueryInput({
|
|||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
if (q.trim().length === 0) {
|
||||
if (query.trim().length === 0) {
|
||||
return;
|
||||
}
|
||||
handleSubmit(q, selectedSpaces);
|
||||
setQ("");
|
||||
handleSubmit(query, selectedSpaces, proMode);
|
||||
setQuery("");
|
||||
}
|
||||
}}
|
||||
onChange={(e) =>
|
||||
setQ((prev) => {
|
||||
setQueryPresent(!!e.target.value.length);
|
||||
return e.target.value;
|
||||
})
|
||||
}
|
||||
value={q}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
value={query}
|
||||
/>
|
||||
<div className="flex p-2 px-3 w-full items-center justify-between rounded-xl overflow-hidden">
|
||||
<FilterSpaces
|
||||
|
|
@ -72,9 +73,22 @@ function QueryInput({
|
|||
setSelectedSpaces={setSelectedSpaces}
|
||||
initialSpaces={initialSpaces || []}
|
||||
/>
|
||||
<button type="submit" className="rounded-lg bg-[#369DFD1A] p-3">
|
||||
<Image src={ArrowRightIcon} alt="Enter" />
|
||||
</button>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Label htmlFor="pro-mode" className="text-sm text-[#9B9B9B]">
|
||||
Pro mode
|
||||
</Label>
|
||||
<Switch
|
||||
value={proMode ? "on" : "off"}
|
||||
onCheckedChange={(v) => setProMode(v)}
|
||||
id="pro-mode"
|
||||
about="Pro mode"
|
||||
/>
|
||||
</div>
|
||||
<button type="submit" className="rounded-lg bg-[#369DFD1A] p-3">
|
||||
<Image src={ArrowRightIcon} alt="Enter" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import { redirect } from "next/navigation";
|
|||
import { auth } from "../../server/auth";
|
||||
import { Toaster } from "@repo/ui/shadcn/sonner";
|
||||
import BackgroundPlus from "../(landing)/GridPatterns/PlusGrid";
|
||||
import { getUser } from "../actions/fetchers";
|
||||
|
||||
async function Layout({ children }: { children: React.ReactNode }) {
|
||||
const info = await auth();
|
||||
|
|
@ -12,6 +13,13 @@ async function Layout({ children }: { children: React.ReactNode }) {
|
|||
return redirect("/signin");
|
||||
}
|
||||
|
||||
const user = await getUser();
|
||||
const hasOnboarded = user.data?.hasOnboarded;
|
||||
|
||||
if (!hasOnboarded) {
|
||||
redirect("/onboarding");
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="h-screen flex flex-col">
|
||||
<div className="fixed top-0 left-0 w-full z-40">
|
||||
|
|
|
|||
|
|
@ -1,176 +1,365 @@
|
|||
import React from 'react';
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
import { MemoriesIcon, CanvasIcon, AddIcon } from '@repo/ui/icons';
|
||||
import { DialogTrigger } from '@repo/ui/shadcn/dialog';
|
||||
"use client";
|
||||
|
||||
import { HomeIcon } from '@heroicons/react/24/solid';
|
||||
import React, { useEffect, useMemo, useState } from "react";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import {
|
||||
PencilSquareIcon,
|
||||
PlusIcon,
|
||||
PresentationChartLineIcon,
|
||||
RectangleStackIcon,
|
||||
} from '@heroicons/react/24/solid';
|
||||
import DialogTriggerWrapper, {
|
||||
DialogDesktopTrigger,
|
||||
DialogMobileTrigger,
|
||||
} from './dialogTriggerWrapper';
|
||||
|
||||
const menuItems = [
|
||||
{
|
||||
icon: MemoriesIcon,
|
||||
text: 'Memories',
|
||||
url: '/memories',
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
icon: CanvasIcon,
|
||||
text: 'Canvas',
|
||||
url: '/canvas',
|
||||
disabled: true,
|
||||
},
|
||||
];
|
||||
|
||||
const items = [
|
||||
{
|
||||
icon: <HomeIcon className="h-6 w-6" />,
|
||||
name: 'home',
|
||||
url: '/home',
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
icon: <RectangleStackIcon className="h-6 w-6" />,
|
||||
name: 'memories',
|
||||
url: '/memories',
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
icon: <PencilSquareIcon className="h-6 w-6" />,
|
||||
name: 'editor',
|
||||
url: '/#',
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
icon: <PresentationChartLineIcon className="h-6 w-6" />,
|
||||
name: 'thinkpad',
|
||||
url: '/#',
|
||||
disabled: true,
|
||||
},
|
||||
];
|
||||
MemoriesIcon,
|
||||
ExploreIcon,
|
||||
CanvasIcon,
|
||||
AddIcon,
|
||||
HomeIcon as HomeIconWeb,
|
||||
} from "@repo/ui/icons";
|
||||
import { Button } from "@repo/ui/shadcn/button";
|
||||
import { MinusIcon, PlusCircleIcon } from "lucide-react";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@repo/ui/shadcn/dialog";
|
||||
import { Label } from "@repo/ui/shadcn/label";
|
||||
import { Textarea } from "@repo/ui/shadcn/textarea";
|
||||
import { toast } from "sonner";
|
||||
import { getSpaces } from "../actions/fetchers";
|
||||
import { HomeIcon } from "@heroicons/react/24/solid";
|
||||
import { createMemory, createSpace } from "../actions/doers";
|
||||
import ComboboxWithCreate from "@repo/ui/shadcn/combobox";
|
||||
import { StoredSpace } from "@/server/db/schema";
|
||||
import useMeasure from "react-use-measure";
|
||||
|
||||
function Menu() {
|
||||
return (
|
||||
<>
|
||||
{/* Desktop Menu */}
|
||||
<div className="hidden lg:flex items-center pointer-events-none z-[39] fixed left-2 top-0 h-screen flex-col justify-center px-2">
|
||||
<div className="pointer-events-none z-10 absolute top-1/2 h-1/3 w-full -translate-y-1/2 bg-secondary blur-[300px] "></div>
|
||||
<div className="pointer-events-auto flex flex-col gap-2">
|
||||
<DialogDesktopTrigger />
|
||||
<div className="inline-flex w-14 flex-col items-start gap-6 rounded-2xl border-[1px] border-gray-700/50 bg-secondary px-3 py-4 text-[#b9b9b9] shadow-md shadow-[#1d1d1dc7]">
|
||||
{items.map((v) => (
|
||||
<NavItem {...v} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
const [spaces, setSpaces] = useState<StoredSpace[]>([]);
|
||||
|
||||
{/* Mobile Menu */}
|
||||
<div className="lg:hidden fixed bottom-0 left-0 w-full p-4 bg-secondary z-50 border-t-2 border-border">
|
||||
<div className="flex justify-around items-center">
|
||||
<Link
|
||||
href={'/'}
|
||||
className={`flex flex-col items-center text-white ${'cursor-pointer'}`}
|
||||
>
|
||||
<HomeIcon width={24} height={24} />
|
||||
<p className="text-xs text-foreground-menu mt-2">Home</p>
|
||||
</Link>
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
let spaces = await getSpaces();
|
||||
|
||||
<DialogMobileTrigger />
|
||||
{menuItems.map((item) => (
|
||||
<Link
|
||||
aria-disabled={item.disabled}
|
||||
href={item.disabled ? '#' : item.url}
|
||||
key={item.url}
|
||||
className={`flex flex-col items-center ${
|
||||
item.disabled
|
||||
? 'opacity-50 pointer-events-none'
|
||||
: 'cursor-pointer'
|
||||
}`}
|
||||
>
|
||||
<Image
|
||||
src={item.icon}
|
||||
alt={`${item.text} icon`}
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
<p className="text-xs text-foreground-menu mt-2">{item.text}</p>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
if (!spaces.success || !spaces.data) {
|
||||
toast.warning("Unable to get spaces", {
|
||||
richColors: true,
|
||||
});
|
||||
setSpaces([]);
|
||||
return;
|
||||
}
|
||||
setSpaces(spaces.data);
|
||||
})();
|
||||
}, []);
|
||||
|
||||
export function Navbar() {
|
||||
return (
|
||||
<div className="pointer-events-none fixed left-0 top-0 flex h-screen flex-col justify-center px-2">
|
||||
<div className="pointer-events-none absolute top-1/2 h-1/3 w-full -translate-y-1/2 bg-blue-500/20 blur-[300px] "></div>
|
||||
<div className="pointer-events-auto">
|
||||
<div className="inline-flex w-14 flex-col items-start gap-6 rounded-2xl border-2 border-border px-3 py-4 text-[#b9b9b9] shadow-md shadow-[#1d1d1dc7]">
|
||||
<Top />
|
||||
{items.map((v) => (
|
||||
<NavItem {...v} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const menuItems = [
|
||||
{
|
||||
icon: HomeIconWeb,
|
||||
text: "Home",
|
||||
url: "/home",
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
icon: MemoriesIcon,
|
||||
text: "Memories",
|
||||
url: "/memories",
|
||||
disabled: false,
|
||||
},
|
||||
];
|
||||
|
||||
function Top() {
|
||||
return (
|
||||
<DialogTriggerWrapper>
|
||||
<DialogTrigger>
|
||||
<div className="space-y-4 group relative">
|
||||
<div className="cursor-pointer px-1 hover:scale-105 hover:text-[#bfc4c9] active:scale-90">
|
||||
<PlusIcon className="h-6 w-6" />
|
||||
</div>
|
||||
<div className="h-[1px] w-full bg-[#323b41]"></div>
|
||||
<div className="opacity-0 group-hover:opacity-100 scale-x-50 group-hover:scale-x-100 origin-left transition-all absolute whitespace-nowrap -top-1 -translate-y-1/2 left-[150%] pointer-events-none border-gray-700/50 border-[1px] bg-[#1F2428] shadow-md shadow-[#1d1d1dc7] rounded-2xl px-2 py-1">
|
||||
Add Memories
|
||||
</div>
|
||||
</div>
|
||||
</DialogTrigger>
|
||||
</DialogTriggerWrapper>
|
||||
);
|
||||
}
|
||||
const [content, setContent] = useState("");
|
||||
const [selectedSpaces, setSelectedSpaces] = useState<number[]>([]);
|
||||
|
||||
function NavItem({
|
||||
disabled,
|
||||
icon,
|
||||
url,
|
||||
name,
|
||||
}: {
|
||||
disabled: boolean;
|
||||
icon: React.JSX.Element;
|
||||
name: string;
|
||||
url: string;
|
||||
}) {
|
||||
return (
|
||||
<div className="relative group">
|
||||
<Link aria-disabled={disabled} href={disabled ? '#' : url}>
|
||||
<div
|
||||
className={`cursor-pointer px-1 hover:scale-105 hover:text-[#bfc4c9] active:scale-90 ${disabled && 'opacity-50'}`}
|
||||
>
|
||||
{icon}
|
||||
</div>
|
||||
</Link>
|
||||
<div className="opacity-0 group-hover:opacity-100 scale-x-50 group-hover:scale-x-100 origin-left transition-all absolute whitespace-nowrap top-1/2 -translate-y-1/2 left-[150%] pointer-events-none border-gray-700/50 border-[1px] bg-[#1F2428] shadow-md shadow-[#1d1d1dc7] rounded-xl px-2 py-1">
|
||||
{name}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
const autoDetectedType = useMemo(() => {
|
||||
if (content.length === 0) {
|
||||
return "none";
|
||||
}
|
||||
|
||||
if (
|
||||
content.match(/https?:\/\/(x\.com|twitter\.com)\/[\w]+\/[\w]+\/[\d]+/)
|
||||
) {
|
||||
return "tweet";
|
||||
} else if (content.match(/https?:\/\/[\w\.]+/)) {
|
||||
return "page";
|
||||
} else if (content.match(/https?:\/\/www\.[\w\.]+/)) {
|
||||
return "page";
|
||||
} else {
|
||||
return "note";
|
||||
}
|
||||
}, [content]);
|
||||
|
||||
const [dialogOpen, setDialogOpen] = useState(false);
|
||||
|
||||
const options = useMemo(
|
||||
() =>
|
||||
spaces.map((x) => ({
|
||||
label: x.name,
|
||||
value: x.id.toString(),
|
||||
})),
|
||||
[spaces],
|
||||
);
|
||||
|
||||
const handleSubmit = async (content?: string, spaces?: number[]) => {
|
||||
setDialogOpen(false);
|
||||
|
||||
toast.info("Creating memory...", {
|
||||
icon: <PlusCircleIcon className="w-4 h-4 text-white animate-spin" />,
|
||||
duration: 7500,
|
||||
});
|
||||
|
||||
if (!content || content.length === 0) {
|
||||
toast.error("Content is required");
|
||||
return;
|
||||
}
|
||||
|
||||
console.log(spaces);
|
||||
|
||||
const cont = await createMemory({
|
||||
content: content,
|
||||
spaces: spaces ?? undefined,
|
||||
});
|
||||
|
||||
setContent("");
|
||||
setSelectedSpaces([]);
|
||||
|
||||
if (cont.success) {
|
||||
toast.success("Memory created", {
|
||||
richColors: true,
|
||||
});
|
||||
} else {
|
||||
toast.error(`Memory creation failed: ${cont.error}`);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Desktop Menu */}
|
||||
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
|
||||
<div className="hidden lg:flex fixed h-screen pb-20 w-full p-4 items-center justify-start top-0 left-0 pointer-events-none z-[39]">
|
||||
<div className="pointer-events-auto group flex w-14 text-foreground-menu text-[15px] font-medium flex-col items-start gap-6 overflow-hidden rounded-[28px] border-2 border-border bg-secondary px-3 py-4 duration-200 hover:w-40 z-[99999]">
|
||||
<div className="border-b border-border pb-4 w-full">
|
||||
<DialogTrigger
|
||||
className={`flex w-full text-white brightness-75 hover:brightness-125 focus:brightness-125 cursor-pointer items-center gap-3 px-1 duration-200 justify-start`}
|
||||
>
|
||||
<Image
|
||||
src={AddIcon}
|
||||
alt="Logo"
|
||||
width={24}
|
||||
height={24}
|
||||
className="hover:brightness-125 focus:brightness-125 duration-200 text-white"
|
||||
/>
|
||||
<p className="opacity-0 duration-200 group-hover:opacity-100">
|
||||
Add
|
||||
</p>
|
||||
</DialogTrigger>
|
||||
</div>
|
||||
{menuItems.map((item) => (
|
||||
<Link
|
||||
aria-disabled={item.disabled}
|
||||
href={item.disabled ? "#" : item.url}
|
||||
key={item.url}
|
||||
className={`flex w-full ${
|
||||
item.disabled
|
||||
? "cursor-not-allowed opacity-30"
|
||||
: "text-white brightness-75 hover:brightness-125 cursor-pointer"
|
||||
} items-center gap-3 px-1 duration-200 hover:scale-105 active:scale-90 justify-start`}
|
||||
>
|
||||
<Image
|
||||
src={item.icon}
|
||||
alt={`${item.text} icon`}
|
||||
width={24}
|
||||
height={24}
|
||||
className="hover:brightness-125 duration-200"
|
||||
/>
|
||||
<p className="opacity-0 duration-200 group-hover:opacity-100">
|
||||
{item.text}
|
||||
</p>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogContent className="sm:max-w-[475px] text-[#F2F3F5] rounded-2xl bg-background z-[39]">
|
||||
<form
|
||||
action={async (e: FormData) => {
|
||||
const content = e.get("content")?.toString();
|
||||
|
||||
await handleSubmit(content, selectedSpaces);
|
||||
}}
|
||||
className="flex flex-col gap-4 "
|
||||
>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Add memory</DialogTitle>
|
||||
<DialogDescription className="text-[#F2F3F5]">
|
||||
A "Memory" is a bookmark, something you want to remember.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="name">Resource (URL or content)</Label>
|
||||
<Textarea
|
||||
className={`bg-[#2F353C] text-[#DBDEE1] max-h-[35vh] overflow-auto focus-visible:ring-0 border-none focus-visible:ring-offset-0 mt-2 ${/^https?:\/\/\S+$/i.test(content) && "text-[#1D9BF0] underline underline-offset-2"}`}
|
||||
id="content"
|
||||
name="content"
|
||||
rows={8}
|
||||
placeholder="Start typing a note or paste a URL here. I'll remember it."
|
||||
value={content}
|
||||
onChange={(e) => setContent(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
handleSubmit(content, selectedSpaces);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label className="space-y-1" htmlFor="space">
|
||||
<h3 className="font-semibold text-lg tracking-tight">
|
||||
Spaces (Optional)
|
||||
</h3>
|
||||
<p className="leading-normal text-[#F2F3F5] text-sm">
|
||||
A space is a collection of memories. It's a way to organise
|
||||
your memories.
|
||||
</p>
|
||||
</Label>
|
||||
|
||||
<ComboboxWithCreate
|
||||
options={spaces.map((x) => ({
|
||||
label: x.name,
|
||||
value: x.id.toString(),
|
||||
}))}
|
||||
onSelect={(v) =>
|
||||
setSelectedSpaces((prev) => {
|
||||
if (v === "") {
|
||||
return [];
|
||||
}
|
||||
return [...prev, parseInt(v)];
|
||||
})
|
||||
}
|
||||
onSubmit={async (spaceName) => {
|
||||
const space = options.find((x) => x.label === spaceName);
|
||||
toast.info("Creating space...");
|
||||
|
||||
if (space) {
|
||||
toast.error("A space with that name already exists.");
|
||||
}
|
||||
|
||||
const creationTask = await createSpace(spaceName);
|
||||
if (creationTask.success && creationTask.data) {
|
||||
toast.success("Space created " + creationTask.data);
|
||||
setSpaces((prev) => [
|
||||
...prev,
|
||||
{
|
||||
name: spaceName,
|
||||
id: creationTask.data!,
|
||||
createdAt: new Date(),
|
||||
user: null,
|
||||
numItems: 0,
|
||||
},
|
||||
]);
|
||||
setSelectedSpaces((prev) => [...prev, creationTask.data!]);
|
||||
} else {
|
||||
toast.error(
|
||||
"Space creation failed: " + creationTask.error ??
|
||||
"Unknown error",
|
||||
);
|
||||
}
|
||||
}}
|
||||
placeholder="Select or create a new space."
|
||||
className="bg-[#2F353C] h-min rounded-md mt-4 mb-4"
|
||||
/>
|
||||
|
||||
<div>
|
||||
{selectedSpaces.length > 0 && (
|
||||
<div className="flex flex-row flex-wrap gap-0.5 h-min">
|
||||
{[...new Set(selectedSpaces)].map((x, idx) => (
|
||||
<button
|
||||
key={x}
|
||||
type="button"
|
||||
onClick={() =>
|
||||
setSelectedSpaces((prev) =>
|
||||
prev.filter((y) => y !== x),
|
||||
)
|
||||
}
|
||||
className={`relative group p-2 py-3 bg-[#3C464D] max-w-32 ${
|
||||
idx === selectedSpaces.length - 1
|
||||
? "rounded-br-xl"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
<p className="line-clamp-1">
|
||||
{spaces.find((y) => y.id === x)?.name}
|
||||
</p>
|
||||
<div className="absolute h-full right-0 top-0 p-1 opacity-0 group-hover:opacity-100 items-center">
|
||||
<MinusIcon className="w-6 h-6 rounded-full bg-secondary" />
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button
|
||||
disabled={autoDetectedType === "none"}
|
||||
variant={"secondary"}
|
||||
type="submit"
|
||||
>
|
||||
Save {autoDetectedType != "none" && autoDetectedType}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
|
||||
{/* Mobile Menu */}
|
||||
<div className="lg:hidden fixed bottom-0 left-0 w-full p-4 bg-secondary z-50 border-t-2 border-border">
|
||||
<div className="flex justify-around items-center">
|
||||
<Link
|
||||
href={"/"}
|
||||
className={`flex flex-col items-center text-white ${"cursor-pointer"}`}
|
||||
>
|
||||
<HomeIcon width={24} height={24} />
|
||||
<p className="text-xs text-foreground-menu mt-2">Home</p>
|
||||
</Link>
|
||||
|
||||
<DialogTrigger
|
||||
className={`flex flex-col items-center cursor-pointer text-white`}
|
||||
>
|
||||
<Image
|
||||
src={AddIcon}
|
||||
alt="Logo"
|
||||
width={24}
|
||||
height={24}
|
||||
className="hover:brightness-125 focus:brightness-125 duration-200 stroke-white"
|
||||
/>
|
||||
<p className="text-xs text-foreground-menu mt-2">Add</p>
|
||||
</DialogTrigger>
|
||||
{menuItems.slice(1, 2).map((item) => (
|
||||
<Link
|
||||
aria-disabled={item.disabled}
|
||||
href={item.disabled ? "#" : item.url}
|
||||
key={item.url}
|
||||
className={`flex flex-col items-center ${
|
||||
item.disabled
|
||||
? "opacity-50 cursor-not-allowed"
|
||||
: "cursor-pointer"
|
||||
}`}
|
||||
onClick={(e) => item.disabled && e.preventDefault()}
|
||||
>
|
||||
<Image
|
||||
src={item.icon}
|
||||
alt={`${item.text} icon`}
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
<p className="text-xs text-foreground-menu mt-2">{item.text}</p>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default Menu;
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@ function Hero() {
|
|||
</motion.p>
|
||||
<Link
|
||||
href="/signin"
|
||||
className="inline-flex text-lg gap-x-2 mt-2 backdrop-blur-md text-white justify-center items-center py-3 px-5 ml-3 w-fit rounded-3xl border duration-200 group bg-page-gradient border-white/30 text-md font-geistSans hover:border-zinc-600 hover:bg-transparent/10 hover:text-zinc-100"
|
||||
className="inline-flex text-lg gap-x-2 mt-2 backdrop-blur-md text-white justify-center items-center py-3 px-5 w-fit rounded-3xl border duration-200 group bg-page-gradient border-white/30 text-md font-geistSans hover:border-zinc-600 hover:bg-transparent/10 hover:text-zinc-100"
|
||||
>
|
||||
It's free. Sign up now
|
||||
<div className="flex overflow-hidden relative justify-center items-center ml-1 w-5 h-5">
|
||||
|
|
@ -61,22 +61,38 @@ function Hero() {
|
|||
<ArrowUpRight className="absolute transition-all duration-500 -translate-x-4 -translate-y-5 group-hover:translate-x-0 group-hover:translate-y-0" />
|
||||
</div>
|
||||
</Link>
|
||||
<a
|
||||
href="https://www.producthunt.com/posts/supermemory?embed=true&utm_source=badge-top-post-badge&utm_medium=badge&utm_souce=badge-supermemory"
|
||||
target="_blank"
|
||||
>
|
||||
<img
|
||||
src="https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=472686&theme=dark&period=daily"
|
||||
alt="Supermemory - AI second brain for all your saved stuff | Product Hunt"
|
||||
style={{ width: "250px", height: "54px" }}
|
||||
width="250"
|
||||
height="54"
|
||||
/>
|
||||
</a>
|
||||
</section>
|
||||
|
||||
<AnimatedLogoCloud />
|
||||
<div className="relative z-50">
|
||||
<motion.img
|
||||
<motion.iframe
|
||||
{...{
|
||||
...slap,
|
||||
transition: { ...slap.transition, delay: 0.35 },
|
||||
}}
|
||||
src="/images/landing-hero.jpeg"
|
||||
alt="Landing page background"
|
||||
draggable="false"
|
||||
className="z-40 md:mt-[-40px] hidden sm:block h-full max-w-[70vw] mx-auto md:w-full select-none px-5 !rounded-2xl"
|
||||
className="z-40 relative md:mt-[-40px] hidden sm:block h-full max-w-[70vw] mx-auto md:w-full select-none px-5 !rounded-2xl"
|
||||
style={{
|
||||
borderRadius: "20px",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
}}
|
||||
src="https://customer-5xczlbkyq4f9ejha.cloudflarestream.com/111c4828c3587348bc703e67bfca9682/iframe?preload=true&poster=https%3A%2F%2Fcustomer-5xczlbkyq4f9ejha.cloudflarestream.com%2F111c4828c3587348bc703e67bfca9682%2Fthumbnails%2Fthumbnail.jpg%3Ftime%3D%26height%3D600"
|
||||
loading="lazy"
|
||||
allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
|
||||
allowFullScreen={true}
|
||||
/>
|
||||
<div
|
||||
className="absolute -z-10 left-0 top-[10%] h-32 w-[90%] overflow-x-hidden bg-[rgb(54,157,253)] bg-opacity-100 blur-[337.4px]"
|
||||
|
|
|
|||
5
apps/web/app/(quicklinks)/ph/route.ts
Normal file
5
apps/web/app/(quicklinks)/ph/route.ts
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
import { redirect } from "next/navigation";
|
||||
|
||||
export async function GET() {
|
||||
return redirect("https://www.producthunt.com/posts/supermemory");
|
||||
}
|
||||
|
|
@ -22,6 +22,34 @@ import { ChatHistory } from "@repo/shared-types";
|
|||
import { decipher } from "@/server/encrypt";
|
||||
import { redirect } from "next/navigation";
|
||||
import { tweetToMd } from "@repo/shared-types/utils";
|
||||
import { ensureAuth } from "../api/ensureAuth";
|
||||
import { getRandomSentences } from "@/lib/utils";
|
||||
import { getRequestContext } from "@cloudflare/next-on-pages";
|
||||
|
||||
export const completeOnboarding = async (): ServerActionReturnType<boolean> => {
|
||||
const data = await auth();
|
||||
|
||||
if (!data || !data.user || !data.user.id) {
|
||||
redirect("/signin");
|
||||
return { error: "Not authenticated", success: false };
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await db
|
||||
.update(users)
|
||||
.set({ hasOnboarded: true })
|
||||
.where(eq(users.id, data.user.id))
|
||||
.returning({ hasOnboarded: users.hasOnboarded });
|
||||
|
||||
if (res.length === 0 || !res[0]?.hasOnboarded) {
|
||||
return { success: false, data: false, error: "Failed to update user" };
|
||||
}
|
||||
|
||||
return { success: true, data: res[0].hasOnboarded };
|
||||
} catch (e) {
|
||||
return { success: false, data: false, error: (e as Error).message };
|
||||
}
|
||||
};
|
||||
|
||||
export const createSpace = async (
|
||||
input: string | FormData,
|
||||
|
|
@ -468,6 +496,7 @@ export const createChatObject = async (
|
|||
answer: lastChat.answer.parts.map((part) => part.text).join(""),
|
||||
answerSources: JSON.stringify(lastChat.answer.sources),
|
||||
threadId,
|
||||
createdAt: new Date(),
|
||||
});
|
||||
|
||||
if (!saved) {
|
||||
|
|
@ -744,3 +773,122 @@ export async function AddCanvasInfo({
|
|||
};
|
||||
}
|
||||
}
|
||||
|
||||
export async function getQuerySuggestions() {
|
||||
const data = await auth();
|
||||
|
||||
if (!data || !data.user || !data.user.id) {
|
||||
redirect("/signin");
|
||||
return { error: "Not authenticated", success: false };
|
||||
}
|
||||
|
||||
const { env } = getRequestContext();
|
||||
|
||||
try {
|
||||
const recommendations = await env.RECOMMENDATIONS.get(data.user.id);
|
||||
|
||||
if (recommendations) {
|
||||
return {
|
||||
success: true,
|
||||
data: JSON.parse(recommendations),
|
||||
};
|
||||
}
|
||||
|
||||
// Randomly choose some storedContent of the user.
|
||||
const content = await db
|
||||
.select()
|
||||
.from(storedContent)
|
||||
.where(eq(storedContent.userId, data.user.id))
|
||||
.orderBy(sql`random()`)
|
||||
.limit(5)
|
||||
.all();
|
||||
|
||||
if (content.length === 0) {
|
||||
return {
|
||||
success: true,
|
||||
data: [],
|
||||
};
|
||||
}
|
||||
|
||||
const fullQuery = content
|
||||
.map((c) => `${c.title} \n\n${c.content}`)
|
||||
.join(" ");
|
||||
|
||||
const suggestionsCall = (await env.AI.run(
|
||||
// @ts-ignore
|
||||
"@cf/meta/llama-3.1-8b-instruct",
|
||||
{
|
||||
messages: [
|
||||
{
|
||||
role: "system",
|
||||
content: `You are a model that suggests questions based on the user's content. you MUST suggest atleast 1 question to ask. AT MAX, create 3 suggestions. not more than that.`,
|
||||
},
|
||||
{
|
||||
role: "user",
|
||||
content: `Run the function based on this input: ${fullQuery.slice(0, 2000)}`,
|
||||
},
|
||||
],
|
||||
tools: [
|
||||
{
|
||||
type: "function",
|
||||
function: {
|
||||
name: "querySuggestions",
|
||||
description:
|
||||
"Take the user's content to suggest some good questions that they could ask.",
|
||||
parameters: {
|
||||
type: "object",
|
||||
properties: {
|
||||
querySuggestions: {
|
||||
type: "array",
|
||||
description:
|
||||
"Short questions that the user can ask. Give atleast 3 suggestions. No more than 5.",
|
||||
items: {
|
||||
type: "string",
|
||||
},
|
||||
},
|
||||
},
|
||||
required: ["querySuggestions"],
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
)) as {
|
||||
response: string;
|
||||
tool_calls: { name: string; arguments: { querySuggestions: string[] } }[];
|
||||
};
|
||||
|
||||
console.log(
|
||||
"I RAN AN AI CALLS OWOWOWOWOW",
|
||||
JSON.stringify(suggestionsCall, null, 2),
|
||||
);
|
||||
|
||||
const suggestions =
|
||||
suggestionsCall.tool_calls?.[0]?.arguments?.querySuggestions;
|
||||
|
||||
if (!suggestions || suggestions.length === 0) {
|
||||
return {
|
||||
success: false,
|
||||
error: "Failed to get query suggestions",
|
||||
};
|
||||
}
|
||||
|
||||
if (suggestions.length > 0) {
|
||||
await env.RECOMMENDATIONS.put(data.user.id, JSON.stringify(suggestions), {
|
||||
expirationTtl: 60 * 2,
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
success: true,
|
||||
data: suggestions,
|
||||
};
|
||||
} catch (exception) {
|
||||
const error = exception as Error;
|
||||
return {
|
||||
success: false,
|
||||
error: error.message,
|
||||
data: [],
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
"use server";
|
||||
|
||||
import { and, asc, eq, exists, inArray, not, or, sql } from "drizzle-orm";
|
||||
import { and, asc, eq, exists, not, or } from "drizzle-orm";
|
||||
import { db } from "../../server/db";
|
||||
import {
|
||||
canvas,
|
||||
|
|
@ -13,15 +13,32 @@ import {
|
|||
spacesAccess,
|
||||
storedContent,
|
||||
StoredSpace,
|
||||
User,
|
||||
users,
|
||||
} from "../../server/db/schema";
|
||||
import { ServerActionReturnType, Space } from "./types";
|
||||
import { ServerActionReturnType } from "./types";
|
||||
import { auth } from "../../server/auth";
|
||||
import { ChatHistory, SourceZod } from "@repo/shared-types";
|
||||
import { z } from "zod";
|
||||
import { redirect } from "next/navigation";
|
||||
import { cookies, headers } from "next/headers";
|
||||
|
||||
export const getUser = async (): ServerActionReturnType<User> => {
|
||||
const data = await auth();
|
||||
|
||||
if (!data || !data.user || !data.user.id) {
|
||||
redirect("/signin");
|
||||
return { error: "Not authenticated", success: false };
|
||||
}
|
||||
|
||||
console.log("data.user.id", data.user.id);
|
||||
const user = await db.query.users.findFirst({
|
||||
where: eq(users.id, data.user.id),
|
||||
});
|
||||
|
||||
return { success: true, data: user };
|
||||
};
|
||||
|
||||
export const getSpaces = async (): ServerActionReturnType<StoredSpace[]> => {
|
||||
const data = await auth();
|
||||
|
||||
|
|
@ -218,6 +235,9 @@ export const getFullChatThread = async (
|
|||
],
|
||||
sources: sources ?? [],
|
||||
},
|
||||
proModeProcessing: {
|
||||
queries: [],
|
||||
},
|
||||
};
|
||||
},
|
||||
);
|
||||
|
|
|
|||
|
|
@ -7,6 +7,10 @@ import {
|
|||
} from "@repo/shared-types";
|
||||
import { ensureAuth } from "../ensureAuth";
|
||||
import { z } from "zod";
|
||||
import { db } from "@/server/db";
|
||||
import { chatHistory as chatHistoryDb, chatThreads } from "@/server/db/schema";
|
||||
import { and, eq, gt, sql } from "drizzle-orm";
|
||||
import { join } from "path";
|
||||
|
||||
export const runtime = "edge";
|
||||
|
||||
|
|
@ -21,12 +25,56 @@ export async function POST(req: NextRequest) {
|
|||
return new Response("Missing BACKEND_SECURITY_KEY", { status: 500 });
|
||||
}
|
||||
|
||||
const ip = req.headers.get("cf-connecting-ip");
|
||||
|
||||
if (ip) {
|
||||
if (process.env.RATELIMITER) {
|
||||
const { success } = await process.env.RATELIMITER.limit({
|
||||
key: `chat-${ip}`,
|
||||
});
|
||||
|
||||
if (!success) {
|
||||
console.error("rate limit exceeded");
|
||||
return new Response("Rate limit exceeded", { status: 429 });
|
||||
}
|
||||
} else {
|
||||
console.info("RATELIMITER not found in env");
|
||||
}
|
||||
} else {
|
||||
console.info("cf-connecting-ip not found in headers");
|
||||
}
|
||||
|
||||
const lastHour = new Date(new Date().getTime() - 3600000);
|
||||
|
||||
// Only allow 5 requests per hour for each user, something lke this but this one is bad because chathistory.userid doesnt exist, we have to do a join and get it from the threads table
|
||||
const result = await db
|
||||
.select({
|
||||
count: sql<number>`count(*)`.mapWith(Number),
|
||||
})
|
||||
.from(chatHistoryDb)
|
||||
.innerJoin(chatThreads, eq(chatHistoryDb.threadId, chatThreads.id))
|
||||
.where(
|
||||
and(
|
||||
eq(chatThreads.userId, session.user.id),
|
||||
gt(chatHistoryDb.createdAt, lastHour),
|
||||
),
|
||||
)
|
||||
.execute();
|
||||
|
||||
if (result[0]?.count && result[0]?.count >= 5) {
|
||||
// return new Response(`Too many requests ${result[0]?.count}`, { status: 429 });
|
||||
console.log(result[0]?.count);
|
||||
} else {
|
||||
console.log("count", result);
|
||||
}
|
||||
|
||||
const url = new URL(req.url);
|
||||
|
||||
const query = url.searchParams.get("q");
|
||||
const spaces = url.searchParams.get("spaces");
|
||||
|
||||
const sourcesOnly = url.searchParams.get("sourcesOnly") ?? "false";
|
||||
const proMode = url.searchParams.get("proMode") === "true";
|
||||
|
||||
const jsonRequest = (await req.json()) as {
|
||||
chatHistory: ChatHistory[];
|
||||
|
|
@ -55,7 +103,7 @@ export async function POST(req: NextRequest) {
|
|||
const modelCompatible = await convertChatHistoryList(validated.data);
|
||||
|
||||
const resp = await fetch(
|
||||
`${process.env.BACKEND_BASE_URL}/api/chat?query=${query}&user=${session.user.id}&sourcesOnly=${sourcesOnly}&spaces=${spaces}`,
|
||||
`${process.env.BACKEND_BASE_URL}/api/chat?query=${query}&user=${session.user.id}&sourcesOnly=${sourcesOnly}&spaces=${spaces}&proMode=${proMode}`,
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${process.env.BACKEND_SECURITY_KEY}`,
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { ensureAuth } from "../ensureAuth";
|
|||
import { z } from "zod";
|
||||
import { db } from "@/server/db";
|
||||
import { contentToSpace, space, storedContent } from "@/server/db/schema";
|
||||
import { and, eq, inArray } from "drizzle-orm";
|
||||
import { and, eq, gt, inArray, sql } from "drizzle-orm";
|
||||
import { LIMITS } from "@/lib/constants";
|
||||
import { limit } from "@/app/actions/doers";
|
||||
|
||||
|
|
@ -22,6 +22,29 @@ const createMemoryFromAPI = async (input: {
|
|||
};
|
||||
}
|
||||
|
||||
// Get number of items saved in the last 2 hours
|
||||
const last2Hours = new Date(Date.now() - 2 * 60 * 60 * 1000);
|
||||
|
||||
const numberOfItemsSavedInLast2Hours = await db
|
||||
.select({
|
||||
count: sql<number>`count(*)`.mapWith(Number),
|
||||
})
|
||||
.from(storedContent)
|
||||
.where(
|
||||
and(
|
||||
gt(storedContent.savedAt, last2Hours),
|
||||
eq(storedContent.userId, input.userId),
|
||||
),
|
||||
);
|
||||
|
||||
if (numberOfItemsSavedInLast2Hours[0]!.count >= 20) {
|
||||
return {
|
||||
success: false,
|
||||
data: 0,
|
||||
error: `You have exceeded the limit`,
|
||||
};
|
||||
}
|
||||
|
||||
const vectorSaveResponse = await fetch(
|
||||
`${process.env.BACKEND_BASE_URL}/api/add`,
|
||||
{
|
||||
|
|
|
|||
|
|
@ -66,9 +66,14 @@ export default function RootLayout({
|
|||
}): JSX.Element {
|
||||
return (
|
||||
<html lang="en" className="overflow-x-hidden" suppressHydrationWarning>
|
||||
{/* <head>
|
||||
<ThemeScript />
|
||||
</head> */}
|
||||
<head>
|
||||
{/* Cloudflare web analytics */}
|
||||
<script
|
||||
defer
|
||||
src="https://static.cloudflareinsights.com/beacon.min.js"
|
||||
data-cf-beacon='{"token": "16d76ebb82c74d9983b71d09ab6617bc"}'
|
||||
></script>
|
||||
</head>
|
||||
{/* TODO: when lightmode support is added, remove the 'dark' class from the body tag */}
|
||||
<body
|
||||
className={cn(
|
||||
|
|
|
|||
4
apps/web/cf-env.d.ts
vendored
4
apps/web/cf-env.d.ts
vendored
|
|
@ -22,6 +22,10 @@ declare global {
|
|||
THREAD_CF_AUTH: string;
|
||||
|
||||
MOBILE_TRUST_TOKEN: string;
|
||||
|
||||
RATELIMITER: {
|
||||
limit: ({ key: string }) => { success: boolean };
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
2
apps/web/env.d.ts
vendored
2
apps/web/env.d.ts
vendored
|
|
@ -6,4 +6,6 @@ interface CloudflareEnv {
|
|||
DATABASE: D1Database;
|
||||
DEV_IMAGES: R2Bucket;
|
||||
CANVAS_SNAPS: KVNamespace;
|
||||
AI: Ai;
|
||||
RECOMMENDATIONS: KVNamespace;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,4 +32,5 @@ export const chatSearchParamsCache = createSearchParamsCache({
|
|||
|
||||
return valid.data;
|
||||
}),
|
||||
proMode: parseAsBoolean.withDefault(false),
|
||||
});
|
||||
|
|
|
|||
23
apps/web/lib/utils.ts
Normal file
23
apps/web/lib/utils.ts
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
export function getRandomSentences(fullQuery: string): string {
|
||||
// Split the fullQuery into sentences
|
||||
const sentences = fullQuery.match(/[^.!?]+[.!?]+/g) || [];
|
||||
|
||||
// Function to get a random integer between min and max
|
||||
function getRandomInt(min: number, max: number): number {
|
||||
return Math.floor(Math.random() * (max - min)) + min;
|
||||
}
|
||||
|
||||
let selectedSentences = "";
|
||||
let totalCharacters = 0;
|
||||
|
||||
// Select random sentences until totalCharacters is at least 1000
|
||||
while (totalCharacters < 1000 && sentences.length > 0) {
|
||||
const randomIndex = getRandomInt(0, sentences.length);
|
||||
const sentence = sentences[randomIndex];
|
||||
selectedSentences += sentence;
|
||||
totalCharacters += sentence?.length || 0;
|
||||
sentences.splice(randomIndex, 1); // Remove the selected sentence from the array
|
||||
}
|
||||
|
||||
return selectedSentences;
|
||||
}
|
||||
|
|
@ -43,6 +43,7 @@ CREATE TABLE `chatHistory` (
|
|||
`answerParts` text,
|
||||
`answerSources` text,
|
||||
`answerJustification` text,
|
||||
`createdAt` integer DEFAULT '"2024-07-25T22:31:50.848Z"' NOT NULL,
|
||||
FOREIGN KEY (`threadId`) REFERENCES `chatThread`(`id`) ON UPDATE no action ON DELETE cascade
|
||||
);
|
||||
--> statement-breakpoint
|
||||
|
|
@ -106,7 +107,8 @@ CREATE TABLE `user` (
|
|||
`email` text NOT NULL,
|
||||
`emailVerified` integer,
|
||||
`image` text,
|
||||
`telegramId` text
|
||||
`telegramId` text,
|
||||
`hasOnboarded` integer DEFAULT false
|
||||
);
|
||||
--> statement-breakpoint
|
||||
CREATE TABLE `verificationToken` (
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"version": "6",
|
||||
"dialect": "sqlite",
|
||||
"id": "ab91d972-05ff-4916-84b7-1cfaab4c3879",
|
||||
"id": "8705302a-eae7-4fbf-9ce8-8ae23df228a2",
|
||||
"prevId": "00000000-0000-0000-0000-000000000000",
|
||||
"tables": {
|
||||
"account": {
|
||||
|
|
@ -298,6 +298,14 @@
|
|||
"primaryKey": false,
|
||||
"notNull": false,
|
||||
"autoincrement": false
|
||||
},
|
||||
"createdAt": {
|
||||
"name": "createdAt",
|
||||
"type": "integer",
|
||||
"primaryKey": false,
|
||||
"notNull": true,
|
||||
"autoincrement": false,
|
||||
"default": "'\"2024-07-25T22:31:50.848Z\"'"
|
||||
}
|
||||
},
|
||||
"indexes": {
|
||||
|
|
@ -738,6 +746,14 @@
|
|||
"primaryKey": false,
|
||||
"notNull": false,
|
||||
"autoincrement": false
|
||||
},
|
||||
"hasOnboarded": {
|
||||
"name": "hasOnboarded",
|
||||
"type": "integer",
|
||||
"primaryKey": false,
|
||||
"notNull": false,
|
||||
"autoincrement": false,
|
||||
"default": false
|
||||
}
|
||||
},
|
||||
"indexes": {
|
||||
|
|
|
|||
|
|
@ -5,8 +5,8 @@
|
|||
{
|
||||
"idx": 0,
|
||||
"version": "6",
|
||||
"when": 1720360287793,
|
||||
"tag": "0000_exotic_sway",
|
||||
"when": 1721946710900,
|
||||
"tag": "0000_steep_moira_mactaggert",
|
||||
"breakpoints": true
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -2,4 +2,7 @@ import { drizzle } from "drizzle-orm/d1";
|
|||
|
||||
import * as schema from "./schema";
|
||||
|
||||
export const db = drizzle(process.env.DATABASE, { schema, logger: true });
|
||||
export const db = drizzle(process.env.DATABASE, {
|
||||
schema,
|
||||
logger: process.env.NODE_ENV === "development",
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import { create } from "domain";
|
||||
import { relations, sql } from "drizzle-orm";
|
||||
import {
|
||||
index,
|
||||
|
|
@ -22,6 +23,7 @@ export const users = createTable(
|
|||
emailVerified: integer("emailVerified", { mode: "timestamp_ms" }),
|
||||
image: text("image"),
|
||||
telegramId: text("telegramId"),
|
||||
hasOnboarded: integer("hasOnboarded", { mode: "boolean" }).default(false),
|
||||
},
|
||||
(user) => ({
|
||||
emailIdx: index("users_email_idx").on(user.email),
|
||||
|
|
@ -210,6 +212,9 @@ export const chatHistory = createTable(
|
|||
answer: text("answerParts"), // Single answer part as string
|
||||
answerSources: text("answerSources"), // JSON stringified array of objects
|
||||
answerJustification: text("answerJustification"),
|
||||
createdAt: int("createdAt", { mode: "timestamp" })
|
||||
.notNull()
|
||||
.default(new Date()),
|
||||
},
|
||||
(history) => ({
|
||||
threadIdx: index("chatHistory_thread_idx").on(history.threadId),
|
||||
|
|
|
|||
|
|
@ -3,6 +3,20 @@ compatibility_date = "2024-03-29"
|
|||
compatibility_flags = [ "nodejs_compat" ]
|
||||
pages_build_output_dir = ".vercel/output/static"
|
||||
|
||||
|
||||
kv_namespaces = [
|
||||
{ binding = "CANVAS_SNAPS", id = "6df98c892b3744ccb0c631d9f60d6697" },
|
||||
{ binding = "RECOMMENDATIONS", id = "83bc7055226c4657948141c2ff9a5425" }
|
||||
]
|
||||
|
||||
env.production.kv_namespaces = [
|
||||
{ binding = "CANVAS_SNAPS", id = "6df98c892b3744ccb0c631d9f60d6697" },
|
||||
{ binding = "RECOMMENDATIONS", id = "83bc7055226c4657948141c2ff9a5425" }
|
||||
]
|
||||
|
||||
[ai]
|
||||
binding = "AI"
|
||||
|
||||
[placement]
|
||||
mode = "smart"
|
||||
|
||||
|
|
@ -15,16 +29,19 @@ binding = "DATABASE"
|
|||
database_name = "dev-d1-anycontext"
|
||||
database_id = "fc562605-157a-4f60-b439-2a24ffed5b4c"
|
||||
|
||||
[[kv_namespaces]]
|
||||
binding = "CANVAS_SNAPS"
|
||||
id = "c6446f7190dd4afebe1c318df3400518"
|
||||
|
||||
[[env.production.d1_databases]]
|
||||
binding = "DATABASE"
|
||||
database_name = "prod-d1-supermemory"
|
||||
database_id = "f527a727-c472-41d4-8eaf-3d7ba0f2f395"
|
||||
|
||||
[env.preview.ai]
|
||||
binding = "AI"
|
||||
|
||||
[[env.preview.d1_databases]]
|
||||
binding = "DATABASE"
|
||||
database_name = "dev-d1-anycontext"
|
||||
database_id = "fc562605-157a-4f60-b439-2a24ffed5b4c"
|
||||
database_id = "fc562605-157a-4f60-b439-2a24ffed5b4c"
|
||||
|
||||
[env.production.ai]
|
||||
binding = "AI"
|
||||
|
|
@ -17,6 +17,9 @@ export const ChatHistoryZod = z.object({
|
|||
sources: z.array(SourceZod),
|
||||
justification: z.string().optional(),
|
||||
}),
|
||||
proModeProcessing: z.object({
|
||||
queries: z.array(z.string()),
|
||||
}),
|
||||
});
|
||||
|
||||
export type ChatHistory = z.infer<typeof ChatHistoryZod>;
|
||||
|
|
@ -77,6 +80,7 @@ export const sourcesZod = z.object({
|
|||
ids: z.array(z.string()),
|
||||
metadata: z.array(z.any()),
|
||||
normalizedData: z.array(z.any()).optional(),
|
||||
proModeListedQueries: z.array(z.string()).optional(),
|
||||
});
|
||||
|
||||
export type SourcesFromApi = z.infer<typeof sourcesZod>;
|
||||
|
|
|
|||
3
packages/ui/icons/home.svg
Normal file
3
packages/ui/icons/home.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" width="24" height="24" className="size-5">
|
||||
<path fill="#fff" fillRule="evenodd" d="M9.293 2.293a1 1 0 0 1 1.414 0l7 7A1 1 0 0 1 17 11h-1v6a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-3a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-6H3a1 1 0 0 1-.707-1.707l7-7Z" clipRule="evenodd" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 378 B |
|
|
@ -9,12 +9,12 @@ import SearchIcon from "./search.svg";
|
|||
import NextIcon from "./nextarrow.svg";
|
||||
import UrlIcon from "./url.svg";
|
||||
import CanvasIcon from "./canvas.svg";
|
||||
import blockIcon from "./block.svg";
|
||||
import LinkIcon from "./link.svg";
|
||||
import AutocompleteIcon from "./autocomplete.svg";
|
||||
import BlockIcon from "./block.svg";
|
||||
import DragIcon from "./drag.svg";
|
||||
import SettingsIcon from "./settings.svg";
|
||||
import HomeIcon from "./home.svg";
|
||||
|
||||
export {
|
||||
AddIcon,
|
||||
|
|
@ -28,10 +28,10 @@ export {
|
|||
NextIcon,
|
||||
UrlIcon,
|
||||
CanvasIcon,
|
||||
blockIcon,
|
||||
LinkIcon,
|
||||
AutocompleteIcon,
|
||||
BlockIcon,
|
||||
DragIcon,
|
||||
SettingsIcon,
|
||||
HomeIcon,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ const Switch = React.forwardRef<
|
|||
>(({ className, ...props }, ref) => (
|
||||
<SwitchPrimitives.Root
|
||||
className={cn(
|
||||
"peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
|
||||
"peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-white data-[state=unchecked]:bg-[#409EFD1A]",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
|
|
|
|||
|
|
@ -4,5 +4,5 @@
|
|||
"outDir": "dist"
|
||||
},
|
||||
"exclude": ["node_modules", "dist"],
|
||||
"include": ["shadcn", "icons", "hooks", "components"]
|
||||
"include": ["shadcn", "icons", "hooks", "components", "types.d.ts"]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,5 +4,5 @@
|
|||
"outDir": "dist"
|
||||
},
|
||||
"exclude": ["node_modules", "dist"],
|
||||
"include": ["shadcn", "icons", "hooks", "components"]
|
||||
"include": ["shadcn", "icons", "hooks", "components", "types.d.ts"]
|
||||
}
|
||||
|
|
|
|||
4
packages/ui/types.d.ts
vendored
Normal file
4
packages/ui/types.d.ts
vendored
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
declare module "*.svg" {
|
||||
const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
|
||||
export default content;
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue