+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+
+ );
+};
+
+export default Chat;
diff --git a/app/components/file-viewer.module.css b/app/components/file-viewer.module.css
new file mode 100644
index 00000000..1d2d766f
--- /dev/null
+++ b/app/components/file-viewer.module.css
@@ -0,0 +1,78 @@
+.fileViewer {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ height: 100%;
+ padding: 20px;
+ background-color: #efefef;
+ overflow: hidden;
+ border-radius: 16px;
+}
+
+.filesList {
+ overflow-y: auto;
+ padding: 10px;
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ align-items: center;
+ width: 100%;
+}
+
+.grow {
+ flex-grow: 1;
+}
+
+.fileEntry {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ border-bottom: 1px solid #ececf1;
+ gap: 16px;
+ width: 100%;
+}
+
+.fileName {
+ flex-grow: 1;
+}
+.fileStatus {
+ font-size: 0.8em;
+ color: #666;
+}
+
+.fileDeleteIcon {
+ cursor: pointer;
+}
+
+.fileUploadContainer {
+ padding: 10px;
+ display: flex;
+ justify-content: center;
+}
+
+.fileUploadBtn {
+ background-color: #000;
+ color: white;
+ padding: 8px 24px;
+ border-radius: 32px;
+ text-align: center;
+ display: inline-block;
+ cursor: pointer;
+}
+
+.fileUploadInput {
+ display: none;
+}
+
+.title {
+ font-size: 1.2em;
+ font-weight: 600;
+}
+
+.fileName {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+}
diff --git a/app/components/file-viewer.tsx b/app/components/file-viewer.tsx
new file mode 100644
index 00000000..b91db891
--- /dev/null
+++ b/app/components/file-viewer.tsx
@@ -0,0 +1,97 @@
+import React, { useState, useEffect } from "react";
+import styles from "./file-viewer.module.css";
+
+const TrashIcon = () => (
+
+);
+
+const FileViewer = () => {
+ const [files, setFiles] = useState([]);
+
+ useEffect(() => {
+ const interval = setInterval(() => {
+ fetchFiles();
+ }, 1000);
+
+ return () => clearInterval(interval);
+ }, []);
+
+ const fetchFiles = async () => {
+ const resp = await fetch("/api/assistants/files", {
+ method: "GET",
+ });
+ const data = await resp.json();
+ setFiles(data);
+ };
+
+ const handleFileDelete = async (fileId) => {
+ await fetch("/api/assistants/files", {
+ method: "DELETE",
+ body: JSON.stringify({ fileId }),
+ });
+ };
+
+ const handleFileUpload = async (event) => {
+ const data = new FormData();
+ if (event.target.files.length < 0) return;
+ data.append("file", event.target.files[0]);
+ await fetch("/api/assistants/files", {
+ method: "POST",
+ body: data,
+ });
+ };
+
+ return (
+
+ {messages.map((msg, index) => (
+
+
+
+
+ );
+};
+
+export default FileViewer;
diff --git a/app/components/warnings.module.css b/app/components/warnings.module.css
new file mode 100644
index 00000000..cab074ac
--- /dev/null
+++ b/app/components/warnings.module.css
@@ -0,0 +1,57 @@
+.container {
+ padding: 20px;
+ /* background-color: #d95c5c; */
+ /* outline: 8px solid #4caf50; */
+ background-color: #fff;
+ width: 100vw;
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ border-radius: 12px;
+ color: #000;
+}
+
+.empty,
+.assistantId {
+ background-color: #ffffff;
+ padding: 10px;
+ margin-bottom: 10px;
+ width: 80%;
+ border: 1px solid #ccc;
+}
+
+.button {
+ padding: 8px 24px;
+ background-color: #000;
+ color: white;
+ border: none;
+ font-size: 1em;
+ border-radius: 60px;
+ cursor: pointer;
+}
+.container h1 {
+ font-size: 1.5em;
+ font-weight: 600;
+}
+.result {
+ border-radius: 8px;
+ padding: 0 8px;
+ padding: 8px 24px;
+ background-color: #000;
+ color: white;
+ font-size: 1em;
+ border-radius: 60px;
+}
+
+.message {
+ margin: 20px 0;
+ font-size: 1em;
+}
+.message span {
+ background-color: #efefef;
+ border-radius: 8px;
+ padding: 0 8px;
+}
diff --git a/app/components/warnings.tsx b/app/components/warnings.tsx
new file mode 100644
index 00000000..2d823633
--- /dev/null
+++ b/app/components/warnings.tsx
@@ -0,0 +1,47 @@
+"use client";
+
+import React, { useState } from "react";
+import styles from "./warnings.module.css";
+import { assistantId } from "../assistant-config";
+
+const Warnings = () => {
+ const [loading, setLoading] = useState(false);
+ const [newAssistantId, setNewAssistantId] = useState("");
+
+ const fetchAssistantId = async () => {
+ setLoading(true);
+
+ const response = await fetch("/api/assistants", { method: "POST" });
+ const data = await response.json();
+ setNewAssistantId(data.assistantId);
+
+ setLoading(false);
+ };
+
+ return (
+ <>
+ {!assistantId && (
+
+ {files.length === 0 ? (
+
+ Attach files to test file search
+ ) : (
+ files.map((file) => (
+
+
+ ))
+ )}
+
+ {file.filename}
+ {file.status}
+
+ handleFileDelete(file.file_id)}>
+
+
+
+
+
+
+ )}
+
+ );
+};
+
+export default Warnings;
diff --git a/app/components/weather-widget.module.css b/app/components/weather-widget.module.css
new file mode 100644
index 00000000..1b1a6218
--- /dev/null
+++ b/app/components/weather-widget.module.css
@@ -0,0 +1,59 @@
+.weatherBGCloudy {
+ background: linear-gradient(to top right, #b6c6c9, #8fa3ad);
+}
+
+.weatherBGSunny {
+ background: linear-gradient(to bottom left, #ffffd0, #007cf0);
+}
+
+.weatherBGRainy {
+ background: linear-gradient(to top, #647d8e, #a8c0c0);
+}
+
+.weatherBGSnowy {
+ background: linear-gradient(to bottom, #ffffff, #acc2d9);
+}
+
+.weatherBGWindy {
+ background: linear-gradient(to right, #c4e0e5, #4ca1af);
+}
+
+.weatherWidget {
+ width: 100%;
+ height: 100%;
+ padding: 4px;
+ padding: 20px;
+ color: white;
+ text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
+ align-items: center;
+ justify-content: center;
+ display: flex;
+}
+
+.weatherWidgetData {
+ display: flex;
+ gap: 4px;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+
+.weatherEmptyState {
+ width: 100%;
+ height: 100%;
+ padding: 20px;
+ color: white;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ background: var(
+ --emptyStateBackground,
+ linear-gradient(to top right, #b6c6c9, #8fa3ad)
+ );
+}
+
+.weatherWidgetData h2 {
+ font-size: 8em;
+ font-weight: 500;
+}
diff --git a/app/components/weather-widget.tsx b/app/components/weather-widget.tsx
new file mode 100644
index 00000000..049091f1
--- /dev/null
+++ b/app/components/weather-widget.tsx
@@ -0,0 +1,44 @@
+import React from "react";
+import styles from "./weather-widget.module.css";
+
+const WeatherWidget = ({
+ location = "---",
+ temperature = "---",
+ conditions = "Sunny",
+ isEmpty = false,
+}) => {
+ const conditionClassMap = {
+ Cloudy: styles.weatherBGCloudy,
+ Sunny: styles.weatherBGSunny,
+ Rainy: styles.weatherBGRainy,
+ Snowy: styles.weatherBGSnowy,
+ Windy: styles.weatherBGWindy,
+ };
+
+ if (isEmpty) {
+ return (
+ Start by creating your assistant
+
+ Create an assistant and set its ID in{" "}
+ app/assistant-config.ts
+
+ {!newAssistantId ? (
+
+ ) : (
+ {newAssistantId}
+ )}
+
+
+ );
+ }
+
+ const weatherClass = `${styles.weatherWidget} ${
+ conditionClassMap[conditions] || styles.weatherBGSunny
+ }`;
+
+ return (
+
+
+ Enter a city to see local weather
+try: what's the weather like in Berkeley?
+
+
+ );
+};
+
+export default WeatherWidget;
diff --git a/app/examples/all/page.module.css b/app/examples/all/page.module.css
new file mode 100644
index 00000000..b3c260eb
--- /dev/null
+++ b/app/examples/all/page.module.css
@@ -0,0 +1,44 @@
+.main {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+}
+
+.container {
+ display: flex;
+ width: 100%;
+ height: 100vh;
+}
+
+.column {
+ display: flex;
+ flex-direction: column;
+ width: 50%;
+ height: calc(100% - 40px);
+ gap: 20px;
+ margin: 20px;
+ justify-content: space-between;
+}
+
+.column > * {
+ border-radius: 16px;
+ overflow: hidden;
+ width: 100%;
+ height: 50%;
+ border-radius: 16px;
+}
+.chatContainer {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ background-color: white;
+}
+
+.chat {
+ max-width: 600px;
+ width: 100%;
+ height: 100%;
+}
diff --git a/app/examples/all/page.tsx b/app/examples/all/page.tsx
new file mode 100644
index 00000000..776f68bd
--- /dev/null
+++ b/app/examples/all/page.tsx
@@ -0,0 +1,58 @@
+"use client";
+
+import React, { useState } from "react";
+import styles from "./page.module.css";
+import Chat from "../../components/chat";
+import WeatherWidget from "../../components/weather-widget";
+import { getWeather } from "../../utils/weather";
+import FileViewer from "../../components/file-viewer";
+
+const FunctionCalling = () => {
+ const [weatherData, setWeatherData] = useState({});
+
+ const functionCallHandler = async (call) => {
+ if (call?.function?.name !== "get_weather") return;
+ const args = JSON.parse(call.function.arguments);
+ const data = getWeather(args.location);
+ setWeatherData(data);
+ return JSON.stringify(data);
+ };
+
+ // return (
+ //
+
+ {location}
+{temperature !== "---" ? `${temperature}°F` : temperature}
+{conditions}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ );
+}
diff --git a/app/page.module.css b/app/page.module.css
new file mode 100644
index 00000000..17fdd3fe
--- /dev/null
+++ b/app/page.module.css
@@ -0,0 +1,47 @@
+.main {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ background-color: white;
+}
+.title {
+ font-size: 1.5em;
+ margin-bottom: 20px;
+ font-weight: 600;
+}
+
+.container {
+ display: flex;
+ flex-direction: row;
+ gap: 20px;
+ max-width: 1200px;
+ width: 100%;
+ padding: 20px;
+ box-sizing: border-box;
+ align-items: center;
+ justify-content: center;
+}
+
+.category {
+ color: black;
+ display: flex;
+ font-size: 1em;
+ border-radius: 32px;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ background-color: #efefef;
+ cursor: pointer;
+ max-width: 600px;
+ width: 120px;
+ height: 120px;
+ padding: 20px;
+ transition: background-color 0.3s ease;
+ font-weight: 500;
+}
+
+.category:hover {
+ background-color: #e3e3eb;
+}
diff --git a/app/page.tsx b/app/page.tsx
new file mode 100644
index 00000000..60c34a3b
--- /dev/null
+++ b/app/page.tsx
@@ -0,0 +1,30 @@
+"use client";
+
+import React from "react";
+import styles from "./page.module.css";
+
+const Home = () => {
+ const categories = {
+ "Basic chat": "basic-chat",
+ "Function calling": "function-calling",
+ "File search": "file-search",
+ All: "all",
+ };
+
+ return (
+
+ Explore sample apps built with Assistants API
+
+
+ {Object.entries(categories).map(([name, url]) => (
+
+ {name}
+
+ ))}
+
+