Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion apps/app/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
"dependencies": {
"@ai-sdk/openai": "^1.1.12",
"@ai-sdk/provider": "^1.0.7",
"@ai-sdk/react": "^1.1.21",
"@aws-sdk/client-s3": "^3.758.0",
"@aws-sdk/s3-request-presigner": "^3.758.0",
"@browserbasehq/sdk": "^2.3.0",
Expand All @@ -37,7 +38,7 @@
"@types/d3": "^7.4.3",
"@uploadthing/react": "^7.2.0",
"@upstash/ratelimit": "^2.0.5",
"ai": "^4.1.41",
"ai": "^4.1.54",
"argon2": "^0.41.1",
"bun": "^1.2.2",
"crypto": "^1.0.1",
Expand Down Expand Up @@ -79,6 +80,7 @@
"uploadthing": "^7.5.0",
"use-debounce": "^10.0.4",
"use-long-press": "^3.2.0",
"uuid": "^11.1.0",

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Version mismatch between uuid and @types/uuid.

There's a major version mismatch between uuid (v11.1.0) and its type definitions @types/uuid (v10.0.0). This could lead to TypeScript errors or incorrect type definitions.

- "uuid": "^11.1.0",
+ "uuid": "^10.0.0",

Or update the type definitions to match:

- "@types/uuid": "^10.0.0",
+ "@types/uuid": "^11.0.0",

Choose the version that best fits your requirements, but ensure they have matching major versions.

Also applies to: 94-94

"xml2js": "^0.6.2",
"yarn": "^1.22.22",
"zustand": "^5.0.3"
Expand All @@ -89,6 +91,7 @@
"@types/node": "^22.13.2",
"@types/react": "19.0.10",
"@types/react-dom": "19.0.4",
"@types/uuid": "^10.0.0",
"postcss": "^8.5.2",
"tailwindcss": "^3.4.17",
"typescript": "^5.7.3"
Expand Down
159 changes: 81 additions & 78 deletions apps/app/src/app/[locale]/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,103 +10,106 @@ import localFont from "next/font/local";
import { NuqsAdapter } from "nuqs/adapters/next/app";
import { Toaster } from "sonner";
import { Providers } from "./providers";
import { ChatProvider } from "@/components/chat/ChatProvider";

export const metadata: Metadata = {
metadataBase: new URL("https://app.trycomp.ai"),
title: "Comp AI | Automate SOC 2, ISO 27001 and GDPR compliance with AI.",
description: "Automate SOC 2, ISO 27001 and GDPR compliance with AI.",
twitter: {
title: "Comp AI | Automate SOC 2, ISO 27001 and GDPR compliance with AI.",
description: "Automate SOC 2, ISO 27001 and GDPR compliance with AI.",
images: [
{
url: "https://cdn.trycomp.ai/opengraph-image.jpg",
width: 800,
height: 600,
},
{
url: "https://cdn.trycomp.ai/opengraph-image.jpg",
width: 1800,
height: 1600,
},
],
},
openGraph: {
title: "Comp AI | Automate SOC 2, ISO 27001 and GDPR compliance with AI.",
description: "Automate SOC 2, ISO 27001 and GDPR compliance with AI.",
url: "https://app.trycomp.ai",
siteName: "Comp AI",
images: [
{
url: "https://cdn.trycomp.ai/opengraph-image.jpg",
width: 800,
height: 600,
},
{
url: "https://cdn.trycomp.ai/opengraph-image.jpg",
width: 1800,
height: 1600,
},
],
locale: "en_US",
type: "website",
},
metadataBase: new URL("https://app.trycomp.ai"),
title: "Comp AI | Automate SOC 2, ISO 27001 and GDPR compliance with AI.",
description: "Automate SOC 2, ISO 27001 and GDPR compliance with AI.",
twitter: {
title: "Comp AI | Automate SOC 2, ISO 27001 and GDPR compliance with AI.",
description: "Automate SOC 2, ISO 27001 and GDPR compliance with AI.",
images: [
{
url: "https://cdn.trycomp.ai/opengraph-image.jpg",
width: 800,
height: 600,
},
{
url: "https://cdn.trycomp.ai/opengraph-image.jpg",
width: 1800,
height: 1600,
},
],
},
openGraph: {
title: "Comp AI | Automate SOC 2, ISO 27001 and GDPR compliance with AI.",
description: "Automate SOC 2, ISO 27001 and GDPR compliance with AI.",
url: "https://app.trycomp.ai",
siteName: "Comp AI",
images: [
{
url: "https://cdn.trycomp.ai/opengraph-image.jpg",
width: 800,
height: 600,
},
{
url: "https://cdn.trycomp.ai/opengraph-image.jpg",
width: 1800,
height: 1600,
},
],
locale: "en_US",
type: "website",
},
};

export const viewport = {
width: "device-width",
initialScale: 1,
maximumScale: 1,
userScalable: false,
themeColor: [
{ media: "(prefers-color-scheme: light)" },
{ media: "(prefers-color-scheme: dark)" },
],
width: "device-width",
initialScale: 1,
maximumScale: 1,
userScalable: false,
themeColor: [
{ media: "(prefers-color-scheme: light)" },
{ media: "(prefers-color-scheme: dark)" },
],
};

const font = localFont({
src: "/../../../public/fonts/GeneralSans-Variable.ttf",
display: "swap",
variable: "--font-general-sans",
src: "/../../../public/fonts/GeneralSans-Variable.ttf",
display: "swap",
variable: "--font-general-sans",
});

export const preferredRegion = ["auto"];
export const maxDuration = 5;

if (env.NEXT_PUBLIC_POSTHOG_KEY && env.NEXT_PUBLIC_POSTHOG_HOST) {
initializeServer({
apiKey: env.NEXT_PUBLIC_POSTHOG_KEY,
apiHost: env.NEXT_PUBLIC_POSTHOG_HOST,
});
initializeServer({
apiKey: env.NEXT_PUBLIC_POSTHOG_KEY,
apiHost: env.NEXT_PUBLIC_POSTHOG_HOST,
});
}

export default async function Layout(props: {
children: React.ReactNode;
params: Promise<{ locale: string }>;
children: React.ReactNode;
params: Promise<{ locale: string }>;
}) {
const params = await props.params;
const params = await props.params;

const { locale } = params;
const { locale } = params;

const { children } = props;
const { children } = props;

return (
<html lang={locale} suppressHydrationWarning>
<body
className={cn(
`${GeistMono.variable} ${font.variable}`,
"whitespace-pre-line overscroll-none antialiased",
)}
>
<NuqsAdapter>
<SessionProvider>
<Providers locale={locale}>
<main>{children}</main>
</Providers>
</SessionProvider>
</NuqsAdapter>
<Toaster richColors />
</body>
</html>
);
return (
<html lang={locale} suppressHydrationWarning>
<body
className={cn(
`${GeistMono.variable} ${font.variable}`,
"whitespace-pre-line overscroll-none antialiased",
)}
>
<NuqsAdapter>
<SessionProvider>
<Providers locale={locale}>
<ChatProvider>
<main>{children}</main>
</ChatProvider>
</Providers>
</SessionProvider>
</NuqsAdapter>
<Toaster richColors />
</body>
</html>
);
}
34 changes: 26 additions & 8 deletions apps/app/src/app/api/chat/route.ts
Original file line number Diff line number Diff line change
@@ -1,18 +1,36 @@
import { openai } from "@ai-sdk/openai";
import { convertToCoreMessages, streamText } from "ai";
import { streamText } from "ai";
import { env } from "@/env.mjs";

export const runtime = "nodejs";
export const maxDuration = 30;

export async function POST(req: Request) {
const { messages } = await req.json();

const result = await streamText({
model: openai("gpt-4o-mini"),
system:
"You generate markdown documents for users. Unless specified, this is a draft. Keep things shortish. Do not add any supplementary text, as everything you say will be placed into a document. If you're confused however, it's okay to ask a user for info. Responses must be either a chat response, or a document. Don't add bold styling to headings.",
messages: convertToCoreMessages(messages),
});
if (!env.OPENAI_API_KEY) {
return new Response(
JSON.stringify({ error: "OpenAI API key is not configured" }),
{ status: 500 }
);
}

return result.toDataStreamResponse();
try {
const result = await streamText({
model: openai("gpt-4o-mini"),
system:
"You are a helpful assistant. Provide concise, accurate, and helpful responses to user queries.",
messages,
});

return result.toDataStreamResponse();
} catch (error) {
console.error("Error in chat API:", error);
return new Response(
JSON.stringify({
error: "An error occurred while processing your request",
}),
{ status: 500 }
);
}
}
34 changes: 34 additions & 0 deletions apps/app/src/components/chat/ChatButton.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
"use client";

import { useState } from "react";
import { ChatBubbleIcon } from "@radix-ui/react-icons";
import { ChatInterface } from "./ChatInterface";
import { Button } from "@bubba/ui/button";
import { cn } from "@bubba/ui/cn";

interface ChatButtonProps {
className?: string;
}

export function ChatButton({ className }: ChatButtonProps) {
const [isOpen, setIsOpen] = useState(false);

const toggleChat = () => {
setIsOpen(!isOpen);
};

return (
<div className="fixed bottom-4 right-4 z-50">
{isOpen && <ChatInterface onClose={() => setIsOpen(false)} />}
<Button
onClick={toggleChat}
size="icon"
variant={isOpen ? "destructive" : "outline"}
className={cn("h-12 w-12 rounded-full shadow-lg", className)}
aria-label={isOpen ? "Close chat" : "Open chat"}
>
<ChatBubbleIcon className="h-5 w-5" />
</Button>
</div>
);
}
Loading