mirror of
https://github.com/run-llama/nextjs-rsc.git
synced 2026-06-30 21:38:02 -04:00
feat: sync with latest CL (#2)
* feat: sync with latest CL * declare use client
This commit is contained in:
Thuc Pham
@@ -36,4 +36,5 @@ next-env.d.ts
|
||||
|
||||
output/
|
||||
cache/
|
||||
.cache/
|
||||
.env
|
||||
@@ -1,7 +1,7 @@
|
||||
import {
|
||||
BaseChatEngine,
|
||||
BaseToolWithCall,
|
||||
OpenAIAgent,
|
||||
LLMAgent,
|
||||
QueryEngineTool,
|
||||
} from "llamaindex";
|
||||
import fs from "node:fs/promises";
|
||||
@@ -42,7 +42,7 @@ export async function createChatEngine(documentIds?: string[], params?: any) {
|
||||
tools.push(...(await createTools(toolConfig)));
|
||||
}
|
||||
|
||||
const agent = new OpenAIAgent({
|
||||
const agent = new LLMAgent({
|
||||
tools,
|
||||
systemPrompt: process.env.SYSTEM_PROMPT,
|
||||
}) as unknown as BaseChatEngine;
|
||||
|
||||
@@ -5,7 +5,6 @@ import * as dotenv from "dotenv";
|
||||
|
||||
import { getDocuments } from "./loader";
|
||||
import { initSettings } from "./settings";
|
||||
import { STORAGE_CACHE_DIR } from "./shared";
|
||||
|
||||
// Load environment variables from local .env file
|
||||
dotenv.config();
|
||||
@@ -20,9 +19,13 @@ async function getRuntime(func: any) {
|
||||
async function generateDatasource() {
|
||||
console.log(`Generating storage context...`);
|
||||
// Split documents, create embeddings and store them in the storage context
|
||||
const persistDir = process.env.STORAGE_CACHE_DIR;
|
||||
if (!persistDir) {
|
||||
throw new Error("STORAGE_CACHE_DIR environment variable is required!");
|
||||
}
|
||||
const ms = await getRuntime(async () => {
|
||||
const storageContext = await storageContextFromDefaults({
|
||||
persistDir: STORAGE_CACHE_DIR,
|
||||
persistDir,
|
||||
});
|
||||
const documents = await getDocuments();
|
||||
|
||||
|
||||
@@ -1,10 +1,13 @@
|
||||
import { SimpleDocumentStore, VectorStoreIndex } from "llamaindex";
|
||||
import { storageContextFromDefaults } from "llamaindex/storage/StorageContext";
|
||||
import { STORAGE_CACHE_DIR } from "./shared";
|
||||
|
||||
export async function getDataSource(params?: any) {
|
||||
const persistDir = process.env.STORAGE_CACHE_DIR;
|
||||
if (!persistDir) {
|
||||
throw new Error("STORAGE_CACHE_DIR environment variable is required!");
|
||||
}
|
||||
const storageContext = await storageContextFromDefaults({
|
||||
persistDir: `${STORAGE_CACHE_DIR}`,
|
||||
persistDir,
|
||||
});
|
||||
|
||||
const numberOfDocs = Object.keys(
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import {
|
||||
FILE_EXT_TO_READER,
|
||||
SimpleDirectoryReader,
|
||||
} from "llamaindex/readers/SimpleDirectoryReader";
|
||||
} from "llamaindex/readers/index";
|
||||
|
||||
export const DATA_DIR = "./data";
|
||||
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
export const STORAGE_CACHE_DIR = "./cache";
|
||||
@@ -0,0 +1,296 @@
|
||||
import { JSONSchemaType } from "ajv";
|
||||
import fs from "fs";
|
||||
import { BaseTool, Settings, ToolMetadata } from "llamaindex";
|
||||
import Papa from "papaparse";
|
||||
import path from "path";
|
||||
import { saveDocument } from "../../llamaindex/documents/helper";
|
||||
|
||||
type ExtractMissingCellsParameter = {
|
||||
filePath: string;
|
||||
};
|
||||
|
||||
export type MissingCell = {
|
||||
rowIndex: number;
|
||||
columnIndex: number;
|
||||
question: string;
|
||||
};
|
||||
|
||||
const CSV_EXTRACTION_PROMPT = `You are a data analyst. You are given a table with missing cells.
|
||||
Your task is to identify the missing cells and the questions needed to fill them.
|
||||
IMPORTANT: Column indices should be 0-based
|
||||
|
||||
# Instructions:
|
||||
- Understand the entire content of the table and the topics of the table.
|
||||
- Identify the missing cells and the meaning of the data in the cells.
|
||||
- For each missing cell, provide the row index and the correct column index (remember: first data column is 1).
|
||||
- For each missing cell, provide the question needed to fill the cell (it's important to provide the question that is relevant to the topic of the table).
|
||||
- Since the cell's value should be concise, the question should request a numerical answer or a specific value.
|
||||
- Finally, only return the answer in JSON format with the following schema:
|
||||
{
|
||||
"missing_cells": [
|
||||
{
|
||||
"rowIndex": number,
|
||||
"columnIndex": number,
|
||||
"question": string
|
||||
}
|
||||
]
|
||||
}
|
||||
- If there are no missing cells, return an empty array.
|
||||
- The answer is only the JSON object, nothing else and don't wrap it inside markdown code block.
|
||||
|
||||
# Example:
|
||||
# | | Name | Age | City |
|
||||
# |----|------|-----|------|
|
||||
# | 0 | John | | Paris|
|
||||
# | 1 | Mary | | |
|
||||
# | 2 | | 30 | |
|
||||
#
|
||||
# Your thoughts:
|
||||
# - The table is about people's names, ages, and cities.
|
||||
# - Row: 1, Column: 2 (Age column), Question: "How old is Mary? Please provide only the numerical answer."
|
||||
# - Row: 1, Column: 3 (City column), Question: "In which city does Mary live? Please provide only the city name."
|
||||
# Your answer:
|
||||
# {
|
||||
# "missing_cells": [
|
||||
# {
|
||||
# "rowIndex": 1,
|
||||
# "columnIndex": 2,
|
||||
# "question": "How old is Mary? Please provide only the numerical answer."
|
||||
# },
|
||||
# {
|
||||
# "rowIndex": 1,
|
||||
# "columnIndex": 3,
|
||||
# "question": "In which city does Mary live? Please provide only the city name."
|
||||
# }
|
||||
# ]
|
||||
# }
|
||||
|
||||
|
||||
# Here is your task:
|
||||
|
||||
- Table content:
|
||||
{table_content}
|
||||
|
||||
- Your answer:
|
||||
`;
|
||||
|
||||
const DEFAULT_METADATA: ToolMetadata<
|
||||
JSONSchemaType<ExtractMissingCellsParameter>
|
||||
> = {
|
||||
name: "extract_missing_cells",
|
||||
description: `Use this tool to extract missing cells in a CSV file and generate questions to fill them. This tool only works with local file path.`,
|
||||
parameters: {
|
||||
type: "object",
|
||||
properties: {
|
||||
filePath: {
|
||||
type: "string",
|
||||
description: "The local file path to the CSV file.",
|
||||
},
|
||||
},
|
||||
required: ["filePath"],
|
||||
},
|
||||
};
|
||||
|
||||
export interface ExtractMissingCellsParams {
|
||||
metadata?: ToolMetadata<JSONSchemaType<ExtractMissingCellsParameter>>;
|
||||
}
|
||||
|
||||
export class ExtractMissingCellsTool
|
||||
implements BaseTool<ExtractMissingCellsParameter>
|
||||
{
|
||||
metadata: ToolMetadata<JSONSchemaType<ExtractMissingCellsParameter>>;
|
||||
defaultExtractionPrompt: string;
|
||||
|
||||
constructor(params: ExtractMissingCellsParams) {
|
||||
this.metadata = params.metadata ?? DEFAULT_METADATA;
|
||||
this.defaultExtractionPrompt = CSV_EXTRACTION_PROMPT;
|
||||
}
|
||||
|
||||
private readCsvFile(filePath: string): Promise<string[][]> {
|
||||
return new Promise((resolve, reject) => {
|
||||
fs.readFile(filePath, "utf8", (err, data) => {
|
||||
if (err) {
|
||||
reject(err);
|
||||
return;
|
||||
}
|
||||
|
||||
const parsedData = Papa.parse<string[]>(data, {
|
||||
skipEmptyLines: false,
|
||||
});
|
||||
|
||||
if (parsedData.errors.length) {
|
||||
reject(parsedData.errors);
|
||||
return;
|
||||
}
|
||||
|
||||
// Ensure all rows have the same number of columns as the header
|
||||
const maxColumns = parsedData.data[0].length;
|
||||
const paddedRows = parsedData.data.map((row) => {
|
||||
return [...row, ...Array(maxColumns - row.length).fill("")];
|
||||
});
|
||||
|
||||
resolve(paddedRows);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
private formatToMarkdownTable(data: string[][]): string {
|
||||
if (data.length === 0) return "";
|
||||
|
||||
const maxColumns = data[0].length;
|
||||
|
||||
const headerRow = `| ${data[0].join(" | ")} |`;
|
||||
const separatorRow = `| ${Array(maxColumns).fill("---").join(" | ")} |`;
|
||||
|
||||
const dataRows = data.slice(1).map((row) => {
|
||||
return `| ${row.join(" | ")} |`;
|
||||
});
|
||||
|
||||
return [headerRow, separatorRow, ...dataRows].join("\n");
|
||||
}
|
||||
|
||||
async call(input: ExtractMissingCellsParameter): Promise<MissingCell[]> {
|
||||
const { filePath } = input;
|
||||
let tableContent: string[][];
|
||||
try {
|
||||
tableContent = await this.readCsvFile(filePath);
|
||||
} catch (error) {
|
||||
throw new Error(
|
||||
`Failed to read CSV file. Make sure that you are reading a local file path (not a sandbox path).`,
|
||||
);
|
||||
}
|
||||
|
||||
const prompt = this.defaultExtractionPrompt.replace(
|
||||
"{table_content}",
|
||||
this.formatToMarkdownTable(tableContent),
|
||||
);
|
||||
|
||||
const llm = Settings.llm;
|
||||
const response = await llm.complete({
|
||||
prompt,
|
||||
});
|
||||
const rawAnswer = response.text;
|
||||
const parsedResponse = JSON.parse(rawAnswer) as {
|
||||
missing_cells: MissingCell[];
|
||||
};
|
||||
if (!parsedResponse.missing_cells) {
|
||||
throw new Error(
|
||||
"The answer is not in the correct format. There should be a missing_cells array.",
|
||||
);
|
||||
}
|
||||
const answer = parsedResponse.missing_cells;
|
||||
|
||||
return answer;
|
||||
}
|
||||
}
|
||||
|
||||
type FillMissingCellsParameter = {
|
||||
filePath: string;
|
||||
cells: {
|
||||
rowIndex: number;
|
||||
columnIndex: number;
|
||||
answer: string;
|
||||
}[];
|
||||
};
|
||||
|
||||
const FILL_CELLS_METADATA: ToolMetadata<
|
||||
JSONSchemaType<FillMissingCellsParameter>
|
||||
> = {
|
||||
name: "fill_missing_cells",
|
||||
description: `Use this tool to fill missing cells in a CSV file with provided answers. This tool only works with local file path.`,
|
||||
parameters: {
|
||||
type: "object",
|
||||
properties: {
|
||||
filePath: {
|
||||
type: "string",
|
||||
description: "The local file path to the CSV file.",
|
||||
},
|
||||
cells: {
|
||||
type: "array",
|
||||
items: {
|
||||
type: "object",
|
||||
properties: {
|
||||
rowIndex: { type: "number" },
|
||||
columnIndex: { type: "number" },
|
||||
answer: { type: "string" },
|
||||
},
|
||||
required: ["rowIndex", "columnIndex", "answer"],
|
||||
},
|
||||
description: "Array of cells to fill with their answers",
|
||||
},
|
||||
},
|
||||
required: ["filePath", "cells"],
|
||||
},
|
||||
};
|
||||
|
||||
export interface FillMissingCellsParams {
|
||||
metadata?: ToolMetadata<JSONSchemaType<FillMissingCellsParameter>>;
|
||||
}
|
||||
|
||||
export class FillMissingCellsTool
|
||||
implements BaseTool<FillMissingCellsParameter>
|
||||
{
|
||||
metadata: ToolMetadata<JSONSchemaType<FillMissingCellsParameter>>;
|
||||
|
||||
constructor(params: FillMissingCellsParams = {}) {
|
||||
this.metadata = params.metadata ?? FILL_CELLS_METADATA;
|
||||
}
|
||||
|
||||
async call(input: FillMissingCellsParameter): Promise<string> {
|
||||
const { filePath, cells } = input;
|
||||
|
||||
// Read the CSV file
|
||||
const fileContent = await new Promise<string>((resolve, reject) => {
|
||||
fs.readFile(filePath, "utf8", (err, data) => {
|
||||
if (err) {
|
||||
reject(err);
|
||||
} else {
|
||||
resolve(data);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Parse CSV with PapaParse
|
||||
const parseResult = Papa.parse<string[]>(fileContent, {
|
||||
header: false, // Ensure the header is not treated as a separate object
|
||||
skipEmptyLines: false, // Ensure empty lines are not skipped
|
||||
});
|
||||
|
||||
if (parseResult.errors.length) {
|
||||
throw new Error(
|
||||
"Failed to parse CSV file: " + parseResult.errors[0].message,
|
||||
);
|
||||
}
|
||||
|
||||
const rows = parseResult.data;
|
||||
|
||||
// Fill the cells with answers
|
||||
for (const cell of cells) {
|
||||
// Adjust rowIndex to start from 1 for data rows
|
||||
const adjustedRowIndex = cell.rowIndex + 1;
|
||||
if (
|
||||
adjustedRowIndex < rows.length &&
|
||||
cell.columnIndex < rows[adjustedRowIndex].length
|
||||
) {
|
||||
rows[adjustedRowIndex][cell.columnIndex] = cell.answer;
|
||||
}
|
||||
}
|
||||
|
||||
// Convert back to CSV format
|
||||
const updatedContent = Papa.unparse(rows, {
|
||||
delimiter: parseResult.meta.delimiter,
|
||||
});
|
||||
|
||||
// Use the helper function to write the file
|
||||
const parsedPath = path.parse(filePath);
|
||||
const newFileName = `${parsedPath.name}-filled${parsedPath.ext}`;
|
||||
const newFilePath = path.join("output/tools", newFileName);
|
||||
|
||||
const newFileUrl = await saveDocument(newFilePath, updatedContent);
|
||||
|
||||
return (
|
||||
"Successfully filled missing cells in the CSV file. File URL to show to the user: " +
|
||||
newFileUrl
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,11 +1,19 @@
|
||||
import { BaseToolWithCall } from "llamaindex";
|
||||
import { ToolsFactory } from "llamaindex/tools/ToolsFactory";
|
||||
import fs from "node:fs/promises";
|
||||
import path from "node:path";
|
||||
import { CodeGeneratorTool, CodeGeneratorToolParams } from "./code-generator";
|
||||
import {
|
||||
DocumentGenerator,
|
||||
DocumentGeneratorParams,
|
||||
} from "./document-generator";
|
||||
import { DuckDuckGoSearchTool, DuckDuckGoToolParams } from "./duckduckgo";
|
||||
import {
|
||||
ExtractMissingCellsParams,
|
||||
ExtractMissingCellsTool,
|
||||
FillMissingCellsParams,
|
||||
FillMissingCellsTool,
|
||||
} from "./form-filling";
|
||||
import { ImgGeneratorTool, ImgGeneratorToolParams } from "./img-gen";
|
||||
import { InterpreterTool, InterpreterToolParams } from "./interpreter";
|
||||
import { OpenAPIActionTool } from "./openapi-action";
|
||||
@@ -54,6 +62,12 @@ const toolFactory: Record<string, ToolCreator> = {
|
||||
document_generator: async (config: unknown) => {
|
||||
return [new DocumentGenerator(config as DocumentGeneratorParams)];
|
||||
},
|
||||
form_filling: async (config: unknown) => {
|
||||
return [
|
||||
new ExtractMissingCellsTool(config as ExtractMissingCellsParams),
|
||||
new FillMissingCellsTool(config as FillMissingCellsParams),
|
||||
];
|
||||
},
|
||||
};
|
||||
|
||||
async function createLocalTools(
|
||||
@@ -70,3 +84,19 @@ async function createLocalTools(
|
||||
|
||||
return tools;
|
||||
}
|
||||
|
||||
export async function getConfiguredTools(
|
||||
configPath?: string,
|
||||
): Promise<BaseToolWithCall[]> {
|
||||
const configFile = path.join(configPath ?? "config", "tools.json");
|
||||
const toolConfig = JSON.parse(await fs.readFile(configFile, "utf8"));
|
||||
const tools = await createTools(toolConfig);
|
||||
return tools;
|
||||
}
|
||||
|
||||
export async function getTool(
|
||||
toolName: string,
|
||||
): Promise<BaseToolWithCall | undefined> {
|
||||
const tools = await getConfiguredTools();
|
||||
return tools.find((tool) => tool.metadata.name === toolName);
|
||||
}
|
||||
|
||||
@@ -111,13 +111,16 @@ export class InterpreterTool implements BaseTool<InterpreterParameter> {
|
||||
// upload files to sandbox
|
||||
if (input.sandboxFiles) {
|
||||
console.log(`Uploading ${input.sandboxFiles.length} files to sandbox`);
|
||||
for (const filePath of input.sandboxFiles) {
|
||||
const fileName = path.basename(filePath);
|
||||
const localFilePath = path.join(this.uploadedFilesDir, fileName);
|
||||
const content = fs.readFileSync(localFilePath);
|
||||
await this.codeInterpreter?.files.write(filePath, content);
|
||||
try {
|
||||
for (const filePath of input.sandboxFiles) {
|
||||
const fileName = path.basename(filePath);
|
||||
const localFilePath = path.join(this.uploadedFilesDir, fileName);
|
||||
const content = fs.readFileSync(localFilePath);
|
||||
await this.codeInterpreter?.files.write(filePath, content);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Got error when uploading files to sandbox", error);
|
||||
}
|
||||
console.log(`Uploaded ${input.sandboxFiles.length} files to sandbox`);
|
||||
}
|
||||
return this.codeInterpreter;
|
||||
}
|
||||
|
||||
@@ -3,6 +3,7 @@ import crypto from "node:crypto";
|
||||
import fs from "node:fs";
|
||||
import path from "node:path";
|
||||
import { getExtractors } from "../../engine/loader";
|
||||
import { DocumentFile } from "../streaming/annotations";
|
||||
|
||||
const MIME_TYPE_TO_EXT: Record<string, string> = {
|
||||
"application/pdf": "pdf",
|
||||
@@ -12,29 +13,22 @@ const MIME_TYPE_TO_EXT: Record<string, string> = {
|
||||
"docx",
|
||||
};
|
||||
|
||||
const UPLOADED_FOLDER = "output/uploaded";
|
||||
|
||||
export type FileMetadata = {
|
||||
id: string;
|
||||
name: string;
|
||||
url: string;
|
||||
refs: string[];
|
||||
};
|
||||
export const UPLOADED_FOLDER = "output/uploaded";
|
||||
|
||||
export async function storeAndParseFile(
|
||||
filename: string,
|
||||
name: string,
|
||||
fileBuffer: Buffer,
|
||||
mimeType: string,
|
||||
): Promise<FileMetadata> {
|
||||
const fileMetadata = await storeFile(filename, fileBuffer, mimeType);
|
||||
const documents: Document[] = await parseFile(fileBuffer, filename, mimeType);
|
||||
): Promise<DocumentFile> {
|
||||
const file = await storeFile(name, fileBuffer, mimeType);
|
||||
const documents: Document[] = await parseFile(fileBuffer, name, mimeType);
|
||||
// Update document IDs in the file metadata
|
||||
fileMetadata.refs = documents.map((document) => document.id_ as string);
|
||||
return fileMetadata;
|
||||
file.refs = documents.map((document) => document.id_ as string);
|
||||
return file;
|
||||
}
|
||||
|
||||
export async function storeFile(
|
||||
filename: string,
|
||||
name: string,
|
||||
fileBuffer: Buffer,
|
||||
mimeType: string,
|
||||
) {
|
||||
@@ -42,15 +36,17 @@ export async function storeFile(
|
||||
if (!fileExt) throw new Error(`Unsupported document type: ${mimeType}`);
|
||||
|
||||
const fileId = crypto.randomUUID();
|
||||
const newFilename = `${fileId}_${sanitizeFileName(filename)}`;
|
||||
const newFilename = `${sanitizeFileName(name)}_${fileId}.${fileExt}`;
|
||||
const filepath = path.join(UPLOADED_FOLDER, newFilename);
|
||||
const fileUrl = await saveDocument(filepath, fileBuffer);
|
||||
return {
|
||||
id: fileId,
|
||||
name: newFilename,
|
||||
size: fileBuffer.length,
|
||||
type: fileExt,
|
||||
url: fileUrl,
|
||||
refs: [] as string[],
|
||||
} as FileMetadata;
|
||||
} as DocumentFile;
|
||||
}
|
||||
|
||||
export async function parseFile(
|
||||
@@ -104,5 +100,6 @@ export async function saveDocument(filepath: string, content: string | Buffer) {
|
||||
}
|
||||
|
||||
function sanitizeFileName(fileName: string) {
|
||||
return fileName.replace(/[^a-zA-Z0-9_.-]/g, "_");
|
||||
// Remove file extension and sanitize
|
||||
return fileName.split(".")[0].replace(/[^a-zA-Z0-9_-]/g, "_");
|
||||
}
|
||||
|
||||
@@ -3,6 +3,7 @@ import {
|
||||
IngestionPipeline,
|
||||
Settings,
|
||||
SimpleNodeParser,
|
||||
storageContextFromDefaults,
|
||||
VectorStoreIndex,
|
||||
} from "llamaindex";
|
||||
|
||||
@@ -28,11 +29,20 @@ export async function runPipeline(
|
||||
return documents.map((document) => document.id_);
|
||||
} else {
|
||||
// Initialize a new index with the documents
|
||||
const newIndex = await VectorStoreIndex.fromDocuments(documents);
|
||||
newIndex.storageContext.docStore.persist();
|
||||
console.log(
|
||||
"Got empty index, created new index with the uploaded documents",
|
||||
);
|
||||
const persistDir = process.env.STORAGE_CACHE_DIR;
|
||||
if (!persistDir) {
|
||||
throw new Error("STORAGE_CACHE_DIR environment variable is required!");
|
||||
}
|
||||
const storageContext = await storageContextFromDefaults({
|
||||
persistDir,
|
||||
});
|
||||
const newIndex = await VectorStoreIndex.fromDocuments(documents, {
|
||||
storageContext,
|
||||
});
|
||||
await newIndex.storageContext.docStore.persist();
|
||||
return documents.map((document) => document.id_);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,41 +1,39 @@
|
||||
import { Document, LLamaCloudFileService, VectorStoreIndex } from "llamaindex";
|
||||
import { LlamaCloudIndex } from "llamaindex/cloud/LlamaCloudIndex";
|
||||
import fs from "node:fs/promises";
|
||||
import path from "node:path";
|
||||
import { FileMetadata, parseFile, storeFile } from "./helper";
|
||||
import { DocumentFile } from "../streaming/annotations";
|
||||
import { parseFile, storeFile } from "./helper";
|
||||
import { runPipeline } from "./pipeline";
|
||||
|
||||
export async function uploadDocument(
|
||||
index: VectorStoreIndex | LlamaCloudIndex | null,
|
||||
filename: string,
|
||||
name: string,
|
||||
raw: string,
|
||||
): Promise<FileMetadata> {
|
||||
): Promise<DocumentFile> {
|
||||
const [header, content] = raw.split(",");
|
||||
const mimeType = header.replace("data:", "").replace(";base64", "");
|
||||
const fileBuffer = Buffer.from(content, "base64");
|
||||
|
||||
// Store file
|
||||
const fileMetadata = await storeFile(filename, fileBuffer, mimeType);
|
||||
const fileMetadata = await storeFile(name, fileBuffer, mimeType);
|
||||
|
||||
// If the file is csv and has codeExecutorTool, we don't need to index the file.
|
||||
if (mimeType === "text/csv" && (await hasCodeExecutorTool())) {
|
||||
// Do not index csv files
|
||||
if (mimeType === "text/csv") {
|
||||
return fileMetadata;
|
||||
}
|
||||
|
||||
let documentIds: string[] = [];
|
||||
if (index instanceof LlamaCloudIndex) {
|
||||
// trigger LlamaCloudIndex API to upload the file and run the pipeline
|
||||
const projectId = await index.getProjectId();
|
||||
const pipelineId = await index.getPipelineId();
|
||||
try {
|
||||
const documentId = await LLamaCloudFileService.addFileToPipeline(
|
||||
projectId,
|
||||
pipelineId,
|
||||
new File([fileBuffer], filename, { type: mimeType }),
|
||||
{ private: "true" },
|
||||
);
|
||||
// Update file metadata with document IDs
|
||||
fileMetadata.refs = [documentId];
|
||||
return fileMetadata;
|
||||
documentIds = [
|
||||
await LLamaCloudFileService.addFileToPipeline(
|
||||
projectId,
|
||||
pipelineId,
|
||||
new File([fileBuffer], name, { type: mimeType }),
|
||||
{ private: "true" },
|
||||
),
|
||||
];
|
||||
} catch (error) {
|
||||
if (
|
||||
error instanceof ReferenceError &&
|
||||
@@ -47,24 +45,17 @@ export async function uploadDocument(
|
||||
}
|
||||
throw error;
|
||||
}
|
||||
} else {
|
||||
// run the pipeline for other vector store indexes
|
||||
const documents: Document[] = await parseFile(
|
||||
fileBuffer,
|
||||
fileMetadata.name,
|
||||
mimeType,
|
||||
);
|
||||
documentIds = await runPipeline(index, documents);
|
||||
}
|
||||
|
||||
// run the pipeline for other vector store indexes
|
||||
const documents: Document[] = await parseFile(fileBuffer, filename, mimeType);
|
||||
// Update file metadata with document IDs
|
||||
fileMetadata.refs = documents.map((document) => document.id_ as string);
|
||||
// Run the pipeline
|
||||
await runPipeline(index, documents);
|
||||
fileMetadata.refs = documentIds;
|
||||
return fileMetadata;
|
||||
}
|
||||
|
||||
const hasCodeExecutorTool = async () => {
|
||||
const codeExecutorTools = ["interpreter", "artifact"];
|
||||
|
||||
const configFile = path.join("config", "tools.json");
|
||||
const toolConfig = JSON.parse(await fs.readFile(configFile, "utf8"));
|
||||
|
||||
const localTools = toolConfig.local || {};
|
||||
// Check if local tools contains codeExecutorTools
|
||||
return codeExecutorTools.some((tool) => localTools[tool] !== undefined);
|
||||
};
|
||||
|
||||
@@ -1,19 +1,21 @@
|
||||
import { JSONValue, Message } from "ai";
|
||||
import { MessageContent, MessageContentDetail } from "llamaindex";
|
||||
import {
|
||||
ChatMessage,
|
||||
MessageContent,
|
||||
MessageContentDetail,
|
||||
MessageType,
|
||||
} from "llamaindex";
|
||||
import { UPLOADED_FOLDER } from "../documents/helper";
|
||||
|
||||
export type DocumentFileType = "csv" | "pdf" | "txt" | "docx";
|
||||
|
||||
export type UploadedFileMeta = {
|
||||
export type DocumentFile = {
|
||||
id: string;
|
||||
name: string;
|
||||
url?: string;
|
||||
refs?: string[];
|
||||
};
|
||||
|
||||
export type DocumentFile = {
|
||||
type: DocumentFileType;
|
||||
size: number;
|
||||
type: string;
|
||||
url: string;
|
||||
metadata: UploadedFileMeta;
|
||||
refs?: string[];
|
||||
};
|
||||
|
||||
type Annotation = {
|
||||
@@ -30,7 +32,7 @@ export function isValidMessages(messages: Message[]): boolean {
|
||||
export function retrieveDocumentIds(messages: Message[]): string[] {
|
||||
// retrieve document Ids from the annotations of all messages (if any)
|
||||
const documentFiles = retrieveDocumentFiles(messages);
|
||||
return documentFiles.map((file) => file.metadata?.refs || []).flat();
|
||||
return documentFiles.map((file) => file.refs || []).flat();
|
||||
}
|
||||
|
||||
export function retrieveDocumentFiles(messages: Message[]): DocumentFile[] {
|
||||
@@ -62,17 +64,55 @@ export function retrieveMessageContent(messages: Message[]): MessageContent {
|
||||
];
|
||||
}
|
||||
|
||||
export function convertToChatHistory(messages: Message[]): ChatMessage[] {
|
||||
if (!messages || !Array.isArray(messages)) {
|
||||
return [];
|
||||
}
|
||||
const agentHistory = retrieveAgentHistoryMessage(messages);
|
||||
if (agentHistory) {
|
||||
const previousMessages = messages.slice(0, -1);
|
||||
return [...previousMessages, agentHistory].map((msg) => ({
|
||||
role: msg.role as MessageType,
|
||||
content: msg.content,
|
||||
}));
|
||||
}
|
||||
return messages.map((msg) => ({
|
||||
role: msg.role as MessageType,
|
||||
content: msg.content,
|
||||
}));
|
||||
}
|
||||
|
||||
function retrieveAgentHistoryMessage(
|
||||
messages: Message[],
|
||||
maxAgentMessages = 10,
|
||||
): ChatMessage | null {
|
||||
const agentAnnotations = getAnnotations<{ agent: string; text: string }>(
|
||||
messages,
|
||||
{ role: "assistant", type: "agent" },
|
||||
).slice(-maxAgentMessages);
|
||||
|
||||
if (agentAnnotations.length > 0) {
|
||||
const messageContent =
|
||||
"Here is the previous conversation of agents:\n" +
|
||||
agentAnnotations.map((annotation) => annotation.data.text).join("\n");
|
||||
return {
|
||||
role: "assistant",
|
||||
content: messageContent,
|
||||
};
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function getFileContent(file: DocumentFile): string {
|
||||
const fileMetadata = file.metadata;
|
||||
let defaultContent = `=====File: ${fileMetadata.name}=====\n`;
|
||||
let defaultContent = `=====File: ${file.name}=====\n`;
|
||||
// Include file URL if it's available
|
||||
const urlPrefix = process.env.FILESERVER_URL_PREFIX;
|
||||
let urlContent = "";
|
||||
if (urlPrefix) {
|
||||
if (fileMetadata.url) {
|
||||
urlContent = `File URL: ${fileMetadata.url}\n`;
|
||||
if (file.url) {
|
||||
urlContent = `File URL: ${file.url}\n`;
|
||||
} else {
|
||||
urlContent = `File URL (instruction: do not update this file URL yourself): ${urlPrefix}/output/uploaded/${fileMetadata.name}\n`;
|
||||
urlContent = `File URL (instruction: do not update this file URL yourself): ${urlPrefix}/output/uploaded/${file.name}\n`;
|
||||
}
|
||||
} else {
|
||||
console.warn(
|
||||
@@ -82,13 +122,17 @@ function getFileContent(file: DocumentFile): string {
|
||||
defaultContent += urlContent;
|
||||
|
||||
// Include document IDs if it's available
|
||||
if (fileMetadata.refs) {
|
||||
defaultContent += `Document IDs: ${fileMetadata.refs}\n`;
|
||||
if (file.refs) {
|
||||
defaultContent += `Document IDs: ${file.refs}\n`;
|
||||
}
|
||||
// Include sandbox file paths
|
||||
const sandboxFilePath = `/tmp/${fileMetadata.name}`;
|
||||
const sandboxFilePath = `/tmp/${file.name}`;
|
||||
defaultContent += `Sandbox file path (instruction: only use sandbox path for artifact or code interpreter tool): ${sandboxFilePath}\n`;
|
||||
|
||||
// Include local file path
|
||||
const localFilePath = `${UPLOADED_FOLDER}/${file.name}`;
|
||||
defaultContent += `Local file path (instruction: use for local tool that requires a local path): ${localFilePath}\n`;
|
||||
|
||||
return defaultContent;
|
||||
}
|
||||
|
||||
@@ -132,13 +176,10 @@ function retrieveLatestArtifact(messages: Message[]): MessageContentDetail[] {
|
||||
}
|
||||
|
||||
function convertAnnotations(messages: Message[]): MessageContentDetail[] {
|
||||
// annotations from the last user message that has annotations
|
||||
const annotations: Annotation[] =
|
||||
messages
|
||||
.slice()
|
||||
.reverse()
|
||||
.find((message) => message.role === "user" && message.annotations)
|
||||
?.annotations?.map(getValidAnnotation) || [];
|
||||
// get all annotations from user messages
|
||||
const annotations: Annotation[] = messages
|
||||
.filter((message) => message.role === "user" && message.annotations)
|
||||
.flatMap((message) => message.annotations?.map(getValidAnnotation) || []);
|
||||
if (annotations.length === 0) return [];
|
||||
|
||||
const content: MessageContentDetail[] = [];
|
||||
|
||||
@@ -11,19 +11,23 @@ export const dynamic = "force-dynamic";
|
||||
export async function POST(request: NextRequest) {
|
||||
try {
|
||||
const {
|
||||
filename,
|
||||
name,
|
||||
base64,
|
||||
params,
|
||||
}: { filename: string; base64: string; params?: any } =
|
||||
await request.json();
|
||||
if (!base64 || !filename) {
|
||||
}: {
|
||||
name: string;
|
||||
base64: string;
|
||||
params?: any;
|
||||
} = await request.json();
|
||||
if (!base64 || !name) {
|
||||
return NextResponse.json(
|
||||
{ error: "base64 and filename is required in the request body" },
|
||||
{ error: "base64 and name is required in the request body" },
|
||||
{ status: 400 },
|
||||
);
|
||||
}
|
||||
const index = await getDataSource(params);
|
||||
return NextResponse.json(await uploadDocument(index, filename, base64));
|
||||
const documentFile = await uploadDocument(index, name, base64);
|
||||
return NextResponse.json(documentFile);
|
||||
} catch (error) {
|
||||
console.error("[Upload API]", error);
|
||||
return NextResponse.json(
|
||||
|
||||
@@ -9,9 +9,9 @@ import { DATA_DIR } from "../../chat/engine/loader";
|
||||
*/
|
||||
export async function GET(
|
||||
_request: NextRequest,
|
||||
{ params }: { params: { slug: string[] } },
|
||||
{ params }: { params: Promise<{ slug: string[] }> },
|
||||
) {
|
||||
const slug = params.slug;
|
||||
const slug = (await params).slug;
|
||||
|
||||
if (!slug) {
|
||||
return NextResponse.json({ detail: "Missing file slug" }, { status: 400 });
|
||||
@@ -21,7 +21,7 @@ export async function GET(
|
||||
return NextResponse.json({ detail: "Invalid file path" }, { status: 400 });
|
||||
}
|
||||
|
||||
const [folder, ...pathTofile] = params.slug; // data, file.pdf
|
||||
const [folder, ...pathTofile] = slug; // data, file.pdf
|
||||
const allowedFolders = ["data", "output"];
|
||||
|
||||
if (!allowedFolders.includes(folder)) {
|
||||
|
||||
@@ -1,57 +1,27 @@
|
||||
"use client";
|
||||
|
||||
import { ChatSection as ChatSectionUI } from "@llamaindex/chat-ui";
|
||||
import "@llamaindex/chat-ui/styles/code.css";
|
||||
import "@llamaindex/chat-ui/styles/katex.css";
|
||||
import "@llamaindex/chat-ui/styles/pdf.css";
|
||||
import { useChat } from "ai/react";
|
||||
import { useState } from "react";
|
||||
import { ChatInput, ChatMessages } from "./ui/chat";
|
||||
import CustomChatInput from "./ui/chat/chat-input";
|
||||
import CustomChatMessages from "./ui/chat/chat-messages";
|
||||
import { useClientConfig } from "./ui/chat/hooks/use-config";
|
||||
|
||||
export default function ChatSection() {
|
||||
const { backend } = useClientConfig();
|
||||
const [requestData, setRequestData] = useState<any>();
|
||||
const {
|
||||
messages,
|
||||
input,
|
||||
isLoading,
|
||||
handleSubmit,
|
||||
handleInputChange,
|
||||
reload,
|
||||
stop,
|
||||
append,
|
||||
setInput,
|
||||
} = useChat({
|
||||
body: { data: requestData },
|
||||
const handler = useChat({
|
||||
api: `${backend}/api/chat`,
|
||||
headers: {
|
||||
"Content-Type": "application/json", // using JSON because of vercel/ai 2.2.26
|
||||
},
|
||||
onError: (error: unknown) => {
|
||||
if (!(error instanceof Error)) throw error;
|
||||
const message = JSON.parse(error.message);
|
||||
alert(message.detail);
|
||||
alert(JSON.parse(error.message).detail);
|
||||
},
|
||||
sendExtraMessageFields: true,
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="space-y-4 w-full h-full flex flex-col">
|
||||
<ChatMessages
|
||||
messages={messages}
|
||||
isLoading={isLoading}
|
||||
reload={reload}
|
||||
stop={stop}
|
||||
append={append}
|
||||
/>
|
||||
<ChatInput
|
||||
input={input}
|
||||
handleSubmit={handleSubmit}
|
||||
handleInputChange={handleInputChange}
|
||||
isLoading={isLoading}
|
||||
messages={messages}
|
||||
append={append}
|
||||
setInput={setInput}
|
||||
requestParams={{ params: requestData }}
|
||||
setRequestData={setRequestData}
|
||||
/>
|
||||
</div>
|
||||
<ChatSectionUI handler={handler} className="w-full h-full">
|
||||
<CustomChatMessages />
|
||||
<CustomChatInput />
|
||||
</ChatSectionUI>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
Using the chat component from https://github.com/marcusschiesser/ui (based on https://ui.shadcn.com/)
|
||||
@@ -1,28 +0,0 @@
|
||||
import { PauseCircle, RefreshCw } from "lucide-react";
|
||||
|
||||
import { Button } from "../button";
|
||||
import { ChatHandler } from "./chat.interface";
|
||||
|
||||
export default function ChatActions(
|
||||
props: Pick<ChatHandler, "stop" | "reload"> & {
|
||||
showReload?: boolean;
|
||||
showStop?: boolean;
|
||||
},
|
||||
) {
|
||||
return (
|
||||
<div className="space-x-4">
|
||||
{props.showStop && (
|
||||
<Button variant="outline" size="sm" onClick={props.stop}>
|
||||
<PauseCircle className="mr-2 h-4 w-4" />
|
||||
Stop generating
|
||||
</Button>
|
||||
)}
|
||||
{props.showReload && (
|
||||
<Button variant="outline" size="sm" onClick={props.reload}>
|
||||
<RefreshCw className="mr-2 h-4 w-4" />
|
||||
Regenerate
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
+4
-2
@@ -1,8 +1,10 @@
|
||||
import { useChatMessage } from "@llamaindex/chat-ui";
|
||||
import { User2 } from "lucide-react";
|
||||
import Image from "next/image";
|
||||
|
||||
export default function ChatAvatar({ role }: { role: string }) {
|
||||
if (role === "user") {
|
||||
export function ChatMessageAvatar() {
|
||||
const { message } = useChatMessage();
|
||||
if (message.role === "user") {
|
||||
return (
|
||||
<div className="flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border bg-background shadow">
|
||||
<User2 className="h-4 w-4" />
|
||||
@@ -1,33 +1,13 @@
|
||||
import { JSONValue } from "ai";
|
||||
import React from "react";
|
||||
import { Button } from "../button";
|
||||
import { DocumentPreview } from "../document-preview";
|
||||
import FileUploader from "../file-uploader";
|
||||
import { Textarea } from "../textarea";
|
||||
import UploadImagePreview from "../upload-image-preview";
|
||||
import { ChatHandler } from "./chat.interface";
|
||||
import { useFile } from "./hooks/use-file";
|
||||
import { LlamaCloudSelector } from "./widgets/LlamaCloudSelector";
|
||||
"use client";
|
||||
|
||||
const ALLOWED_EXTENSIONS = ["png", "jpg", "jpeg", "csv", "pdf", "txt", "docx"];
|
||||
import { ChatInput, useChatUI, useFile } from "@llamaindex/chat-ui";
|
||||
import { DocumentInfo, ImagePreview } from "@llamaindex/chat-ui/widgets";
|
||||
import { LlamaCloudSelector } from "./custom/llama-cloud-selector";
|
||||
import { useClientConfig } from "./hooks/use-config";
|
||||
|
||||
export default function ChatInput(
|
||||
props: Pick<
|
||||
ChatHandler,
|
||||
| "isLoading"
|
||||
| "input"
|
||||
| "onFileUpload"
|
||||
| "onFileError"
|
||||
| "handleSubmit"
|
||||
| "handleInputChange"
|
||||
| "messages"
|
||||
| "setInput"
|
||||
| "append"
|
||||
> & {
|
||||
requestParams?: any;
|
||||
setRequestData?: React.Dispatch<any>;
|
||||
},
|
||||
) {
|
||||
export default function CustomChatInput() {
|
||||
const { requestData, isLoading, input } = useChatUI();
|
||||
const { backend } = useClientConfig();
|
||||
const {
|
||||
imageUrl,
|
||||
setImageUrl,
|
||||
@@ -36,101 +16,66 @@ export default function ChatInput(
|
||||
removeDoc,
|
||||
reset,
|
||||
getAnnotations,
|
||||
} = useFile();
|
||||
|
||||
// default submit function does not handle including annotations in the message
|
||||
// so we need to use append function to submit new message with annotations
|
||||
const handleSubmitWithAnnotations = (
|
||||
e: React.FormEvent<HTMLFormElement>,
|
||||
annotations: JSONValue[] | undefined,
|
||||
) => {
|
||||
e.preventDefault();
|
||||
props.append!({
|
||||
content: props.input,
|
||||
role: "user",
|
||||
createdAt: new Date(),
|
||||
annotations,
|
||||
});
|
||||
props.setInput!("");
|
||||
};
|
||||
|
||||
const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
const annotations = getAnnotations();
|
||||
if (annotations.length) {
|
||||
handleSubmitWithAnnotations(e, annotations);
|
||||
return reset();
|
||||
}
|
||||
props.handleSubmit(e);
|
||||
};
|
||||
} = useFile({ uploadAPI: `${backend}/api/chat/upload` });
|
||||
|
||||
/**
|
||||
* Handles file uploads. Overwrite to hook into the file upload behavior.
|
||||
* @param file The file to upload
|
||||
*/
|
||||
const handleUploadFile = async (file: File) => {
|
||||
if (imageUrl || files.length > 0) {
|
||||
alert("You can only upload one file at a time.");
|
||||
// There's already an image uploaded, only allow one image at a time
|
||||
if (imageUrl) {
|
||||
alert("You can only upload one image at a time.");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await uploadFile(file, props.requestParams);
|
||||
props.onFileUpload?.(file);
|
||||
// Upload the file and send with it the current request data
|
||||
await uploadFile(file, requestData);
|
||||
} catch (error: any) {
|
||||
const onFileUploadError = props.onFileError || window.alert;
|
||||
onFileUploadError(error.message);
|
||||
// Show error message if upload fails
|
||||
alert(error.message);
|
||||
}
|
||||
};
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
|
||||
if (e.key === "Enter" && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
onSubmit(e as unknown as React.FormEvent<HTMLFormElement>);
|
||||
}
|
||||
};
|
||||
// Get references to the upload files in message annotations format, see https://github.com/run-llama/chat-ui/blob/main/packages/chat-ui/src/hook/use-file.tsx#L56
|
||||
const annotations = getAnnotations();
|
||||
|
||||
return (
|
||||
<form
|
||||
onSubmit={onSubmit}
|
||||
className="rounded-xl bg-white p-4 shadow-xl space-y-4 shrink-0"
|
||||
<ChatInput
|
||||
className="shadow-xl rounded-xl"
|
||||
resetUploadedFiles={reset}
|
||||
annotations={annotations}
|
||||
>
|
||||
{imageUrl && (
|
||||
<UploadImagePreview url={imageUrl} onRemove={() => setImageUrl(null)} />
|
||||
)}
|
||||
{files.length > 0 && (
|
||||
<div className="flex gap-4 w-full overflow-auto py-2">
|
||||
{files.map((file, index) => (
|
||||
<DocumentPreview
|
||||
key={file.metadata?.id ?? `${file.filename}-${index}`}
|
||||
file={file}
|
||||
onRemove={() => removeDoc(file)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex w-full items-start justify-between gap-4 ">
|
||||
<Textarea
|
||||
id="chat-input"
|
||||
autoFocus
|
||||
name="message"
|
||||
placeholder="Type a message"
|
||||
className="flex-1 min-h-0 h-[40px]"
|
||||
value={props.input}
|
||||
onChange={props.handleInputChange}
|
||||
onKeyDown={handleKeyDown}
|
||||
/>
|
||||
<FileUploader
|
||||
onFileUpload={handleUploadFile}
|
||||
onFileError={props.onFileError}
|
||||
config={{
|
||||
allowedExtensions: ALLOWED_EXTENSIONS,
|
||||
disabled: props.isLoading,
|
||||
}}
|
||||
/>
|
||||
{process.env.NEXT_PUBLIC_USE_LLAMACLOUD === "true" &&
|
||||
props.setRequestData && (
|
||||
<LlamaCloudSelector setRequestData={props.setRequestData} />
|
||||
)}
|
||||
<Button type="submit" disabled={props.isLoading || !props.input.trim()}>
|
||||
Send message
|
||||
</Button>
|
||||
<div>
|
||||
{/* Image preview section */}
|
||||
{imageUrl && (
|
||||
<ImagePreview url={imageUrl} onRemove={() => setImageUrl(null)} />
|
||||
)}
|
||||
{/* Document previews section */}
|
||||
{files.length > 0 && (
|
||||
<div className="flex gap-4 w-full overflow-auto py-2">
|
||||
{files.map((file) => (
|
||||
<DocumentInfo
|
||||
key={file.id}
|
||||
document={{ url: file.url, sources: [] }}
|
||||
className="mb-2 mt-2"
|
||||
onRemove={() => removeDoc(file)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
<ChatInput.Form>
|
||||
<ChatInput.Field />
|
||||
<ChatInput.Upload onUpload={handleUploadFile} />
|
||||
<LlamaCloudSelector />
|
||||
<ChatInput.Submit
|
||||
disabled={
|
||||
isLoading || (!input.trim() && files.length === 0 && !imageUrl)
|
||||
}
|
||||
/>
|
||||
</ChatInput.Form>
|
||||
</ChatInput>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,38 @@
|
||||
import {
|
||||
ChatMessage,
|
||||
ContentPosition,
|
||||
getSourceAnnotationData,
|
||||
useChatMessage,
|
||||
useChatUI,
|
||||
} from "@llamaindex/chat-ui";
|
||||
import { Markdown } from "./custom/markdown";
|
||||
import { ToolAnnotations } from "./tools/chat-tools";
|
||||
|
||||
export function ChatMessageContent() {
|
||||
const { isLoading, append } = useChatUI();
|
||||
const { message } = useChatMessage();
|
||||
const customContent = [
|
||||
{
|
||||
// override the default markdown component
|
||||
position: ContentPosition.MARKDOWN,
|
||||
component: (
|
||||
<Markdown
|
||||
content={message.content}
|
||||
sources={getSourceAnnotationData(message.annotations)?.[0]}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
// add the tool annotations after events
|
||||
position: ContentPosition.AFTER_EVENTS,
|
||||
component: <ToolAnnotations message={message} />,
|
||||
},
|
||||
];
|
||||
return (
|
||||
<ChatMessage.Content
|
||||
content={customContent}
|
||||
isLoading={isLoading}
|
||||
append={append}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -1,153 +0,0 @@
|
||||
import { icons, LucideIcon } from "lucide-react";
|
||||
import { useMemo } from "react";
|
||||
import { Button } from "../../button";
|
||||
import {
|
||||
Drawer,
|
||||
DrawerClose,
|
||||
DrawerContent,
|
||||
DrawerHeader,
|
||||
DrawerTitle,
|
||||
DrawerTrigger,
|
||||
} from "../../drawer";
|
||||
import { AgentEventData } from "../index";
|
||||
import Markdown from "./markdown";
|
||||
|
||||
const AgentIcons: Record<string, LucideIcon> = {
|
||||
bot: icons.Bot,
|
||||
researcher: icons.ScanSearch,
|
||||
writer: icons.PenLine,
|
||||
reviewer: icons.MessageCircle,
|
||||
publisher: icons.BookCheck,
|
||||
};
|
||||
|
||||
type MergedEvent = {
|
||||
agent: string;
|
||||
texts: string[];
|
||||
icon: LucideIcon;
|
||||
};
|
||||
|
||||
export function ChatAgentEvents({
|
||||
data,
|
||||
isFinished,
|
||||
}: {
|
||||
data: AgentEventData[];
|
||||
isFinished: boolean;
|
||||
}) {
|
||||
const events = useMemo(() => mergeAdjacentEvents(data), [data]);
|
||||
return (
|
||||
<div className="pl-2">
|
||||
<div className="text-sm space-y-4">
|
||||
{events.map((eventItem, index) => (
|
||||
<AgentEventContent
|
||||
key={index}
|
||||
event={eventItem}
|
||||
isLast={index === events.length - 1}
|
||||
isFinished={isFinished}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const MAX_TEXT_LENGTH = 150;
|
||||
|
||||
function AgentEventContent({
|
||||
event,
|
||||
isLast,
|
||||
isFinished,
|
||||
}: {
|
||||
event: MergedEvent;
|
||||
isLast: boolean;
|
||||
isFinished: boolean;
|
||||
}) {
|
||||
const { agent, texts } = event;
|
||||
const AgentIcon = event.icon;
|
||||
return (
|
||||
<div className="flex gap-4 border-b pb-4 items-center fadein-agent">
|
||||
<div className="w-[100px] flex flex-col items-center gap-2">
|
||||
<div className="relative">
|
||||
{isLast && !isFinished && (
|
||||
<div className="absolute -top-0 -right-4">
|
||||
<span className="relative flex h-3 w-3">
|
||||
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-sky-400 opacity-75"></span>
|
||||
<span className="relative inline-flex rounded-full h-3 w-3 bg-sky-500"></span>
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<AgentIcon />
|
||||
</div>
|
||||
<span className="font-bold">{agent}</span>
|
||||
</div>
|
||||
<ul className="flex-1 list-decimal space-y-2">
|
||||
{texts.map((text, index) => (
|
||||
<li className="whitespace-break-spaces" key={index}>
|
||||
{text.length <= MAX_TEXT_LENGTH && <span>{text}</span>}
|
||||
{text.length > MAX_TEXT_LENGTH && (
|
||||
<div>
|
||||
<span>{text.slice(0, MAX_TEXT_LENGTH)}...</span>
|
||||
<AgentEventDialog
|
||||
content={text}
|
||||
title={`Agent "${agent}" - Step: ${index + 1}`}
|
||||
>
|
||||
<span className="font-semibold underline cursor-pointer ml-2">
|
||||
Show more
|
||||
</span>
|
||||
</AgentEventDialog>
|
||||
</div>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
type AgentEventDialogProps = {
|
||||
title: string;
|
||||
content: string;
|
||||
children: React.ReactNode;
|
||||
};
|
||||
|
||||
function AgentEventDialog(props: AgentEventDialogProps) {
|
||||
return (
|
||||
<Drawer direction="left">
|
||||
<DrawerTrigger asChild>{props.children}</DrawerTrigger>
|
||||
<DrawerContent className="w-3/5 mt-24 h-full max-h-[96%] ">
|
||||
<DrawerHeader className="flex justify-between">
|
||||
<div className="space-y-2">
|
||||
<DrawerTitle>{props.title}</DrawerTitle>
|
||||
</div>
|
||||
<DrawerClose asChild>
|
||||
<Button variant="outline">Close</Button>
|
||||
</DrawerClose>
|
||||
</DrawerHeader>
|
||||
<div className="m-4 overflow-auto">
|
||||
<Markdown content={props.content} />
|
||||
</div>
|
||||
</DrawerContent>
|
||||
</Drawer>
|
||||
);
|
||||
}
|
||||
|
||||
function mergeAdjacentEvents(events: AgentEventData[]): MergedEvent[] {
|
||||
const mergedEvents: MergedEvent[] = [];
|
||||
|
||||
for (const event of events) {
|
||||
const lastMergedEvent = mergedEvents[mergedEvents.length - 1];
|
||||
|
||||
if (lastMergedEvent && lastMergedEvent.agent === event.agent) {
|
||||
// If the last event in mergedEvents has the same non-null agent, add the title to it
|
||||
lastMergedEvent.texts.push(event.text);
|
||||
} else {
|
||||
// Otherwise, create a new merged event
|
||||
mergedEvents.push({
|
||||
agent: event.agent,
|
||||
texts: [event.text],
|
||||
icon: AgentIcons[event.agent] ?? icons.Bot,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return mergedEvents;
|
||||
}
|
||||
@@ -1,50 +0,0 @@
|
||||
import { ChevronDown, ChevronRight, Loader2 } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { Button } from "../../button";
|
||||
import {
|
||||
Collapsible,
|
||||
CollapsibleContent,
|
||||
CollapsibleTrigger,
|
||||
} from "../../collapsible";
|
||||
import { EventData } from "../index";
|
||||
|
||||
export function ChatEvents({
|
||||
data,
|
||||
isLoading,
|
||||
}: {
|
||||
data: EventData[];
|
||||
isLoading: boolean;
|
||||
}) {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
const buttonLabel = isOpen ? "Hide events" : "Show events";
|
||||
|
||||
const EventIcon = isOpen ? (
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
) : (
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="border-l-2 border-indigo-400 pl-2">
|
||||
<Collapsible open={isOpen} onOpenChange={setIsOpen}>
|
||||
<CollapsibleTrigger asChild>
|
||||
<Button variant="secondary" className="space-x-2">
|
||||
{isLoading ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
|
||||
<span>{buttonLabel}</span>
|
||||
{EventIcon}
|
||||
</Button>
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent asChild>
|
||||
<div className="mt-4 text-sm space-y-2">
|
||||
{data.map((eventItem, index) => (
|
||||
<div className="whitespace-break-spaces" key={index}>
|
||||
{eventItem.title}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
import { DocumentPreview } from "../../document-preview";
|
||||
import { DocumentFileData } from "../index";
|
||||
|
||||
export function ChatFiles({ data }: { data: DocumentFileData }) {
|
||||
if (!data.files.length) return null;
|
||||
return (
|
||||
<div className="flex gap-2 items-center">
|
||||
{data.files.map((file, index) => (
|
||||
<DocumentPreview
|
||||
key={file.metadata?.id ?? `${file.filename}-${index}`}
|
||||
file={file}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
import Image from "next/image";
|
||||
import { type ImageData } from "../index";
|
||||
|
||||
export function ChatImage({ data }: { data: ImageData }) {
|
||||
return (
|
||||
<div className="rounded-md max-w-[200px] shadow-md">
|
||||
<Image
|
||||
src={data.url}
|
||||
width={0}
|
||||
height={0}
|
||||
sizes="100vw"
|
||||
style={{ width: "100%", height: "auto" }}
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,173 +0,0 @@
|
||||
import { Check, Copy } from "lucide-react";
|
||||
import { useMemo } from "react";
|
||||
import { Button } from "../../button";
|
||||
import { PreviewCard } from "../../document-preview";
|
||||
import {
|
||||
HoverCard,
|
||||
HoverCardContent,
|
||||
HoverCardTrigger,
|
||||
} from "../../hover-card";
|
||||
import { cn } from "../../lib/utils";
|
||||
import { useCopyToClipboard } from "../hooks/use-copy-to-clipboard";
|
||||
import { DocumentFileType, SourceData, SourceNode } from "../index";
|
||||
import PdfDialog from "../widgets/PdfDialog";
|
||||
|
||||
type Document = {
|
||||
url: string;
|
||||
sources: SourceNode[];
|
||||
};
|
||||
|
||||
export function ChatSources({ data }: { data: SourceData }) {
|
||||
const documents: Document[] = useMemo(() => {
|
||||
// group nodes by document (a document must have a URL)
|
||||
const nodesByUrl: Record<string, SourceNode[]> = {};
|
||||
data.nodes.forEach((node) => {
|
||||
const key = node.url;
|
||||
nodesByUrl[key] ??= [];
|
||||
nodesByUrl[key].push(node);
|
||||
});
|
||||
|
||||
// convert to array of documents
|
||||
return Object.entries(nodesByUrl).map(([url, sources]) => ({
|
||||
url,
|
||||
sources,
|
||||
}));
|
||||
}, [data.nodes]);
|
||||
|
||||
if (documents.length === 0) return null;
|
||||
|
||||
return (
|
||||
<div className="space-y-2 text-sm">
|
||||
<div className="font-semibold text-lg">Sources:</div>
|
||||
<div className="flex gap-3 flex-wrap">
|
||||
{documents.map((document) => {
|
||||
return <DocumentInfo key={document.url} document={document} />;
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SourceInfo({ node, index }: { node?: SourceNode; index: number }) {
|
||||
if (!node) return <SourceNumberButton index={index} />;
|
||||
return (
|
||||
<HoverCard>
|
||||
<HoverCardTrigger
|
||||
className="cursor-default"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
<SourceNumberButton
|
||||
index={index}
|
||||
className="hover:text-white hover:bg-primary"
|
||||
/>
|
||||
</HoverCardTrigger>
|
||||
<HoverCardContent className="w-[400px]">
|
||||
<NodeInfo nodeInfo={node} />
|
||||
</HoverCardContent>
|
||||
</HoverCard>
|
||||
);
|
||||
}
|
||||
|
||||
export function SourceNumberButton({
|
||||
index,
|
||||
className,
|
||||
}: {
|
||||
index: number;
|
||||
className?: string;
|
||||
}) {
|
||||
return (
|
||||
<span
|
||||
className={cn(
|
||||
"text-xs w-5 h-5 rounded-full bg-gray-100 inline-flex items-center justify-center",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
{index + 1}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
export function DocumentInfo({
|
||||
document,
|
||||
className,
|
||||
}: {
|
||||
document: Document;
|
||||
className?: string;
|
||||
}) {
|
||||
const { url, sources } = document;
|
||||
// Extract filename from URL
|
||||
const urlParts = url.split("/");
|
||||
const fileName = urlParts.length > 0 ? urlParts[urlParts.length - 1] : url;
|
||||
const fileExt = fileName?.split(".").pop() as DocumentFileType | undefined;
|
||||
|
||||
const previewFile = {
|
||||
filename: fileName,
|
||||
filetype: fileExt,
|
||||
};
|
||||
|
||||
const DocumentDetail = (
|
||||
<div className={`relative ${className}`}>
|
||||
<PreviewCard className={"cursor-pointer"} file={previewFile} />
|
||||
<div className="absolute bottom-2 right-2 space-x-2 flex">
|
||||
{sources.map((node: SourceNode, index: number) => (
|
||||
<div key={node.id}>
|
||||
<SourceInfo node={node} index={index} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
if (url.endsWith(".pdf")) {
|
||||
// open internal pdf dialog for pdf files when click document card
|
||||
return <PdfDialog documentId={url} url={url} trigger={DocumentDetail} />;
|
||||
}
|
||||
// open external link when click document card for other file types
|
||||
return <div onClick={() => window.open(url, "_blank")}>{DocumentDetail}</div>;
|
||||
}
|
||||
|
||||
function NodeInfo({ nodeInfo }: { nodeInfo: SourceNode }) {
|
||||
const { isCopied, copyToClipboard } = useCopyToClipboard({ timeout: 1000 });
|
||||
|
||||
const pageNumber =
|
||||
// XXX: page_label is used in Python, but page_number is used by Typescript
|
||||
(nodeInfo.metadata?.page_number as number) ??
|
||||
(nodeInfo.metadata?.page_label as number) ??
|
||||
null;
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="font-semibold">
|
||||
{pageNumber ? `On page ${pageNumber}:` : "Node content:"}
|
||||
</span>
|
||||
{nodeInfo.text && (
|
||||
<Button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
copyToClipboard(nodeInfo.text);
|
||||
}}
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
className="h-12 w-12 shrink-0"
|
||||
>
|
||||
{isCopied ? (
|
||||
<Check className="h-4 w-4" />
|
||||
) : (
|
||||
<Copy className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{nodeInfo.text && (
|
||||
<pre className="max-h-[200px] overflow-auto whitespace-pre-line">
|
||||
“{nodeInfo.text}”
|
||||
</pre>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,31 +0,0 @@
|
||||
import { ChatHandler, SuggestedQuestionsData } from "..";
|
||||
|
||||
export function SuggestedQuestions({
|
||||
questions,
|
||||
append,
|
||||
isLastMessage,
|
||||
}: {
|
||||
questions: SuggestedQuestionsData;
|
||||
append: Pick<ChatHandler, "append">["append"];
|
||||
isLastMessage: boolean;
|
||||
}) {
|
||||
const showQuestions = isLastMessage && questions.length > 0;
|
||||
return (
|
||||
showQuestions &&
|
||||
append !== undefined && (
|
||||
<div className="flex flex-col space-y-2">
|
||||
{questions.map((question, index) => (
|
||||
<a
|
||||
key={index}
|
||||
onClick={() => {
|
||||
append({ role: "user", content: question });
|
||||
}}
|
||||
className="text-sm italic hover:underline cursor-pointer"
|
||||
>
|
||||
{"->"} {question}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
@@ -1,40 +0,0 @@
|
||||
import { ToolData } from "../index";
|
||||
import { Artifact, CodeArtifact } from "../widgets/Artifact";
|
||||
import { WeatherCard, WeatherData } from "../widgets/WeatherCard";
|
||||
|
||||
// TODO: If needed, add displaying more tool outputs here
|
||||
export default function ChatTools({
|
||||
data,
|
||||
artifactVersion,
|
||||
}: {
|
||||
data: ToolData;
|
||||
artifactVersion?: number;
|
||||
}) {
|
||||
if (!data) return null;
|
||||
const { toolCall, toolOutput } = data;
|
||||
|
||||
if (toolOutput.isError) {
|
||||
return (
|
||||
<div className="border-l-2 border-red-400 pl-2">
|
||||
There was an error when calling the tool {toolCall.name} with input:{" "}
|
||||
<br />
|
||||
{JSON.stringify(toolCall.input)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
switch (toolCall.name) {
|
||||
case "get_weather_information":
|
||||
const weatherData = toolOutput.output as unknown as WeatherData;
|
||||
return <WeatherCard data={weatherData} />;
|
||||
case "artifact":
|
||||
return (
|
||||
<Artifact
|
||||
artifact={toolOutput.output as CodeArtifact}
|
||||
version={artifactVersion}
|
||||
/>
|
||||
);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
@@ -1,131 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import hljs from "highlight.js";
|
||||
// instead of atom-one-dark theme, there are a lot of others: https://highlightjs.org/demo
|
||||
import "highlight.js/styles/atom-one-dark-reasonable.css";
|
||||
import { Check, Copy, Download } from "lucide-react";
|
||||
import { FC, memo, useEffect, useRef } from "react";
|
||||
import { Button } from "../../button";
|
||||
import { useCopyToClipboard } from "../hooks/use-copy-to-clipboard";
|
||||
|
||||
interface Props {
|
||||
language: string;
|
||||
value: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
interface languageMap {
|
||||
[key: string]: string | undefined;
|
||||
}
|
||||
|
||||
export const programmingLanguages: languageMap = {
|
||||
javascript: ".js",
|
||||
python: ".py",
|
||||
java: ".java",
|
||||
c: ".c",
|
||||
cpp: ".cpp",
|
||||
"c++": ".cpp",
|
||||
"c#": ".cs",
|
||||
ruby: ".rb",
|
||||
php: ".php",
|
||||
swift: ".swift",
|
||||
"objective-c": ".m",
|
||||
kotlin: ".kt",
|
||||
typescript: ".ts",
|
||||
go: ".go",
|
||||
perl: ".pl",
|
||||
rust: ".rs",
|
||||
scala: ".scala",
|
||||
haskell: ".hs",
|
||||
lua: ".lua",
|
||||
shell: ".sh",
|
||||
sql: ".sql",
|
||||
html: ".html",
|
||||
css: ".css",
|
||||
// add more file extensions here, make sure the key is same as language prop in CodeBlock.tsx component
|
||||
};
|
||||
|
||||
export const generateRandomString = (length: number, lowercase = false) => {
|
||||
const chars = "ABCDEFGHJKLMNPQRSTUVWXY3456789"; // excluding similar looking characters like Z, 2, I, 1, O, 0
|
||||
let result = "";
|
||||
for (let i = 0; i < length; i++) {
|
||||
result += chars.charAt(Math.floor(Math.random() * chars.length));
|
||||
}
|
||||
return lowercase ? result.toLowerCase() : result;
|
||||
};
|
||||
|
||||
const CodeBlock: FC<Props> = memo(({ language, value, className }) => {
|
||||
const { isCopied, copyToClipboard } = useCopyToClipboard({ timeout: 2000 });
|
||||
const codeRef = useRef<HTMLElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (codeRef.current && codeRef.current.dataset.highlighted !== "yes") {
|
||||
hljs.highlightElement(codeRef.current);
|
||||
}
|
||||
}, [language, value]);
|
||||
|
||||
const downloadAsFile = () => {
|
||||
if (typeof window === "undefined") {
|
||||
return;
|
||||
}
|
||||
const fileExtension = programmingLanguages[language] || ".file";
|
||||
const suggestedFileName = `file-${generateRandomString(
|
||||
3,
|
||||
true,
|
||||
)}${fileExtension}`;
|
||||
const fileName = window.prompt("Enter file name", suggestedFileName);
|
||||
|
||||
if (!fileName) {
|
||||
// User pressed cancel on prompt.
|
||||
return;
|
||||
}
|
||||
|
||||
const blob = new Blob([value], { type: "text/plain" });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const link = document.createElement("a");
|
||||
link.download = fileName;
|
||||
link.href = url;
|
||||
link.style.display = "none";
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
URL.revokeObjectURL(url);
|
||||
};
|
||||
|
||||
const onCopy = () => {
|
||||
if (isCopied) return;
|
||||
copyToClipboard(value);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`codeblock relative w-full bg-zinc-950 font-sans ${className}`}
|
||||
>
|
||||
<div className="flex w-full items-center justify-between bg-zinc-800 px-6 py-2 pr-4 text-zinc-100">
|
||||
<span className="text-xs lowercase">{language}</span>
|
||||
<div className="flex items-center space-x-1">
|
||||
<Button variant="ghost" onClick={downloadAsFile} size="icon">
|
||||
<Download />
|
||||
<span className="sr-only">Download</span>
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" onClick={onCopy}>
|
||||
{isCopied ? (
|
||||
<Check className="h-4 w-4" />
|
||||
) : (
|
||||
<Copy className="h-4 w-4" />
|
||||
)}
|
||||
<span className="sr-only">Copy code</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<pre className="border border-zinc-700">
|
||||
<code ref={codeRef} className={`language-${language} font-mono`}>
|
||||
{value}
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
CodeBlock.displayName = "CodeBlock";
|
||||
|
||||
export { CodeBlock };
|
||||
@@ -1,184 +0,0 @@
|
||||
import { Check, Copy } from "lucide-react";
|
||||
|
||||
import { Message } from "ai";
|
||||
import { Fragment } from "react";
|
||||
import { Button } from "../../button";
|
||||
import { useCopyToClipboard } from "../hooks/use-copy-to-clipboard";
|
||||
import {
|
||||
AgentEventData,
|
||||
ChatHandler,
|
||||
DocumentFileData,
|
||||
EventData,
|
||||
ImageData,
|
||||
MessageAnnotation,
|
||||
MessageAnnotationType,
|
||||
SuggestedQuestionsData,
|
||||
ToolData,
|
||||
getAnnotationData,
|
||||
getSourceAnnotationData,
|
||||
} from "../index";
|
||||
import { ChatAgentEvents } from "./chat-agent-events";
|
||||
import ChatAvatar from "./chat-avatar";
|
||||
import { ChatEvents } from "./chat-events";
|
||||
import { ChatFiles } from "./chat-files";
|
||||
import { ChatImage } from "./chat-image";
|
||||
import { ChatSources } from "./chat-sources";
|
||||
import { SuggestedQuestions } from "./chat-suggestedQuestions";
|
||||
import ChatTools from "./chat-tools";
|
||||
import Markdown from "./markdown";
|
||||
|
||||
type ContentDisplayConfig = {
|
||||
order: number;
|
||||
component: JSX.Element | null;
|
||||
};
|
||||
|
||||
function ChatMessageContent({
|
||||
message,
|
||||
isLoading,
|
||||
append,
|
||||
isLastMessage,
|
||||
artifactVersion,
|
||||
}: {
|
||||
message: Message;
|
||||
isLoading: boolean;
|
||||
append: Pick<ChatHandler, "append">["append"];
|
||||
isLastMessage: boolean;
|
||||
artifactVersion: number | undefined;
|
||||
}) {
|
||||
const annotations = message.annotations as MessageAnnotation[] | undefined;
|
||||
if (!annotations?.length) return <Markdown content={message.content} />;
|
||||
|
||||
const imageData = getAnnotationData<ImageData>(
|
||||
annotations,
|
||||
MessageAnnotationType.IMAGE,
|
||||
);
|
||||
const contentFileData = getAnnotationData<DocumentFileData>(
|
||||
annotations,
|
||||
MessageAnnotationType.DOCUMENT_FILE,
|
||||
);
|
||||
const eventData = getAnnotationData<EventData>(
|
||||
annotations,
|
||||
MessageAnnotationType.EVENTS,
|
||||
);
|
||||
const agentEventData = getAnnotationData<AgentEventData>(
|
||||
annotations,
|
||||
MessageAnnotationType.AGENT_EVENTS,
|
||||
);
|
||||
|
||||
const sourceData = getSourceAnnotationData(annotations);
|
||||
|
||||
const toolData = getAnnotationData<ToolData>(
|
||||
annotations,
|
||||
MessageAnnotationType.TOOLS,
|
||||
);
|
||||
const suggestedQuestionsData = getAnnotationData<SuggestedQuestionsData>(
|
||||
annotations,
|
||||
MessageAnnotationType.SUGGESTED_QUESTIONS,
|
||||
);
|
||||
|
||||
const contents: ContentDisplayConfig[] = [
|
||||
{
|
||||
order: 1,
|
||||
component: imageData[0] ? <ChatImage data={imageData[0]} /> : null,
|
||||
},
|
||||
{
|
||||
order: -3,
|
||||
component:
|
||||
eventData.length > 0 ? (
|
||||
<ChatEvents isLoading={isLoading} data={eventData} />
|
||||
) : null,
|
||||
},
|
||||
{
|
||||
order: -2,
|
||||
component:
|
||||
agentEventData.length > 0 ? (
|
||||
<ChatAgentEvents
|
||||
data={agentEventData}
|
||||
isFinished={!!message.content}
|
||||
/>
|
||||
) : null,
|
||||
},
|
||||
{
|
||||
order: 2,
|
||||
component: contentFileData[0] ? (
|
||||
<ChatFiles data={contentFileData[0]} />
|
||||
) : null,
|
||||
},
|
||||
{
|
||||
order: -1,
|
||||
component: toolData[0] ? (
|
||||
<ChatTools data={toolData[0]} artifactVersion={artifactVersion} />
|
||||
) : null,
|
||||
},
|
||||
{
|
||||
order: 0,
|
||||
component: <Markdown content={message.content} sources={sourceData[0]} />,
|
||||
},
|
||||
{
|
||||
order: 3,
|
||||
component: sourceData[0] ? <ChatSources data={sourceData[0]} /> : null,
|
||||
},
|
||||
{
|
||||
order: 4,
|
||||
component: suggestedQuestionsData[0] ? (
|
||||
<SuggestedQuestions
|
||||
questions={suggestedQuestionsData[0]}
|
||||
append={append}
|
||||
isLastMessage={isLastMessage}
|
||||
/>
|
||||
) : null,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="flex-1 gap-4 flex flex-col">
|
||||
{contents
|
||||
.sort((a, b) => a.order - b.order)
|
||||
.map((content, index) => (
|
||||
<Fragment key={index}>{content.component}</Fragment>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function ChatMessage({
|
||||
chatMessage,
|
||||
isLoading,
|
||||
append,
|
||||
isLastMessage,
|
||||
artifactVersion,
|
||||
}: {
|
||||
chatMessage: Message;
|
||||
isLoading: boolean;
|
||||
append: Pick<ChatHandler, "append">["append"];
|
||||
isLastMessage: boolean;
|
||||
artifactVersion: number | undefined;
|
||||
}) {
|
||||
const { isCopied, copyToClipboard } = useCopyToClipboard({ timeout: 2000 });
|
||||
return (
|
||||
<div className="flex items-start gap-4 pr-5 pt-5">
|
||||
<ChatAvatar role={chatMessage.role} />
|
||||
<div className="group flex flex-1 justify-between gap-2">
|
||||
<ChatMessageContent
|
||||
message={chatMessage}
|
||||
isLoading={isLoading}
|
||||
append={append}
|
||||
isLastMessage={isLastMessage}
|
||||
artifactVersion={artifactVersion}
|
||||
/>
|
||||
<Button
|
||||
onClick={() => copyToClipboard(chatMessage.content)}
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
className="h-8 w-8 opacity-0 group-hover:opacity-100"
|
||||
>
|
||||
{isCopied ? (
|
||||
<Check className="h-4 w-4" />
|
||||
) : (
|
||||
<Copy className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,170 +0,0 @@
|
||||
import "katex/dist/katex.min.css";
|
||||
import { FC, memo } from "react";
|
||||
import ReactMarkdown, { Options } from "react-markdown";
|
||||
import rehypeKatex from "rehype-katex";
|
||||
import remarkGfm from "remark-gfm";
|
||||
import remarkMath from "remark-math";
|
||||
|
||||
import { DOCUMENT_FILE_TYPES, DocumentFileType, SourceData } from "..";
|
||||
import { useClientConfig } from "../hooks/use-config";
|
||||
import { DocumentInfo, SourceNumberButton } from "./chat-sources";
|
||||
import { CodeBlock } from "./codeblock";
|
||||
|
||||
const MemoizedReactMarkdown: FC<Options> = memo(
|
||||
ReactMarkdown,
|
||||
(prevProps, nextProps) =>
|
||||
prevProps.children === nextProps.children &&
|
||||
prevProps.className === nextProps.className,
|
||||
);
|
||||
|
||||
const preprocessLaTeX = (content: string) => {
|
||||
// Replace block-level LaTeX delimiters \[ \] with $$ $$
|
||||
const blockProcessedContent = content.replace(
|
||||
/\\\[([\s\S]*?)\\\]/g,
|
||||
(_, equation) => `$$${equation}$$`,
|
||||
);
|
||||
// Replace inline LaTeX delimiters \( \) with $ $
|
||||
const inlineProcessedContent = blockProcessedContent.replace(
|
||||
/\\\[([\s\S]*?)\\\]/g,
|
||||
(_, equation) => `$${equation}$`,
|
||||
);
|
||||
return inlineProcessedContent;
|
||||
};
|
||||
|
||||
const preprocessMedia = (content: string) => {
|
||||
// Remove `sandbox:` from the beginning of the URL
|
||||
// to fix OpenAI's models issue appending `sandbox:` to the relative URL
|
||||
return content.replace(/(sandbox|attachment|snt):/g, "");
|
||||
};
|
||||
|
||||
/**
|
||||
* Update the citation flag [citation:id]() to the new format [citation:index](url)
|
||||
*/
|
||||
const preprocessCitations = (content: string, sources?: SourceData) => {
|
||||
if (sources) {
|
||||
const citationRegex = /\[citation:(.+?)\]\(\)/g;
|
||||
let match;
|
||||
// Find all the citation references in the content
|
||||
while ((match = citationRegex.exec(content)) !== null) {
|
||||
const citationId = match[1];
|
||||
// Find the source node with the id equal to the citation-id, also get the index of the source node
|
||||
const sourceNode = sources.nodes.find((node) => node.id === citationId);
|
||||
// If the source node is found, replace the citation reference with the new format
|
||||
if (sourceNode !== undefined) {
|
||||
content = content.replace(
|
||||
match[0],
|
||||
`[citation:${sources.nodes.indexOf(sourceNode)}]()`,
|
||||
);
|
||||
} else {
|
||||
// If the source node is not found, remove the citation reference
|
||||
content = content.replace(match[0], "");
|
||||
}
|
||||
}
|
||||
}
|
||||
return content;
|
||||
};
|
||||
|
||||
const preprocessContent = (content: string, sources?: SourceData) => {
|
||||
return preprocessCitations(
|
||||
preprocessMedia(preprocessLaTeX(content)),
|
||||
sources,
|
||||
);
|
||||
};
|
||||
|
||||
export default function Markdown({
|
||||
content,
|
||||
sources,
|
||||
}: {
|
||||
content: string;
|
||||
sources?: SourceData;
|
||||
}) {
|
||||
const processedContent = preprocessContent(content, sources);
|
||||
const { backend } = useClientConfig();
|
||||
|
||||
return (
|
||||
<MemoizedReactMarkdown
|
||||
className="prose dark:prose-invert prose-p:leading-relaxed prose-pre:p-0 break-words custom-markdown"
|
||||
remarkPlugins={[remarkGfm, remarkMath]}
|
||||
rehypePlugins={[rehypeKatex as any]}
|
||||
components={{
|
||||
p({ children }) {
|
||||
return <div className="mb-2 last:mb-0">{children}</div>;
|
||||
},
|
||||
code({ node, inline, className, children, ...props }) {
|
||||
if (children.length) {
|
||||
if (children[0] == "▍") {
|
||||
return (
|
||||
<span className="mt-1 animate-pulse cursor-default">▍</span>
|
||||
);
|
||||
}
|
||||
|
||||
children[0] = (children[0] as string).replace("`▍`", "▍");
|
||||
}
|
||||
|
||||
const match = /language-(\w+)/.exec(className || "");
|
||||
|
||||
if (inline) {
|
||||
return (
|
||||
<code className={className} {...props}>
|
||||
{children}
|
||||
</code>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<CodeBlock
|
||||
key={Math.random()}
|
||||
language={(match && match[1]) || ""}
|
||||
value={String(children).replace(/\n$/, "")}
|
||||
className="mb-2"
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
},
|
||||
a({ href, children }) {
|
||||
// If href starts with `{backend}/api/files`, then it's a local document and we use DocumenInfo for rendering
|
||||
if (href?.startsWith(backend + "/api/files")) {
|
||||
// Check if the file is document file type
|
||||
const fileExtension = href.split(".").pop()?.toLowerCase();
|
||||
|
||||
if (
|
||||
fileExtension &&
|
||||
DOCUMENT_FILE_TYPES.includes(fileExtension as DocumentFileType)
|
||||
) {
|
||||
return (
|
||||
<DocumentInfo
|
||||
document={{
|
||||
url: new URL(decodeURIComponent(href)).href,
|
||||
sources: [],
|
||||
}}
|
||||
className="mb-2 mt-2"
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
// If a text link starts with 'citation:', then render it as a citation reference
|
||||
if (
|
||||
Array.isArray(children) &&
|
||||
typeof children[0] === "string" &&
|
||||
children[0].startsWith("citation:")
|
||||
) {
|
||||
const index = Number(children[0].replace("citation:", ""));
|
||||
if (!isNaN(index)) {
|
||||
return <SourceNumberButton index={index} />;
|
||||
} else {
|
||||
// citation is not looked up yet, don't render anything
|
||||
return <></>;
|
||||
}
|
||||
}
|
||||
return (
|
||||
<a href={href} target="_blank">
|
||||
{children}
|
||||
</a>
|
||||
);
|
||||
},
|
||||
}}
|
||||
>
|
||||
{processedContent}
|
||||
</MemoizedReactMarkdown>
|
||||
);
|
||||
}
|
||||
@@ -1,136 +1,30 @@
|
||||
import { Loader2 } from "lucide-react";
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
"use client";
|
||||
|
||||
import { ToolData } from ".";
|
||||
import { Button } from "../button";
|
||||
import ChatActions from "./chat-actions";
|
||||
import ChatMessage from "./chat-message";
|
||||
import { ChatHandler } from "./chat.interface";
|
||||
import { useClientConfig } from "./hooks/use-config";
|
||||
|
||||
export default function ChatMessages(
|
||||
props: Pick<
|
||||
ChatHandler,
|
||||
"messages" | "isLoading" | "reload" | "stop" | "append"
|
||||
>,
|
||||
) {
|
||||
const { backend } = useClientConfig();
|
||||
const [starterQuestions, setStarterQuestions] = useState<string[]>();
|
||||
|
||||
const scrollableChatContainerRef = useRef<HTMLDivElement>(null);
|
||||
const messageLength = props.messages.length;
|
||||
const lastMessage = props.messages[messageLength - 1];
|
||||
|
||||
const scrollToBottom = () => {
|
||||
if (scrollableChatContainerRef.current) {
|
||||
scrollableChatContainerRef.current.scrollTop =
|
||||
scrollableChatContainerRef.current.scrollHeight;
|
||||
}
|
||||
};
|
||||
|
||||
const isLastMessageFromAssistant =
|
||||
messageLength > 0 && lastMessage?.role !== "user";
|
||||
const showReload =
|
||||
props.reload && !props.isLoading && isLastMessageFromAssistant;
|
||||
const showStop = props.stop && props.isLoading;
|
||||
|
||||
// `isPending` indicate
|
||||
// that stream response is not yet received from the server,
|
||||
// so we show a loading indicator to give a better UX.
|
||||
const isPending = props.isLoading && !isLastMessageFromAssistant;
|
||||
|
||||
useEffect(() => {
|
||||
scrollToBottom();
|
||||
}, [messageLength, lastMessage]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!starterQuestions) {
|
||||
fetch(`${backend}/api/chat/config`)
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
if (data?.starterQuestions) {
|
||||
setStarterQuestions(data.starterQuestions);
|
||||
}
|
||||
})
|
||||
.catch((error) => console.error("Error fetching config", error));
|
||||
}
|
||||
}, [starterQuestions, backend]);
|
||||
|
||||
// build a map of message id to artifact version
|
||||
const artifactVersionMap = useMemo(() => {
|
||||
const map = new Map<string, number | undefined>();
|
||||
let versionIndex = 1;
|
||||
props.messages.forEach((m) => {
|
||||
m.annotations?.forEach((annotation) => {
|
||||
if (
|
||||
typeof annotation === "object" &&
|
||||
annotation != null &&
|
||||
"type" in annotation &&
|
||||
annotation.type === "tools"
|
||||
) {
|
||||
const data = annotation.data as ToolData;
|
||||
if (data?.toolCall?.name === "artifact") {
|
||||
map.set(m.id, versionIndex);
|
||||
versionIndex++;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
return map;
|
||||
}, [props.messages]);
|
||||
import { ChatMessage, ChatMessages, useChatUI } from "@llamaindex/chat-ui";
|
||||
import { ChatMessageAvatar } from "./chat-avatar";
|
||||
import { ChatMessageContent } from "./chat-message-content";
|
||||
import { ChatStarter } from "./chat-starter";
|
||||
|
||||
export default function CustomChatMessages() {
|
||||
const { messages } = useChatUI();
|
||||
return (
|
||||
<div
|
||||
className="flex-1 w-full rounded-xl bg-white p-4 shadow-xl relative overflow-y-auto"
|
||||
ref={scrollableChatContainerRef}
|
||||
>
|
||||
<div className="flex flex-col gap-5 divide-y">
|
||||
{props.messages.map((m, i) => {
|
||||
const isLoadingMessage = i === messageLength - 1 && props.isLoading;
|
||||
return (
|
||||
<ChatMessage
|
||||
key={m.id}
|
||||
chatMessage={m}
|
||||
isLoading={isLoadingMessage}
|
||||
append={props.append!}
|
||||
isLastMessage={i === messageLength - 1}
|
||||
artifactVersion={artifactVersionMap.get(m.id)}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
{isPending && (
|
||||
<div className="flex justify-center items-center pt-10">
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{(showReload || showStop) && (
|
||||
<div className="flex justify-end py-4">
|
||||
<ChatActions
|
||||
reload={props.reload}
|
||||
stop={props.stop}
|
||||
showReload={showReload}
|
||||
showStop={showStop}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{!messageLength && starterQuestions?.length && props.append && (
|
||||
<div className="absolute bottom-6 left-0 w-full">
|
||||
<div className="grid grid-cols-2 gap-2 mx-20">
|
||||
{starterQuestions.map((question, i) => (
|
||||
<Button
|
||||
variant="outline"
|
||||
key={i}
|
||||
onClick={() =>
|
||||
props.append!({ role: "user", content: question })
|
||||
}
|
||||
>
|
||||
{question}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<ChatMessages className="shadow-xl rounded-xl">
|
||||
<ChatMessages.List>
|
||||
{messages.map((message, index) => (
|
||||
<ChatMessage
|
||||
key={index}
|
||||
message={message}
|
||||
isLast={index === messages.length - 1}
|
||||
>
|
||||
<ChatMessageAvatar />
|
||||
<ChatMessageContent />
|
||||
<ChatMessage.Actions />
|
||||
</ChatMessage>
|
||||
))}
|
||||
<ChatMessages.Loading />
|
||||
</ChatMessages.List>
|
||||
<ChatMessages.Actions />
|
||||
<ChatStarter />
|
||||
</ChatMessages>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,26 @@
|
||||
import { useChatUI } from "@llamaindex/chat-ui";
|
||||
import { StarterQuestions } from "@llamaindex/chat-ui/widgets";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useClientConfig } from "./hooks/use-config";
|
||||
|
||||
export function ChatStarter() {
|
||||
const { append } = useChatUI();
|
||||
const { backend } = useClientConfig();
|
||||
const [starterQuestions, setStarterQuestions] = useState<string[]>();
|
||||
|
||||
useEffect(() => {
|
||||
if (!starterQuestions) {
|
||||
fetch(`${backend}/api/chat/config`)
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
if (data?.starterQuestions) {
|
||||
setStarterQuestions(data.starterQuestions);
|
||||
}
|
||||
})
|
||||
.catch((error) => console.error("Error fetching config", error));
|
||||
}
|
||||
}, [starterQuestions, backend]);
|
||||
|
||||
if (!starterQuestions?.length) return null;
|
||||
return <StarterQuestions append={append} questions={starterQuestions} />;
|
||||
}
|
||||
@@ -1,25 +0,0 @@
|
||||
import { Message } from "ai";
|
||||
|
||||
export interface ChatHandler {
|
||||
messages: Message[];
|
||||
input: string;
|
||||
isLoading: boolean;
|
||||
handleSubmit: (
|
||||
e: React.FormEvent<HTMLFormElement>,
|
||||
ops?: {
|
||||
data?: any;
|
||||
},
|
||||
) => void;
|
||||
handleInputChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
|
||||
reload?: () => void;
|
||||
stop?: () => void;
|
||||
onFileUpload?: (file: File) => Promise<void>;
|
||||
onFileError?: (errMsg: string) => void;
|
||||
setInput?: (input: string) => void;
|
||||
append?: (
|
||||
message: Message | Omit<Message, "id">,
|
||||
ops?: {
|
||||
data: any;
|
||||
},
|
||||
) => Promise<string | null | undefined>;
|
||||
}
|
||||
+6
-2
@@ -1,3 +1,4 @@
|
||||
import { useChatUI } from "@llamaindex/chat-ui";
|
||||
import { Loader2 } from "lucide-react";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import {
|
||||
@@ -35,19 +36,18 @@ type LlamaCloudConfig = {
|
||||
};
|
||||
|
||||
export interface LlamaCloudSelectorProps {
|
||||
setRequestData?: React.Dispatch<any>;
|
||||
onSelect?: (pipeline: PipelineConfig | undefined) => void;
|
||||
defaultPipeline?: PipelineConfig;
|
||||
shouldCheckValid?: boolean;
|
||||
}
|
||||
|
||||
export function LlamaCloudSelector({
|
||||
setRequestData,
|
||||
onSelect,
|
||||
defaultPipeline,
|
||||
shouldCheckValid = false,
|
||||
}: LlamaCloudSelectorProps) {
|
||||
const { backend } = useClientConfig();
|
||||
const { setRequestData } = useChatUI();
|
||||
const [config, setConfig] = useState<LlamaCloudConfig>();
|
||||
|
||||
const updateRequestParams = useCallback(
|
||||
@@ -97,6 +97,10 @@ export function LlamaCloudSelector({
|
||||
setPipeline(JSON.parse(value) as PipelineConfig);
|
||||
};
|
||||
|
||||
if (process.env.NEXT_PUBLIC_USE_LLAMACLOUD !== "true") {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (!config) {
|
||||
return (
|
||||
<div className="flex justify-center items-center p-3">
|
||||
@@ -0,0 +1,29 @@
|
||||
"use client";
|
||||
|
||||
import { SourceData } from "@llamaindex/chat-ui";
|
||||
import { Markdown as MarkdownUI } from "@llamaindex/chat-ui/widgets";
|
||||
import { useClientConfig } from "../hooks/use-config";
|
||||
|
||||
const preprocessMedia = (content: string) => {
|
||||
// Remove `sandbox:` from the beginning of the URL before rendering markdown
|
||||
// OpenAI models sometimes prepend `sandbox:` to relative URLs - this fixes it
|
||||
return content.replace(/(sandbox|attachment|snt):/g, "");
|
||||
};
|
||||
|
||||
export function Markdown({
|
||||
content,
|
||||
sources,
|
||||
}: {
|
||||
content: string;
|
||||
sources?: SourceData;
|
||||
}) {
|
||||
const { backend } = useClientConfig();
|
||||
const processedContent = preprocessMedia(content);
|
||||
return (
|
||||
<MarkdownUI
|
||||
content={processedContent}
|
||||
backend={backend}
|
||||
sources={sources}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -1,136 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { JSONValue } from "llamaindex";
|
||||
import { useState } from "react";
|
||||
import {
|
||||
DocumentFile,
|
||||
DocumentFileType,
|
||||
MessageAnnotation,
|
||||
MessageAnnotationType,
|
||||
UploadedFileMeta,
|
||||
} from "..";
|
||||
import { useClientConfig } from "./use-config";
|
||||
|
||||
const docMineTypeMap: Record<string, DocumentFileType> = {
|
||||
"text/csv": "csv",
|
||||
"application/pdf": "pdf",
|
||||
"text/plain": "txt",
|
||||
"application/vnd.openxmlformats-officedocument.wordprocessingml.document":
|
||||
"docx",
|
||||
};
|
||||
|
||||
export function useFile() {
|
||||
const { backend } = useClientConfig();
|
||||
const [imageUrl, setImageUrl] = useState<string | null>(null);
|
||||
const [files, setFiles] = useState<DocumentFile[]>([]);
|
||||
|
||||
const docEqual = (a: DocumentFile, b: DocumentFile) => {
|
||||
if (a.metadata?.id === b.metadata?.id) return true;
|
||||
if (a.filename === b.filename && a.filesize === b.filesize) return true;
|
||||
return false;
|
||||
};
|
||||
|
||||
const addDoc = (file: DocumentFile) => {
|
||||
const existedFile = files.find((f) => docEqual(f, file));
|
||||
if (!existedFile) {
|
||||
setFiles((prev) => [...prev, file]);
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
const removeDoc = (file: DocumentFile) => {
|
||||
setFiles((prev) =>
|
||||
prev.filter((f) => f.metadata?.id !== file.metadata?.id),
|
||||
);
|
||||
};
|
||||
|
||||
const reset = () => {
|
||||
imageUrl && setImageUrl(null);
|
||||
files.length && setFiles([]);
|
||||
};
|
||||
|
||||
const uploadContent = async (
|
||||
file: File,
|
||||
requestParams: any = {},
|
||||
): Promise<UploadedFileMeta> => {
|
||||
const base64 = await readContent({ file, asUrl: true });
|
||||
const uploadAPI = `${backend}/api/chat/upload`;
|
||||
const response = await fetch(uploadAPI, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
...requestParams,
|
||||
base64,
|
||||
filename: file.name,
|
||||
}),
|
||||
});
|
||||
if (!response.ok) throw new Error("Failed to upload document.");
|
||||
return (await response.json()) as UploadedFileMeta;
|
||||
};
|
||||
|
||||
const getAnnotations = () => {
|
||||
const annotations: MessageAnnotation[] = [];
|
||||
if (imageUrl) {
|
||||
annotations.push({
|
||||
type: MessageAnnotationType.IMAGE,
|
||||
data: { url: imageUrl },
|
||||
});
|
||||
}
|
||||
if (files.length > 0) {
|
||||
annotations.push({
|
||||
type: MessageAnnotationType.DOCUMENT_FILE,
|
||||
data: { files },
|
||||
});
|
||||
}
|
||||
return annotations as JSONValue[];
|
||||
};
|
||||
|
||||
const readContent = async (input: {
|
||||
file: File;
|
||||
asUrl?: boolean;
|
||||
}): Promise<string> => {
|
||||
const { file, asUrl } = input;
|
||||
const content = await new Promise<string>((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
if (asUrl) {
|
||||
reader.readAsDataURL(file);
|
||||
} else {
|
||||
reader.readAsText(file);
|
||||
}
|
||||
reader.onload = () => resolve(reader.result as string);
|
||||
reader.onerror = (error) => reject(error);
|
||||
});
|
||||
return content;
|
||||
};
|
||||
|
||||
const uploadFile = async (file: File, requestParams: any = {}) => {
|
||||
if (file.type.startsWith("image/")) {
|
||||
const base64 = await readContent({ file, asUrl: true });
|
||||
return setImageUrl(base64);
|
||||
}
|
||||
|
||||
const filetype = docMineTypeMap[file.type];
|
||||
if (!filetype) throw new Error("Unsupported document type.");
|
||||
const uploadedFileMeta = await uploadContent(file, requestParams);
|
||||
const newDoc: DocumentFile = {
|
||||
filename: file.name,
|
||||
filesize: file.size,
|
||||
filetype,
|
||||
metadata: uploadedFileMeta,
|
||||
};
|
||||
return addDoc(newDoc);
|
||||
};
|
||||
|
||||
return {
|
||||
imageUrl,
|
||||
setImageUrl,
|
||||
files,
|
||||
removeDoc,
|
||||
reset,
|
||||
getAnnotations,
|
||||
uploadFile,
|
||||
};
|
||||
}
|
||||
@@ -1,136 +0,0 @@
|
||||
import { JSONValue } from "ai";
|
||||
import ChatInput from "./chat-input";
|
||||
import ChatMessages from "./chat-messages";
|
||||
|
||||
export { type ChatHandler } from "./chat.interface";
|
||||
export { ChatInput, ChatMessages };
|
||||
|
||||
export enum MessageAnnotationType {
|
||||
IMAGE = "image",
|
||||
DOCUMENT_FILE = "document_file",
|
||||
SOURCES = "sources",
|
||||
EVENTS = "events",
|
||||
TOOLS = "tools",
|
||||
SUGGESTED_QUESTIONS = "suggested_questions",
|
||||
AGENT_EVENTS = "agent",
|
||||
}
|
||||
|
||||
export type ImageData = {
|
||||
url: string;
|
||||
};
|
||||
|
||||
export type DocumentFileType = "csv" | "pdf" | "txt" | "docx";
|
||||
export const DOCUMENT_FILE_TYPES: DocumentFileType[] = [
|
||||
"csv",
|
||||
"pdf",
|
||||
"txt",
|
||||
"docx",
|
||||
];
|
||||
|
||||
export type UploadedFileMeta = {
|
||||
id: string;
|
||||
name: string; // The uploaded file name in the backend (including uuid and sanitized)
|
||||
url?: string;
|
||||
refs?: string[];
|
||||
};
|
||||
|
||||
export type DocumentFile = {
|
||||
filename: string; // The original file name
|
||||
filesize: number;
|
||||
filetype: DocumentFileType;
|
||||
metadata?: UploadedFileMeta; // undefined when the file is not uploaded yet
|
||||
};
|
||||
|
||||
export type DocumentFileData = {
|
||||
files: DocumentFile[];
|
||||
};
|
||||
|
||||
export type SourceNode = {
|
||||
id: string;
|
||||
metadata: Record<string, unknown>;
|
||||
score?: number;
|
||||
text: string;
|
||||
url: string;
|
||||
};
|
||||
|
||||
export type SourceData = {
|
||||
nodes: SourceNode[];
|
||||
};
|
||||
|
||||
export type EventData = {
|
||||
title: string;
|
||||
};
|
||||
|
||||
export type AgentEventData = {
|
||||
agent: string;
|
||||
text: string;
|
||||
};
|
||||
|
||||
export type ToolData = {
|
||||
toolCall: {
|
||||
id: string;
|
||||
name: string;
|
||||
input: {
|
||||
[key: string]: JSONValue;
|
||||
};
|
||||
};
|
||||
toolOutput: {
|
||||
output: JSONValue;
|
||||
isError: boolean;
|
||||
};
|
||||
};
|
||||
|
||||
export type SuggestedQuestionsData = string[];
|
||||
|
||||
export type AnnotationData =
|
||||
| ImageData
|
||||
| DocumentFileData
|
||||
| SourceData
|
||||
| EventData
|
||||
| AgentEventData
|
||||
| ToolData
|
||||
| SuggestedQuestionsData;
|
||||
|
||||
export type MessageAnnotation = {
|
||||
type: MessageAnnotationType;
|
||||
data: AnnotationData;
|
||||
};
|
||||
|
||||
const NODE_SCORE_THRESHOLD = 0.25;
|
||||
|
||||
export function getAnnotationData<T extends AnnotationData>(
|
||||
annotations: MessageAnnotation[],
|
||||
type: MessageAnnotationType,
|
||||
): T[] {
|
||||
return annotations.filter((a) => a.type === type).map((a) => a.data as T);
|
||||
}
|
||||
|
||||
export function getSourceAnnotationData(
|
||||
annotations: MessageAnnotation[],
|
||||
): SourceData[] {
|
||||
const data = getAnnotationData<SourceData>(
|
||||
annotations,
|
||||
MessageAnnotationType.SOURCES,
|
||||
);
|
||||
if (data.length > 0) {
|
||||
const sourceData = data[0] as SourceData;
|
||||
if (sourceData.nodes) {
|
||||
sourceData.nodes = preprocessSourceNodes(sourceData.nodes);
|
||||
}
|
||||
}
|
||||
return data;
|
||||
}
|
||||
|
||||
function preprocessSourceNodes(nodes: SourceNode[]): SourceNode[] {
|
||||
// Filter source nodes has lower score
|
||||
nodes = nodes
|
||||
.filter((node) => (node.score ?? 1) > NODE_SCORE_THRESHOLD)
|
||||
.filter((node) => node.url && node.url.trim() !== "")
|
||||
.sort((a, b) => (b.score ?? 1) - (a.score ?? 1))
|
||||
.map((node) => {
|
||||
// remove trailing slash for node url if exists
|
||||
node.url = node.url.replace(/\/$/, "");
|
||||
return node;
|
||||
});
|
||||
return nodes;
|
||||
}
|
||||
+8
-7
@@ -10,7 +10,7 @@ import {
|
||||
} from "../../collapsible";
|
||||
import { cn } from "../../lib/utils";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../tabs";
|
||||
import Markdown from "../chat-message/markdown";
|
||||
import { Markdown } from "../custom/markdown";
|
||||
import { useClientConfig } from "../hooks/use-config";
|
||||
import { useCopyToClipboard } from "../hooks/use-copy-to-clipboard";
|
||||
|
||||
@@ -29,12 +29,17 @@ export type CodeArtifact = {
|
||||
files?: string[];
|
||||
};
|
||||
|
||||
type OutputUrl = {
|
||||
url: string;
|
||||
filename: string;
|
||||
};
|
||||
|
||||
type ArtifactResult = {
|
||||
template: string;
|
||||
stdout: string[];
|
||||
stderr: string[];
|
||||
runtimeError?: { name: string; value: string; tracebackRaw: string[] };
|
||||
outputUrls: Array<{ url: string; filename: string }>;
|
||||
outputUrls: OutputUrl[];
|
||||
url: string;
|
||||
};
|
||||
|
||||
@@ -272,11 +277,7 @@ function CodeSandboxPreview({ url }: { url: string }) {
|
||||
);
|
||||
}
|
||||
|
||||
function InterpreterOutput({
|
||||
outputUrls,
|
||||
}: {
|
||||
outputUrls: Array<{ url: string; filename: string }>;
|
||||
}) {
|
||||
function InterpreterOutput({ outputUrls }: { outputUrls: OutputUrl[] }) {
|
||||
return (
|
||||
<ul className="flex flex-col gap-2 mt-4">
|
||||
{outputUrls.map((url) => (
|
||||
@@ -0,0 +1,103 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
Message,
|
||||
MessageAnnotation,
|
||||
getAnnotationData,
|
||||
useChatUI,
|
||||
} from "@llamaindex/chat-ui";
|
||||
import { JSONValue } from "ai";
|
||||
import { useMemo } from "react";
|
||||
import { Artifact, CodeArtifact } from "./artifact";
|
||||
import { WeatherCard, WeatherData } from "./weather-card";
|
||||
|
||||
export function ToolAnnotations({ message }: { message: Message }) {
|
||||
// TODO: This is a bit of a hack to get the artifact version. better to generate the version in the tool call and
|
||||
// store it in CodeArtifact
|
||||
const { messages } = useChatUI();
|
||||
const artifactVersion = useMemo(
|
||||
() => getArtifactVersion(messages, message),
|
||||
[messages, message],
|
||||
);
|
||||
// Get the tool data from the message annotations
|
||||
const annotations = message.annotations as MessageAnnotation[] | undefined;
|
||||
const toolData = annotations
|
||||
? (getAnnotationData(annotations, "tools") as unknown as ToolData[])
|
||||
: null;
|
||||
return toolData?.[0] ? (
|
||||
<ChatTools data={toolData[0]} artifactVersion={artifactVersion} />
|
||||
) : null;
|
||||
}
|
||||
|
||||
// TODO: Used to render outputs of tools. If needed, add more renderers here.
|
||||
export function ChatTools({
|
||||
data,
|
||||
artifactVersion,
|
||||
}: {
|
||||
data: ToolData;
|
||||
artifactVersion: number | undefined;
|
||||
}) {
|
||||
if (!data) return null;
|
||||
const { toolCall, toolOutput } = data;
|
||||
|
||||
if (toolOutput.isError) {
|
||||
return (
|
||||
<div className="border-l-2 border-red-400 pl-2">
|
||||
There was an error when calling the tool {toolCall.name} with input:{" "}
|
||||
<br />
|
||||
{JSON.stringify(toolCall.input)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
switch (toolCall.name) {
|
||||
case "get_weather_information":
|
||||
const weatherData = toolOutput.output as unknown as WeatherData;
|
||||
return <WeatherCard data={weatherData} />;
|
||||
case "artifact":
|
||||
return (
|
||||
<Artifact
|
||||
artifact={toolOutput.output as CodeArtifact}
|
||||
version={artifactVersion}
|
||||
/>
|
||||
);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
type ToolData = {
|
||||
toolCall: {
|
||||
id: string;
|
||||
name: string;
|
||||
input: {
|
||||
[key: string]: JSONValue;
|
||||
};
|
||||
};
|
||||
toolOutput: {
|
||||
output: JSONValue;
|
||||
isError: boolean;
|
||||
};
|
||||
};
|
||||
|
||||
function getArtifactVersion(
|
||||
messages: Message[],
|
||||
message: Message,
|
||||
): number | undefined {
|
||||
const messageId = "id" in message ? message.id : undefined;
|
||||
if (!messageId) return undefined;
|
||||
let versionIndex = 1;
|
||||
for (const m of messages) {
|
||||
const toolData = m.annotations
|
||||
? (getAnnotationData(m.annotations, "tools") as unknown as ToolData[])
|
||||
: null;
|
||||
|
||||
if (toolData?.some((t) => t.toolCall.name === "artifact")) {
|
||||
if ("id" in m && m.id === messageId) {
|
||||
return versionIndex;
|
||||
}
|
||||
versionIndex++;
|
||||
}
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
@@ -1,67 +0,0 @@
|
||||
import dynamic from "next/dynamic";
|
||||
import { Button } from "../../button";
|
||||
import {
|
||||
Drawer,
|
||||
DrawerClose,
|
||||
DrawerContent,
|
||||
DrawerDescription,
|
||||
DrawerHeader,
|
||||
DrawerTitle,
|
||||
DrawerTrigger,
|
||||
} from "../../drawer";
|
||||
|
||||
export interface PdfDialogProps {
|
||||
documentId: string;
|
||||
url: string;
|
||||
trigger: React.ReactNode;
|
||||
}
|
||||
|
||||
// Dynamic imports for client-side rendering only
|
||||
const PDFViewer = dynamic(
|
||||
() => import("@llamaindex/pdf-viewer").then((module) => module.PDFViewer),
|
||||
{ ssr: false },
|
||||
);
|
||||
|
||||
const PdfFocusProvider = dynamic(
|
||||
() =>
|
||||
import("@llamaindex/pdf-viewer").then((module) => module.PdfFocusProvider),
|
||||
{ ssr: false },
|
||||
);
|
||||
|
||||
export default function PdfDialog(props: PdfDialogProps) {
|
||||
return (
|
||||
<Drawer direction="left">
|
||||
<DrawerTrigger asChild>{props.trigger}</DrawerTrigger>
|
||||
<DrawerContent className="w-3/5 mt-24 h-full max-h-[96%] ">
|
||||
<DrawerHeader className="flex justify-between">
|
||||
<div className="space-y-2">
|
||||
<DrawerTitle>PDF Content</DrawerTitle>
|
||||
<DrawerDescription>
|
||||
File URL:{" "}
|
||||
<a
|
||||
className="hover:text-blue-900"
|
||||
href={props.url}
|
||||
target="_blank"
|
||||
>
|
||||
{props.url}
|
||||
</a>
|
||||
</DrawerDescription>
|
||||
</div>
|
||||
<DrawerClose asChild>
|
||||
<Button variant="outline">Close</Button>
|
||||
</DrawerClose>
|
||||
</DrawerHeader>
|
||||
<div className="m-4">
|
||||
<PdfFocusProvider>
|
||||
<PDFViewer
|
||||
file={{
|
||||
id: props.documentId,
|
||||
url: props.url,
|
||||
}}
|
||||
/>
|
||||
</PdfFocusProvider>
|
||||
</div>
|
||||
</DrawerContent>
|
||||
</Drawer>
|
||||
);
|
||||
}
|
||||
@@ -1,129 +0,0 @@
|
||||
import { XCircleIcon } from "lucide-react";
|
||||
import Image from "next/image";
|
||||
import DocxIcon from "../ui/icons/docx.svg";
|
||||
import PdfIcon from "../ui/icons/pdf.svg";
|
||||
import SheetIcon from "../ui/icons/sheet.svg";
|
||||
import TxtIcon from "../ui/icons/txt.svg";
|
||||
import { Button } from "./button";
|
||||
import { DocumentFile, DocumentFileType } from "./chat";
|
||||
import {
|
||||
Drawer,
|
||||
DrawerClose,
|
||||
DrawerContent,
|
||||
DrawerDescription,
|
||||
DrawerHeader,
|
||||
DrawerTitle,
|
||||
DrawerTrigger,
|
||||
} from "./drawer";
|
||||
import { cn } from "./lib/utils";
|
||||
|
||||
export interface DocumentPreviewProps {
|
||||
file: DocumentFile;
|
||||
onRemove?: () => void;
|
||||
}
|
||||
|
||||
export function DocumentPreview(props: DocumentPreviewProps) {
|
||||
const { filename, filesize, filetype, metadata } = props.file;
|
||||
|
||||
if (metadata?.refs?.length) {
|
||||
return (
|
||||
<div title={`Document IDs: ${metadata.refs.join(", ")}`}>
|
||||
<PreviewCard {...props} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Drawer direction="left">
|
||||
<DrawerTrigger asChild>
|
||||
<div>
|
||||
<PreviewCard className="cursor-pointer" {...props} />
|
||||
</div>
|
||||
</DrawerTrigger>
|
||||
<DrawerContent className="w-3/5 mt-24 h-full max-h-[96%] ">
|
||||
<DrawerHeader className="flex justify-between">
|
||||
<div className="space-y-2">
|
||||
<DrawerTitle>{filetype.toUpperCase()} Raw Content</DrawerTitle>
|
||||
<DrawerDescription>
|
||||
{filename} ({inKB(filesize)} KB)
|
||||
</DrawerDescription>
|
||||
</div>
|
||||
<DrawerClose asChild>
|
||||
<Button variant="outline">Close</Button>
|
||||
</DrawerClose>
|
||||
</DrawerHeader>
|
||||
<div className="m-4 max-h-[80%] overflow-auto">
|
||||
{metadata?.refs?.length && (
|
||||
<pre className="bg-secondary rounded-md p-4 block text-sm">
|
||||
{metadata.refs.join(", ")}
|
||||
</pre>
|
||||
)}
|
||||
</div>
|
||||
</DrawerContent>
|
||||
</Drawer>
|
||||
);
|
||||
}
|
||||
|
||||
export const FileIcon: Record<DocumentFileType, string> = {
|
||||
csv: SheetIcon,
|
||||
pdf: PdfIcon,
|
||||
docx: DocxIcon,
|
||||
txt: TxtIcon,
|
||||
};
|
||||
|
||||
export function PreviewCard(props: {
|
||||
file: {
|
||||
filename: string;
|
||||
filesize?: number;
|
||||
filetype?: DocumentFileType;
|
||||
};
|
||||
onRemove?: () => void;
|
||||
className?: string;
|
||||
}) {
|
||||
const { onRemove, file, className } = props;
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"p-2 w-60 max-w-60 bg-secondary rounded-lg text-sm relative",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
<div className="flex flex-row items-center gap-2">
|
||||
<div className="relative h-8 w-8 shrink-0 overflow-hidden rounded-md flex items-center justify-center">
|
||||
<Image
|
||||
className="h-full w-auto object-contain"
|
||||
priority
|
||||
src={FileIcon[file.filetype || "txt"]}
|
||||
alt="Icon"
|
||||
/>
|
||||
</div>
|
||||
<div className="overflow-hidden">
|
||||
<div className="truncate font-semibold">
|
||||
{file.filename} {file.filesize ? `(${inKB(file.filesize)} KB)` : ""}
|
||||
</div>
|
||||
{file.filetype && (
|
||||
<div className="truncate text-token-text-tertiary flex items-center gap-2">
|
||||
<span>{file.filetype.toUpperCase()} File</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{onRemove && (
|
||||
<div
|
||||
className={cn(
|
||||
"absolute -top-2 -right-2 w-6 h-6 z-10 bg-gray-500 text-white rounded-full",
|
||||
)}
|
||||
>
|
||||
<XCircleIcon
|
||||
className="w-6 h-6 bg-gray-500 text-white rounded-full"
|
||||
onClick={onRemove}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function inKB(size: number) {
|
||||
return Math.round((size / 1024) * 10) / 10;
|
||||
}
|
||||
@@ -1,105 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { Loader2, Paperclip } from "lucide-react";
|
||||
import { ChangeEvent, useState } from "react";
|
||||
import { buttonVariants } from "./button";
|
||||
import { cn } from "./lib/utils";
|
||||
|
||||
export interface FileUploaderProps {
|
||||
config?: {
|
||||
inputId?: string;
|
||||
fileSizeLimit?: number;
|
||||
allowedExtensions?: string[];
|
||||
checkExtension?: (extension: string) => string | null;
|
||||
disabled: boolean;
|
||||
};
|
||||
onFileUpload: (file: File) => Promise<void>;
|
||||
onFileError?: (errMsg: string) => void;
|
||||
}
|
||||
|
||||
const DEFAULT_INPUT_ID = "fileInput";
|
||||
const DEFAULT_FILE_SIZE_LIMIT = 1024 * 1024 * 50; // 50 MB
|
||||
|
||||
export default function FileUploader({
|
||||
config,
|
||||
onFileUpload,
|
||||
onFileError,
|
||||
}: FileUploaderProps) {
|
||||
const [uploading, setUploading] = useState(false);
|
||||
|
||||
const inputId = config?.inputId || DEFAULT_INPUT_ID;
|
||||
const fileSizeLimit = config?.fileSizeLimit || DEFAULT_FILE_SIZE_LIMIT;
|
||||
const allowedExtensions = config?.allowedExtensions;
|
||||
const defaultCheckExtension = (extension: string) => {
|
||||
if (allowedExtensions && !allowedExtensions.includes(extension)) {
|
||||
return `Invalid file type. Please select a file with one of these formats: ${allowedExtensions!.join(
|
||||
",",
|
||||
)}`;
|
||||
}
|
||||
return null;
|
||||
};
|
||||
const checkExtension = config?.checkExtension ?? defaultCheckExtension;
|
||||
|
||||
const isFileSizeExceeded = (file: File) => {
|
||||
return file.size > fileSizeLimit;
|
||||
};
|
||||
|
||||
const resetInput = () => {
|
||||
const fileInput = document.getElementById(inputId) as HTMLInputElement;
|
||||
fileInput.value = "";
|
||||
};
|
||||
|
||||
const onFileChange = async (e: ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
setUploading(true);
|
||||
await handleUpload(file);
|
||||
resetInput();
|
||||
setUploading(false);
|
||||
};
|
||||
|
||||
const handleUpload = async (file: File) => {
|
||||
const onFileUploadError = onFileError || window.alert;
|
||||
const fileExtension = file.name.split(".").pop() || "";
|
||||
const extensionFileError = checkExtension(fileExtension);
|
||||
if (extensionFileError) {
|
||||
return onFileUploadError(extensionFileError);
|
||||
}
|
||||
|
||||
if (isFileSizeExceeded(file)) {
|
||||
return onFileUploadError(
|
||||
`File size exceeded. Limit is ${fileSizeLimit / 1024 / 1024} MB`,
|
||||
);
|
||||
}
|
||||
|
||||
await onFileUpload(file);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="self-stretch">
|
||||
<input
|
||||
type="file"
|
||||
id={inputId}
|
||||
style={{ display: "none" }}
|
||||
onChange={onFileChange}
|
||||
accept={allowedExtensions?.join(",")}
|
||||
disabled={config?.disabled || uploading}
|
||||
/>
|
||||
<label
|
||||
htmlFor={inputId}
|
||||
className={cn(
|
||||
buttonVariants({ variant: "secondary", size: "icon" }),
|
||||
"cursor-pointer",
|
||||
uploading && "opacity-50",
|
||||
)}
|
||||
>
|
||||
{uploading ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<Paperclip className="-rotate-45 w-4 h-4" />
|
||||
)}
|
||||
</label>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
"use client";
|
||||
|
||||
import * as ProgressPrimitive from "@radix-ui/react-progress";
|
||||
import * as React from "react";
|
||||
import { cn } from "./lib/utils";
|
||||
|
||||
const Progress = React.forwardRef<
|
||||
React.ElementRef<typeof ProgressPrimitive.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
|
||||
>(({ className, value, ...props }, ref) => (
|
||||
<ProgressPrimitive.Root
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative h-4 w-full overflow-hidden rounded-full bg-secondary",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ProgressPrimitive.Indicator
|
||||
className="h-full w-full flex-1 bg-primary transition-all"
|
||||
style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
|
||||
/>
|
||||
</ProgressPrimitive.Root>
|
||||
));
|
||||
Progress.displayName = ProgressPrimitive.Root.displayName;
|
||||
|
||||
export { Progress };
|
||||
@@ -1,32 +0,0 @@
|
||||
import { XCircleIcon } from "lucide-react";
|
||||
import Image from "next/image";
|
||||
import { cn } from "./lib/utils";
|
||||
|
||||
export default function UploadImagePreview({
|
||||
url,
|
||||
onRemove,
|
||||
}: {
|
||||
url: string;
|
||||
onRemove: () => void;
|
||||
}) {
|
||||
return (
|
||||
<div className="relative w-20 h-20 group">
|
||||
<Image
|
||||
src={url}
|
||||
alt="Uploaded image"
|
||||
fill
|
||||
className="object-cover w-full h-full rounded-xl hover:brightness-75"
|
||||
/>
|
||||
<div
|
||||
className={cn(
|
||||
"absolute -top-2 -right-2 w-6 h-6 z-10 bg-gray-500 text-white rounded-full hidden group-hover:block",
|
||||
)}
|
||||
>
|
||||
<XCircleIcon
|
||||
className="w-6 h-6 bg-gray-500 text-white rounded-full"
|
||||
onClick={onRemove}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,7 +1,6 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Inter } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import "./markdown.css";
|
||||
|
||||
const inter = Inter({ subsets: ["latin"] });
|
||||
|
||||
|
||||
@@ -1,79 +0,0 @@
|
||||
/* Custom CSS for chat message markdown */
|
||||
.custom-markdown ul {
|
||||
list-style-type: disc;
|
||||
margin-left: 20px;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.custom-markdown ol {
|
||||
list-style-type: decimal;
|
||||
margin-left: 20px;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.custom-markdown li {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.custom-markdown ol ol {
|
||||
list-style: lower-alpha;
|
||||
}
|
||||
|
||||
.custom-markdown ul ul,
|
||||
.custom-markdown ol ol {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.custom-markdown img {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.custom-markdown a {
|
||||
text-decoration: underline;
|
||||
color: #007bff;
|
||||
}
|
||||
|
||||
.custom-markdown h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: bold;
|
||||
margin-bottom: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.custom-markdown h6 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.custom-markdown h5 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.custom-markdown h4 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.custom-markdown h3 {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.custom-markdown h2 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.custom-markdown h1 {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.custom-markdown hr {
|
||||
border: 0;
|
||||
border-top: 1px solid #e1e4e8;
|
||||
margin: 20px 0;
|
||||
}
|
||||
@@ -1 +1,2 @@
|
||||
// TODO: You can add observability here. For templates re-start `create-llama` with `--pro` flag to generate a new project with observability.
|
||||
export const initObservability = () => {};
|
||||
|
||||
+16
-15
@@ -1,17 +1,18 @@
|
||||
{
|
||||
"experimental": {
|
||||
"outputFileTracingIncludes": {
|
||||
"/*": [
|
||||
"./cache/**/*"
|
||||
]
|
||||
},
|
||||
"outputFileTracingExcludes": {
|
||||
"/api/files/*": [
|
||||
".next/**/*",
|
||||
"node_modules/**/*",
|
||||
"public/**/*",
|
||||
"app/**/*"
|
||||
]
|
||||
}
|
||||
}
|
||||
"outputFileTracingIncludes": {
|
||||
"/*": [
|
||||
"./cache/**/*"
|
||||
]
|
||||
},
|
||||
"outputFileTracingExcludes": {
|
||||
"/api/files/*": [
|
||||
".next/**/*",
|
||||
"node_modules/**/*",
|
||||
"public/**/*",
|
||||
"app/**/*"
|
||||
]
|
||||
},
|
||||
"transpilePackages": [
|
||||
"highlight.js"
|
||||
]
|
||||
}
|
||||
|
||||
+14
-18
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "rag",
|
||||
"name": "latest-1411",
|
||||
"version": "0.1.0",
|
||||
"scripts": {
|
||||
"format": "prettier --ignore-unknown --cache --check .",
|
||||
@@ -13,13 +13,13 @@
|
||||
"dependencies": {
|
||||
"@apidevtools/swagger-parser": "^10.1.0",
|
||||
"@e2b/code-interpreter": "0.0.9-beta.3",
|
||||
"@llamaindex/core": "^0.2.6",
|
||||
"@llamaindex/pdf-viewer": "^1.1.3",
|
||||
"@radix-ui/react-collapsible": "^1.0.3",
|
||||
"@radix-ui/react-hover-card": "^1.0.7",
|
||||
"@radix-ui/react-progress": "^1.1.0",
|
||||
"@radix-ui/react-select": "^2.1.1",
|
||||
"@radix-ui/react-slot": "^1.0.2",
|
||||
"@radix-ui/react-tabs": "^1.1.0",
|
||||
"@llamaindex/chat-ui": "0.0.7",
|
||||
"ai": "3.3.42",
|
||||
"ajv": "^8.12.0",
|
||||
"class-variance-authority": "^0.7.0",
|
||||
@@ -28,35 +28,31 @@
|
||||
"duck-duck-scrape": "^2.2.5",
|
||||
"formdata-node": "^6.0.3",
|
||||
"got": "^14.4.1",
|
||||
"llamaindex": "0.6.22",
|
||||
"llamaindex": "0.8.2",
|
||||
"lucide-react": "^0.294.0",
|
||||
"next": "^14.2.4",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-markdown": "^8.0.7",
|
||||
"rehype-katex": "^7.0.0",
|
||||
"remark": "^14.0.3",
|
||||
"remark-code-import": "^1.2.0",
|
||||
"remark-gfm": "^3.0.1",
|
||||
"remark-math": "^5.1.1",
|
||||
"next": "^15.0.3",
|
||||
"react": "19.0.0-rc-5c56b873-20241107",
|
||||
"react-dom": "19.0.0-rc-5c56b873-20241107",
|
||||
"papaparse": "^5.4.1",
|
||||
"supports-color": "^8.1.1",
|
||||
"tailwind-merge": "^2.1.0",
|
||||
"tiktoken": "^1.0.15",
|
||||
"uuid": "^9.0.1",
|
||||
"vaul": "^0.9.1",
|
||||
"marked": "^14.1.2",
|
||||
"highlight.js": "^11.10.0"
|
||||
"marked": "^14.1.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^20.10.3",
|
||||
"@types/react": "^18.2.42",
|
||||
"@types/react-dom": "^18.2.17",
|
||||
"@types/uuid": "^9.0.8",
|
||||
"@llamaindex/workflow": "^0.0.3",
|
||||
"@types/papaparse": "^5.3.15",
|
||||
"autoprefixer": "^10.4.16",
|
||||
"cross-env": "^7.0.3",
|
||||
"eslint": "^8.55.0",
|
||||
"eslint-config-next": "^14.2.4",
|
||||
"eslint-config-prettier": "^8.10.0",
|
||||
"eslint": "^9.14.0",
|
||||
"eslint-config-next": "^15.0.3",
|
||||
"eslint-config-prettier": "^9.1.0",
|
||||
"postcss": "^8.4.32",
|
||||
"prettier": "^3.2.5",
|
||||
"prettier-plugin-organize-imports": "^3.2.4",
|
||||
|
||||
Generated
+11341
File diff suppressed because it is too large
Load Diff
+5
-1
@@ -3,7 +3,11 @@ import { fontFamily } from "tailwindcss/defaultTheme";
|
||||
|
||||
const config: Config = {
|
||||
darkMode: ["class"],
|
||||
content: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}"],
|
||||
content: [
|
||||
"app/**/*.{ts,tsx}",
|
||||
"components/**/*.{ts,tsx}",
|
||||
"node_modules/@llamaindex/chat-ui/**/*.{ts,tsx}",
|
||||
],
|
||||
theme: {
|
||||
container: {
|
||||
center: true,
|
||||
|
||||
+2
-1
@@ -19,7 +19,8 @@
|
||||
],
|
||||
"paths": {
|
||||
"@/*": ["./*"]
|
||||
}
|
||||
},
|
||||
"target": "ES2017"
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
||||
"exclude": ["node_modules"]
|
||||
|
||||
Reference in New Issue
Block a user