feat: Trieve integration (#942)

Yonom · Oct 9, 2024 · b4f8708 · b4f8708
1 parent ae423c5
commit b4f8708
Show file tree

Hide file tree

Showing 38 changed files with 1,700 additions and 17 deletions.
diff --git a/examples/with-trieve/.env.example b/examples/with-trieve/.env.example
@@ -0,0 +1,3 @@
+NEXT_PUBLIC_TRIEVE_API_URL=
+NEXT_PUBLIC_TRIEVE_API_KEY=
+NEXT_PUBLIC_TRIEVE_DATASET_ID=
diff --git a/examples/with-trieve/.eslintrc.json b/examples/with-trieve/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}
diff --git a/examples/with-trieve/.gitignore b/examples/with-trieve/.gitignore
@@ -0,0 +1 @@
+.vercel
diff --git a/examples/with-trieve/README.md b/examples/with-trieve/README.md
@@ -0,0 +1,2 @@
+# Trieve Example
+
diff --git a/examples/with-trieve/app/globals.css b/examples/with-trieve/app/globals.css
@@ -0,0 +1,76 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 10% 3.9%;
+
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
diff --git a/examples/with-trieve/app/layout.tsx b/examples/with-trieve/app/layout.tsx
@@ -0,0 +1,18 @@
+import "./globals.css";
+
+import { cn } from "@/lib/utils";
+import { Montserrat } from "next/font/google";
+
+const montserrat = Montserrat({ subsets: ["latin"] });
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={cn(montserrat.className, "h-dvh")}>{children}</body>
+    </html>
+  );
+}
diff --git a/examples/with-trieve/app/page.tsx b/examples/with-trieve/app/page.tsx
@@ -0,0 +1,79 @@
+"use client";
+
+import { AssistantRuntimeProvider, Thread } from "@assistant-ui/react";
+import {
+  makeTrieveMarkdownText,
+  TrieveComposer,
+  TrieveThreadWelcome,
+  useTrieveExtras,
+  useTrieveRuntime,
+} from "@assistant-ui/react-trieve";
+import { TrieveSDK } from "trieve-ts-sdk";
+
+const TrieveMarkdownText = makeTrieveMarkdownText();
+
+const trieve = new TrieveSDK({
+  baseUrl: process.env["NEXT_PUBLIC_TRIEVE_API_URL"]!,
+  apiKey: process.env["NEXT_PUBLIC_TRIEVE_API_KEY"]!,
+  datasetId: process.env["NEXT_PUBLIC_TRIEVE_DATASET_ID"]!,
+});
+
+const RuntimeProvider = () => {
+  const runtime = useTrieveRuntime({
+    trieve,
+    ownerId: "abcd",
+    tags: [
+      {
+        name: "Stories",
+        value: "story",
+      },
+      {
+        name: "Comments",
+        value: "comment",
+      },
+      {
+        name: "Ask HN",
+        value: "ask",
+      },
+      {
+        name: "Show HN",
+        value: "show",
+      },
+      {
+        name: "Jobs",
+        value: "job",
+      },
+      {
+        name: "Polls",
+        value: "poll",
+      },
+    ],
+  });
+
+  return (
+    <AssistantRuntimeProvider runtime={runtime}>
+      <MyAssistant />
+    </AssistantRuntimeProvider>
+  );
+};
+
+export default RuntimeProvider;
+
+function MyAssistant() {
+  const { title } = useTrieveExtras();
+
+  return (
+    <div className="flex h-full flex-col overflow-hidden pt-8">
+      <p className="text-center text-xl font-bold">{title}</p>
+      <div className="flex-grow overflow-hidden">
+        <Thread
+          components={{
+            Composer: TrieveComposer,
+            ThreadWelcome: TrieveThreadWelcome,
+          }}
+          assistantMessage={{ components: { Text: TrieveMarkdownText } }}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/examples/with-trieve/components.json b/examples/with-trieve/components.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "app/globals.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}
diff --git a/examples/with-trieve/lib/utils.ts b/examples/with-trieve/lib/utils.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
diff --git a/examples/with-trieve/next-env.d.ts b/examples/with-trieve/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
diff --git a/examples/with-trieve/next.config.mjs b/examples/with-trieve/next.config.mjs
@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default nextConfig;
diff --git a/examples/with-trieve/package.json b/examples/with-trieve/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "with-trieve",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@assistant-ui/react": "workspace:*",
+    "@assistant-ui/react-markdown": "workspace:*",
+    "@assistant-ui/react-trieve": "workspace:*",
+    "clsx": "^2.1.1",
+    "next": "14.2.14",
+    "react": "^18",
+    "react-dom": "^18",
+    "tailwind-merge": "^2.5.2",
+    "tailwindcss-animate": "^1.0.7",
+    "trieve-ts-sdk": "^0.0.12"
+  },
+  "devDependencies": {
+    "@assistant-ui/tsconfig": "workspace:*",
+    "@types/node": "^22",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.14",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.13",
+    "typescript": "^5.6.2"
+  }
+}
diff --git a/examples/with-trieve/postcss.config.mjs b/examples/with-trieve/postcss.config.mjs
@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;
diff --git a/examples/with-trieve/tailwind.config.ts b/examples/with-trieve/tailwind.config.ts
@@ -0,0 +1,87 @@
+import type { Config } from "tailwindcss";
+
+const config = {
+  darkMode: ["class"],
+  content: [
+    "./pages/**/*.{ts,tsx}",
+    "./components/**/*.{ts,tsx}",
+    "./app/**/*.{ts,tsx}",
+    "./src/**/*.{ts,tsx}",
+  ],
+  prefix: "",
+  theme: {
+    container: {
+      center: true,
+      padding: {
+        xs: "2rem",
+      },
+      screens: {
+        xs: "460px",
+      },
+    },
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
+  },
+  plugins: [
+    require("tailwindcss-animate"),
+    require("@assistant-ui/react/tailwindcss")({ shadcn: true }),
+    require("@assistant-ui/react-markdown/tailwindcss"),
+    require("@assistant-ui/react-trieve/tailwindcss"),
+  ],
+} satisfies Config;
+
+export default config;
diff --git a/examples/with-trieve/tsconfig.json b/examples/with-trieve/tsconfig.json
@@ -0,0 +1,22 @@
+{
+  "extends": "@assistant-ui/tsconfig/base.json",
+  "compilerOptions": {
+    "target": "ES6",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"],
+      "@assistant-ui/*": ["../../packages/*/src"],
+      "@assistant-ui/react/*": ["../../packages/react/src/*"]
+    },
+    "allowJs": true,
+    "strictNullChecks": true,
+    "jsx": "preserve"
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}
diff --git a/packages/react-trieve/.eslintrc.json b/packages/react-trieve/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}
diff --git a/packages/react-trieve/README.md b/packages/react-trieve/README.md
@@ -0,0 +1,3 @@
+# `@assistant-ui/react-trieve`
+
+Trieve integration for `@assistant-ui/react`.
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# `@assistant-ui/react-trieve`

		Trieve integration for `@assistant-ui/react`.