@copilotkit/react-core
Advanced tools
Comparing version
# ui | ||
## 0.4.0 | ||
### Minor Changes | ||
- first beta release | ||
## 0.3.0 | ||
@@ -4,0 +10,0 @@ |
@@ -1,55 +0,10 @@ | ||
import React$1, { ReactNode } from 'react'; | ||
import { ChatCompletionFunctions } from 'openai-edge/types/api'; | ||
import { FunctionCallHandler, UseChatOptions, Message, CreateMessage, ChatRequestOptions } from 'ai'; | ||
declare function CopilotProvider({ children }: { | ||
children: ReactNode; | ||
}): JSX.Element; | ||
interface AnnotatedFunctionArgument { | ||
name: string; | ||
type: string; | ||
description: string; | ||
allowedValues?: any[]; | ||
required: boolean; | ||
} | ||
interface AnnotatedFunction<Inputs extends any[]> { | ||
name: string; | ||
description: string; | ||
argumentAnnotations: AnnotatedFunctionArgument[]; | ||
implementation: (...args: Inputs) => Promise<void>; | ||
} | ||
type TreeNodeId = string; | ||
interface CopilotContextParams { | ||
entryPoints: Record<string, AnnotatedFunction<any[]>>; | ||
getChatCompletionFunctions: () => ChatCompletionFunctions[]; | ||
getFunctionCallHandler: () => FunctionCallHandler; | ||
setEntryPoint: (id: string, entryPoint: AnnotatedFunction<any[]>) => void; | ||
removeEntryPoint: (id: string) => void; | ||
getContextString: () => string; | ||
addContext: (context: string, parentId?: string) => TreeNodeId; | ||
removeContext: (id: TreeNodeId) => void; | ||
} | ||
declare const CopilotContext: React$1.Context<CopilotContextParams>; | ||
interface UseCopilotChatOptions extends UseChatOptions { | ||
makeSystemMessage?: (contextString: string) => string; | ||
} | ||
interface UseCopilotChatReturn { | ||
visibleMessages: Message[]; | ||
append: (message: Message | CreateMessage, chatRequestOptions?: ChatRequestOptions) => Promise<string | null | undefined>; | ||
reload: (chatRequestOptions?: ChatRequestOptions) => Promise<string | null | undefined>; | ||
stop: () => void; | ||
isLoading: boolean; | ||
input: string; | ||
setInput: React.Dispatch<React.SetStateAction<string>>; | ||
} | ||
declare function useCopilotChat({ makeSystemMessage, ...options }: UseCopilotChatOptions): UseCopilotChatReturn; | ||
declare function useMakeCopilotActionable<ActionInput extends any[]>(annotatedFunction: AnnotatedFunction<ActionInput>, dependencies: any[]): void; | ||
declare function useMakeCopilotReadable(information: string, parentId?: string): string | undefined; | ||
export { AnnotatedFunction, AnnotatedFunctionArgument, CopilotContext, CopilotContextParams, CopilotProvider, UseCopilotChatOptions, UseCopilotChatReturn, useCopilotChat, useMakeCopilotActionable, useMakeCopilotReadable }; | ||
export { CopilotProvider } from './components/copilot-provider.js'; | ||
export { CopilotContext, CopilotContextParams } from './context/copilot-context.js'; | ||
export { UseCopilotChatOptions, UseCopilotChatReturn, useCopilotChat } from './hooks/use-copilot-chat.js'; | ||
export { useMakeCopilotActionable } from './hooks/use-make-copilot-actionable.js'; | ||
export { useMakeCopilotReadable } from './hooks/use-make-copilot-readable.js'; | ||
export { AnnotatedFunction, AnnotatedFunctionArgument } from './types/annotated-function.js'; | ||
import 'react'; | ||
import './hooks/use-tree.js'; | ||
import 'openai-edge/types/api'; | ||
import 'ai'; |
@@ -7,5 +7,5 @@ { | ||
}, | ||
"version": "0.3.0", | ||
"version": "0.4.0", | ||
"sideEffects": false, | ||
"main": "./dist/index.mjs", | ||
"main": "./dist/index.js", | ||
"module": "./dist/index.mjs", | ||
@@ -22,9 +22,9 @@ "exports": "./dist/index.mjs", | ||
"react": "^18.2.0", | ||
"tsup": "^6.1.3", | ||
"tsup": "^6.5.0", | ||
"typescript": "^4.9.4", | ||
"eslint-config-custom": "0.1.0", | ||
"tsconfig": "0.1.0" | ||
"tsconfig": "0.2.0", | ||
"eslint-config-custom": "0.1.0" | ||
}, | ||
"dependencies": { | ||
"ai": "^2.1.19", | ||
"ai": "^2.1.22", | ||
"nanoid": "^4.0.2", | ||
@@ -34,4 +34,4 @@ "openai-edge": "^1.2.0" | ||
"scripts": { | ||
"build": "tsup src/index.tsx --format esm,cjs --dts --external react", | ||
"dev": "tsup src/index.tsx --format esm,cjs --dts --external react --watch", | ||
"build": "tsup --treeshake", | ||
"dev": "tsup --watch --no-splitting", | ||
"check-types": "tsc --noEmit", | ||
@@ -38,0 +38,0 @@ "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist && rm -rf .next" |
@@ -1,1 +0,1 @@ | ||
export { CopilotProvider } from './copilot-provider' | ||
export { CopilotProvider } from "./copilot-provider"; |
@@ -1,2 +0,2 @@ | ||
export { CopilotContext } from './copilot-context' | ||
export type { CopilotContextParams } from './copilot-context' | ||
export { CopilotContext } from "./copilot-context"; | ||
export type { CopilotContextParams } from "./copilot-context"; |
@@ -1,6 +0,6 @@ | ||
export { useCopilotChat } from './use-copilot-chat' | ||
export type { UseCopilotChatOptions } from './use-copilot-chat' | ||
export type { UseCopilotChatReturn } from './use-copilot-chat' | ||
export { useCopilotChat } from "./use-copilot-chat"; | ||
export type { UseCopilotChatOptions } from "./use-copilot-chat"; | ||
export type { UseCopilotChatReturn } from "./use-copilot-chat"; | ||
export { useMakeCopilotActionable } from './use-make-copilot-actionable' | ||
export { useMakeCopilotReadable } from './use-make-copilot-readable' | ||
export { useMakeCopilotActionable } from "./use-make-copilot-actionable"; | ||
export { useMakeCopilotReadable } from "./use-make-copilot-readable"; |
@@ -1,27 +0,27 @@ | ||
import { useMemo, useContext } from 'react' | ||
import { useMemo, useContext } from "react"; | ||
import { | ||
CopilotContext, | ||
CopilotContextParams | ||
} from '../context/copilot-context' | ||
import { useChat } from 'ai/react' | ||
import { ChatRequestOptions, CreateMessage, Message } from 'ai' | ||
import { UseChatOptions } from 'ai' | ||
CopilotContextParams, | ||
} from "../context/copilot-context"; | ||
import { useChat } from "ai/react"; | ||
import { ChatRequestOptions, CreateMessage, Message } from "ai"; | ||
import { UseChatOptions } from "ai"; | ||
export interface UseCopilotChatOptions extends UseChatOptions { | ||
makeSystemMessage?: (contextString: string) => string | ||
makeSystemMessage?: (contextString: string) => string; | ||
} | ||
export interface UseCopilotChatReturn { | ||
visibleMessages: Message[] | ||
visibleMessages: Message[]; | ||
append: ( | ||
message: Message | CreateMessage, | ||
chatRequestOptions?: ChatRequestOptions | ||
) => Promise<string | null | undefined> | ||
) => Promise<string | null | undefined>; | ||
reload: ( | ||
chatRequestOptions?: ChatRequestOptions | ||
) => Promise<string | null | undefined> | ||
stop: () => void | ||
isLoading: boolean | ||
input: string | ||
setInput: React.Dispatch<React.SetStateAction<string>> | ||
) => Promise<string | null | undefined>; | ||
stop: () => void; | ||
isLoading: boolean; | ||
input: string; | ||
setInput: React.Dispatch<React.SetStateAction<string>>; | ||
} | ||
@@ -35,24 +35,24 @@ | ||
getContextString, | ||
getChatCompletionFunctions, | ||
getFunctionCallHandler | ||
} = useContext(CopilotContext) | ||
getChatCompletionFunctionDescriptions, | ||
getFunctionCallHandler, | ||
} = useContext(CopilotContext); | ||
const systemMessage: Message = useMemo(() => { | ||
const systemMessageMaker = makeSystemMessage || defaultSystemMessage | ||
const contextString = getContextString() | ||
const systemMessageMaker = makeSystemMessage || defaultSystemMessage; | ||
const contextString = getContextString(); | ||
return { | ||
id: 'system', | ||
id: "system", | ||
content: systemMessageMaker(contextString), | ||
role: 'system' | ||
} | ||
}, [getContextString, makeSystemMessage]) | ||
role: "system", | ||
}; | ||
}, [getContextString, makeSystemMessage]); | ||
const initialMessagesWithContext = [systemMessage].concat( | ||
options.initialMessages || [] | ||
) | ||
); | ||
const functions = useMemo(() => { | ||
return getChatCompletionFunctions() | ||
}, [getChatCompletionFunctions]) | ||
const functionDescriptions = useMemo(() => { | ||
return getChatCompletionFunctionDescriptions(); | ||
}, [getChatCompletionFunctionDescriptions]); | ||
@@ -67,9 +67,9 @@ const { messages, append, reload, stop, isLoading, input, setInput } = | ||
previewToken, | ||
functions | ||
} | ||
}) | ||
copilotkit_manually_passed_function_descriptions: functionDescriptions, | ||
}, | ||
}); | ||
const visibleMessages = messages.filter( | ||
message => message.role === 'user' || message.role === 'assistant' | ||
) | ||
(message) => message.role === "user" || message.role === "assistant" | ||
); | ||
@@ -83,12 +83,13 @@ return { | ||
input, | ||
setInput | ||
} | ||
setInput, | ||
}; | ||
} | ||
const previewToken = 'TODO123' | ||
const previewToken = "TODO123"; | ||
export function defaultSystemMessage(contextString: string): string { | ||
return ` | ||
Please act as a efficient, competent, and conscientious professional assistant. | ||
You help the user achieve their goals, and you do so in a way that is as efficient as possible, without unnecessary fluff, but also without sacrificing professionalism. | ||
Please act as an efficient, competent, conscientious, and industrious professional assistant. | ||
Help the user achieve their goals, and you do so in a way that is as efficient as possible, without unnecessary fluff, but also without sacrificing professionalism. | ||
Always be polite and respectful, and prefer brevity over verbosity. | ||
@@ -104,4 +105,7 @@ | ||
Please assist them as best you can. | ||
If you are not sure how to proceed to best fulfill their requests, please ask them for more information. | ||
` | ||
You can ask them for clarifying questions if needed, but don't be annoying about it. If you can reasonably 'fill in the blanks' yourself, do so. | ||
If you would like to call a function, call it without saying anything else. | ||
`; | ||
} |
@@ -1,7 +0,7 @@ | ||
'use client' | ||
"use client"; | ||
import { useRef, useContext, useEffect, useMemo } from 'react' | ||
import { CopilotContext } from '../context/copilot-context' | ||
import { AnnotatedFunction } from '../types/annotated-function' | ||
import { nanoid } from 'nanoid' | ||
import { useRef, useContext, useEffect, useMemo } from "react"; | ||
import { CopilotContext } from "../context/copilot-context"; | ||
import { AnnotatedFunction } from "../types/annotated-function"; | ||
import { nanoid } from "nanoid"; | ||
@@ -12,4 +12,4 @@ export function useMakeCopilotActionable<ActionInput extends any[]>( | ||
) { | ||
const idRef = useRef(nanoid()) // generate a unique id | ||
const { setEntryPoint, removeEntryPoint } = useContext(CopilotContext) | ||
const idRef = useRef(nanoid()); // generate a unique id | ||
const { setEntryPoint, removeEntryPoint } = useContext(CopilotContext); | ||
@@ -21,6 +21,6 @@ const memoizedAnnotatedFunction: AnnotatedFunction<ActionInput> = useMemo( | ||
argumentAnnotations: annotatedFunction.argumentAnnotations, | ||
implementation: annotatedFunction.implementation | ||
implementation: annotatedFunction.implementation, | ||
}), | ||
dependencies | ||
) | ||
); | ||
@@ -31,8 +31,8 @@ useEffect(() => { | ||
memoizedAnnotatedFunction as AnnotatedFunction<any[]> | ||
) | ||
); | ||
return () => { | ||
removeEntryPoint(idRef.current) | ||
} | ||
}, [memoizedAnnotatedFunction, setEntryPoint, removeEntryPoint]) | ||
removeEntryPoint(idRef.current); | ||
}; | ||
}, [memoizedAnnotatedFunction, setEntryPoint, removeEntryPoint]); | ||
} |
@@ -1,5 +0,5 @@ | ||
'use client' | ||
"use client"; | ||
import { useRef, useContext, useEffect } from 'react' | ||
import { CopilotContext } from '../context/copilot-context' | ||
import { useRef, useContext, useEffect } from "react"; | ||
import { CopilotContext } from "../context/copilot-context"; | ||
@@ -10,15 +10,15 @@ export function useMakeCopilotReadable( | ||
): string | undefined { | ||
const { addContext, removeContext } = useContext(CopilotContext) | ||
const idRef = useRef<string>() | ||
const { addContext, removeContext } = useContext(CopilotContext); | ||
const idRef = useRef<string>(); | ||
useEffect(() => { | ||
const id = addContext(information, parentId) | ||
idRef.current = id | ||
const id = addContext(information, parentId); | ||
idRef.current = id; | ||
return () => { | ||
removeContext(id) | ||
} | ||
}, [information, parentId, addContext, removeContext]) | ||
removeContext(id); | ||
}; | ||
}, [information, parentId, addContext, removeContext]); | ||
return idRef.current | ||
return idRef.current; | ||
} |
@@ -1,20 +0,20 @@ | ||
import { nanoid } from 'nanoid' | ||
import { useReducer, useCallback } from 'react' | ||
import { nanoid } from "nanoid"; | ||
import { useReducer, useCallback } from "react"; | ||
export type TreeNodeId = string | ||
export type TreeNodeId = string; | ||
export interface TreeNode { | ||
id: TreeNodeId | ||
value: string | ||
children: TreeNode[] | ||
parentId?: TreeNodeId | ||
id: TreeNodeId; | ||
value: string; | ||
children: TreeNode[]; | ||
parentId?: TreeNodeId; | ||
} | ||
export type Tree = TreeNode[] | ||
export type Tree = TreeNode[]; | ||
export interface UseTreeReturn { | ||
tree: Tree | ||
addElement: (value: string, parentId?: TreeNodeId) => TreeNodeId | ||
printTree: () => string | ||
removeElement: (id: TreeNodeId) => void | ||
tree: Tree; | ||
addElement: (value: string, parentId?: TreeNodeId) => TreeNodeId; | ||
printTree: () => string; | ||
removeElement: (id: TreeNodeId) => void; | ||
} | ||
@@ -25,11 +25,11 @@ | ||
if (node.id === id) { | ||
return node | ||
return node; | ||
} | ||
const result = findNode(node.children, id) | ||
const result = findNode(node.children, id); | ||
if (result) { | ||
return result | ||
return result; | ||
} | ||
} | ||
return undefined | ||
} | ||
return undefined; | ||
}; | ||
@@ -39,9 +39,27 @@ const removeNode = (nodes: Tree, id: TreeNodeId): Tree => { | ||
if (node.id !== id) { | ||
const newNode = { ...node, children: removeNode(node.children, id) } | ||
result.push(newNode) | ||
const newNode = { ...node, children: removeNode(node.children, id) }; | ||
result.push(newNode); | ||
} | ||
return result | ||
}, []) | ||
} | ||
return result; | ||
}, []); | ||
}; | ||
const addNode = ( | ||
nodes: Tree, | ||
newNode: TreeNode, | ||
parentId?: TreeNodeId | ||
): Tree => { | ||
if (!parentId) { | ||
return [...nodes, newNode]; | ||
} | ||
return nodes.map((node) => { | ||
if (node.id === parentId) { | ||
return { ...node, children: [...node.children, newNode] }; | ||
} else if (node.children.length) { | ||
return { ...node, children: addNode(node.children, newNode, parentId) }; | ||
} | ||
return node; | ||
}); | ||
}; | ||
const treeIndentationRepresentation = ( | ||
@@ -52,29 +70,29 @@ index: number, | ||
if (indentLevel === 0) { | ||
return (index + 1).toString() | ||
return (index + 1).toString(); | ||
} else if (indentLevel === 1) { | ||
return String.fromCharCode(65 + index) // 65 is the ASCII value for 'A' | ||
return String.fromCharCode(65 + index); // 65 is the ASCII value for 'A' | ||
} else if (indentLevel === 2) { | ||
return String.fromCharCode(97 + index) // 97 is the ASCII value for 'a' | ||
return String.fromCharCode(97 + index); // 97 is the ASCII value for 'a' | ||
} else { | ||
throw new Error('Indentation level not supported') | ||
throw new Error("Indentation level not supported"); | ||
} | ||
} | ||
}; | ||
const printNode = (node: TreeNode, prefix = '', indentLevel = 0): string => { | ||
const indent = ' '.repeat(3).repeat(indentLevel) | ||
const printNode = (node: TreeNode, prefix = "", indentLevel = 0): string => { | ||
const indent = " ".repeat(3).repeat(indentLevel); | ||
const prefixPlusIndentLength = prefix.length + indent.length | ||
const subsequentLinesPrefix = ' '.repeat(prefixPlusIndentLength) | ||
const prefixPlusIndentLength = prefix.length + indent.length; | ||
const subsequentLinesPrefix = " ".repeat(prefixPlusIndentLength); | ||
const valueLines = node.value.split('\n') | ||
const valueLines = node.value.split("\n"); | ||
const outputFirstLine = `${indent}${prefix}${valueLines[0]}` | ||
const outputFirstLine = `${indent}${prefix}${valueLines[0]}`; | ||
const outputSubsequentLines = valueLines | ||
.slice(1) | ||
.map(line => `${subsequentLinesPrefix}${line}`) | ||
.join('\n') | ||
.map((line) => `${subsequentLinesPrefix}${line}`) | ||
.join("\n"); | ||
let output = `${outputFirstLine}\n` | ||
let output = `${outputFirstLine}\n`; | ||
if (outputSubsequentLines) { | ||
output += `${outputSubsequentLines}\n` | ||
output += `${outputSubsequentLines}\n`; | ||
} | ||
@@ -89,10 +107,10 @@ | ||
)) | ||
) | ||
return output | ||
} | ||
); | ||
return output; | ||
}; | ||
// Action types | ||
type Action = | ||
| { type: 'ADD_NODE'; value: string; parentId?: string; id: string } | ||
| { type: 'REMOVE_NODE'; id: string } | ||
| { type: "ADD_NODE"; value: string; parentId?: string; id: string } | ||
| { type: "REMOVE_NODE"; id: string }; | ||
@@ -102,28 +120,21 @@ // Reducer function | ||
switch (action.type) { | ||
case 'ADD_NODE': { | ||
const { value, parentId, id: newNodeId } = action | ||
case "ADD_NODE": { | ||
const { value, parentId, id: newNodeId } = action; | ||
const newNode: TreeNode = { | ||
id: newNodeId, | ||
value, | ||
children: [] | ||
} | ||
children: [], | ||
}; | ||
if (parentId) { | ||
const parent = findNode(state, parentId) | ||
if (parent) { | ||
newNode.parentId = parentId | ||
parent.children.push(newNode) | ||
} else { | ||
throw new Error(`Parent with id ${parentId} not found`) | ||
} | ||
} else { | ||
return [...state, newNode] | ||
try { | ||
return addNode(state, newNode, parentId); | ||
} catch (error) { | ||
console.error(`Error while adding node with id ${newNodeId}: ${error}`); | ||
return state; | ||
} | ||
return state | ||
} | ||
case 'REMOVE_NODE': | ||
return removeNode(state, action.id) | ||
case "REMOVE_NODE": | ||
return removeNode(state, action.id); | ||
default: | ||
return state | ||
return state; | ||
} | ||
@@ -134,19 +145,19 @@ } | ||
const useTree = (): UseTreeReturn => { | ||
const [tree, dispatch] = useReducer(treeReducer, []) | ||
const [tree, dispatch] = useReducer(treeReducer, []); | ||
const addElement = useCallback( | ||
(value: string, parentId?: string): TreeNodeId => { | ||
const newNodeId = nanoid() // Generate new ID outside of dispatch | ||
dispatch({ type: 'ADD_NODE', value, parentId, id: newNodeId }) | ||
return newNodeId // Return the new ID | ||
const newNodeId = nanoid(); // Generate new ID outside of dispatch | ||
dispatch({ type: "ADD_NODE", value, parentId, id: newNodeId }); | ||
return newNodeId; // Return the new ID | ||
}, | ||
[] | ||
) | ||
); | ||
const removeElement = useCallback((id: TreeNodeId): void => { | ||
dispatch({ type: 'REMOVE_NODE', id }) | ||
}, []) | ||
dispatch({ type: "REMOVE_NODE", id }); | ||
}, []); | ||
const printTree = (): string => { | ||
let output = '' | ||
let output = ""; | ||
tree.forEach( | ||
@@ -158,9 +169,9 @@ (node, index) => | ||
)) | ||
) | ||
return output | ||
} | ||
); | ||
return output; | ||
}; | ||
return { tree, addElement, printTree, removeElement } | ||
} | ||
return { tree, addElement, printTree, removeElement }; | ||
}; | ||
export default useTree | ||
export default useTree; |
@@ -1,14 +0,27 @@ | ||
export interface AnnotatedFunctionArgument { | ||
name: string | ||
type: string | ||
description: string | ||
allowedValues?: any[] | ||
required: boolean | ||
export interface AnnotatedFunctionSimpleArgument { | ||
name: string; | ||
type: "string" | "number" | "boolean" | "object"; // Add or change types according to your needs. | ||
description: string; | ||
required: boolean; | ||
} | ||
export interface AnnotatedFunctionArrayArgument { | ||
name: string; | ||
type: "array"; | ||
items: { | ||
type: string; | ||
}; | ||
description: string; | ||
required: boolean; | ||
} | ||
export type AnnotatedFunctionArgument = | ||
| AnnotatedFunctionSimpleArgument | ||
| AnnotatedFunctionArrayArgument; | ||
export interface AnnotatedFunction<Inputs extends any[]> { | ||
name: string | ||
description: string | ||
argumentAnnotations: AnnotatedFunctionArgument[] | ||
implementation: (...args: Inputs) => Promise<void> | ||
name: string; | ||
description: string; | ||
argumentAnnotations: AnnotatedFunctionArgument[]; | ||
implementation: (...args: Inputs) => Promise<void>; | ||
} |
@@ -1,2 +0,2 @@ | ||
export type { AnnotatedFunctionArgument } from './annotated-function' | ||
export type { AnnotatedFunction } from './annotated-function' | ||
export type { AnnotatedFunctionArgument } from "./annotated-function"; | ||
export type { AnnotatedFunction } from "./annotated-function"; |
import { defineConfig, Options } from "tsup"; | ||
export default defineConfig((options: Options) => ({ | ||
treeshake: true, | ||
splitting: true, | ||
entry: ["src/**/*.tsx"], | ||
entry: ["src/**/*.{ts,tsx}"], | ||
format: ["esm"], | ||
dts: true, | ||
minify: true, | ||
minify: false, | ||
clean: true, | ||
external: ["react"], | ||
sourcemap: true, | ||
...options, | ||
})); | ||
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 2 instances in 1 package
69270
121.8%76
280%1088
77.2%2
-50%Updated