Add functionality to display images in chat interface

millawell · May 3, 2024 · 7e23c9c · 7e23c9c
1 parent b0fba4c
commit 7e23c9c
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 0 deletions.
diff --git a/app/components/chat.module.css b/app/components/chat.module.css
@@ -87,3 +87,8 @@
  color: #b8b8b8;
  margin-right: 8px;
 }
+
+.chatImageContent {
+ max-width: 100%;
+ padding: 8px 0px 8px 0px;
+}
diff --git a/app/components/chat.tsx b/app/components/chat.tsx
@@ -27,6 +27,10 @@ const markdownOptions: Options = {
  return <a {...props} target="_blank" href={fileLink} />;
  }
  return <a {...props} target="_blank" />;
+ },
+
+ img(props) {
+ return <a href={props.src} target="_blank"><img {...props} className={styles.chatImageContent} /></a>;
  }
  },
 
@@ -169,6 +173,11 @@ const Chat = ({
  }
  };
 
+ // 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;
@@ -209,6 +218,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);