copilotkit__copilotkit/WIP.md

• Where is vercel used?
  • FunctionCallHandler definition:
    • react-core/src/components/copilot-provider/copilot-provider.tsx
    • react-core/src/context/copilot-context.tsx
  • useChat:
    • react-core/src/hooks/use-copilot-chat.ts
    • react-ui/src/components/chat-components/chat-panel.tsx
    • react-ui/src/components/chat-components/default-empty-screen.tsx
    • react-ui/src/components/chat-components/prompt-form.tsx
  • Message type:
    • react-ui/src/components/chat-components/chat-list.tsx
    • react-ui/src/components/chat-components/chat-message-actions.tsx
    • react-ui/src/components/chat-components/chat-message.tsx
    • react-ui/src/types/types.ts
• What is vercel used for?
  • useChat
  • type definitions
• How can we replace useChat?
  • what are the parameters?
    • options (comes from useCopilotChat, possibly not used)
    • api (url)
    • id (a random id)
    • initialMessages (Message[], not updated by useChat!!)
    • experimental_onFunctionCall (function call handler)
    • headers (copilotApiConfig.headers + options.headers)
    • body (id, function descriptions, copilotApiConfig.body, additional body parameters copilotApiConfig.body + options.body)
  • what are the return values?
    • messages (Message[])
    • append (submit the message)
    • reload (regenerate the last message)
    • stop (stop generating)
    • isLoading (is a response pending)
    • input (just a setState/string)
    • setInput (just a setState/string)

const { messages, append, reload, stop, isLoading, input, setInput } = useChat({
  ...options,
  api: copilotApiConfigExtrapolator(copilotApiConfig).chatApiEndpoint,
  id: options.id,
  initialMessages: initialMessagesWithContext,
  experimental_onFunctionCall: getFunctionCallHandler(),
  headers: { ...copilotApiConfig.headers, ...options.headers },
  body: {
    id: options.id,
    ...(functionDescriptions.length > 0 && { functions: functionDescriptions }),
    ...copilotApiConfig.body,
    ...options.body,
  },
});

• Read the BeakJs source code to get more insights
• How to handle messages / changes to messages?
  • how does BeakJs do it?
• Where to put the network communication?
• ChatCompletion must send extra parameters
  • also headers
• What is OpenAIMessage, OpenAIFunction and how does it relate to Message/Function Calls?
  • OpenAIMessage, OpenAIFunction from BeakJs
    • What we send to OpenAI
    • OpenAIFunction is the function definition
    • FunctionCall is the call of the function in the message
• ChatCompletion must be integrated with useChat
  • It must handle function calling
  • It must handle streaming too
• replace Vercel everywhere
  • Also on the server side
  • Bring back API keys - NO!
• User message does not show up
• Make it run
• Implement a utility that turns into ReadableStream
• Implement stop()
• Check for the length of messages server side!
• Delete this file