Merge pull request openai#11 from akkadaska/feature/codeinterpreter-o…

…utput-integration

Integrate codeInterpreter output: fix file download link and display images in chat

app/api/files/[fileId]/route.ts

@@ -0,0 +1,14 @@
+import { openai } from "@/app/openai";
+
+// download file by file ID
+export async function GET(_request, { params: { fileId } }) {
+ const [file, fileContent] = await Promise.all([
+ openai.files.retrieve(fileId),
+ openai.files.content(fileId),
+ ]);
+ return new Response(fileContent.body, {
+ headers: {
+ "Content-Disposition": `attachment; filename="${file.filename}"`,
+ },
+ });
+}

app/components/chat.module.css

@@ -60,6 +60,13 @@
  align-self: flex-start;
  border-radius: 15px;
  max-width: 80%;
+ overflow-wrap: break-word;
+}
+
+.assistantMessage img {
+ max-width: 100%;
+ margin: 8px 0px 8px 0px;
+ border-radius: 8px;
 }
 
 .userMessage {

app/components/chat.tsx

@@ -140,9 +140,19 @@ const Chat = ({
 
  // textDelta - append text to last assistant message
  const handleTextDelta = (delta) => {
- appendToLastMessage(delta.value);
+ if (delta.value != null) {
+ appendToLastMessage(delta.value);
+ };
+ if (delta.annotations != null) {
+ annotateLastMessage(delta.annotations);
+ }
  };
 
+ // imageFileDone - show image in chat
+ const handleImageFileDone = (image) => {
+ appendToLastMessage(`\n![${image.file_id}](/api/files/${image.file_id})\n`);
+ }
+
  // toolCallCreated - log new tool call
  const toolCallCreated = (toolCall) => {
  if (toolCall.type != "code_interpreter") return;
@@ -183,6 +193,9 @@ const Chat = ({
  stream.on("textCreated", handleTextCreated);
  stream.on("textDelta", handleTextDelta);
 
+ // image
+ stream.on("imageFileDone", handleImageFileDone);
+
  // code interpreter
  stream.on("toolCallCreated", toolCallCreated);
  stream.on("toolCallDelta", toolCallDelta);
@@ -216,6 +229,25 @@ const Chat = ({
  setMessages((prevMessages) => [...prevMessages, { role, text }]);
  };
 
+ const annotateLastMessage = (annotations) => {
+ setMessages((prevMessages) => {
+ const lastMessage = prevMessages[prevMessages.length - 1];
+ const updatedLastMessage = {
+ ...lastMessage,
+ };
+ annotations.forEach((annotation) => {
+ if (annotation.type === 'file_path') {
+ updatedLastMessage.text = updatedLastMessage.text.replaceAll(
+ annotation.text,
+ `/api/files/${annotation.file_path.file_id}`
+ );
+ }
+ })
+ return [...prevMessages.slice(0, -1), updatedLastMessage];
+ });
+
+ }
+
  return (
  <div className={styles.chatContainer}>
  <div className={styles.messages}>