Make code interpreter files available for download from a file shelf

Author: chriscarrollsmith

routers/chat.py

@@ -28,6 +28,7 @@
 )
 from openai.types.responses.response_output_item import McpApprovalRequest
 from openai.types.responses import ResponseFunctionToolCall
+from openai.types.responses.response_code_interpreter_tool_call import ResponseCodeInterpreterToolCall
 from openai._types import NOT_GIVEN
 from openai import AsyncOpenAI
 from utils.function_calling import Context, FunctionResult
@@ -361,7 +362,7 @@ async def iterate_stream(s, response_id: str = "") -> AsyncGenerator[str, None]:
                                         if filename.lower().endswith(image_extensions):
                                             img_html = (
                                                 f'<div class="imageOutput">'
-                                                f'<img src="{file_url_path}" alt="Code interpreter output" />'
+                                                f'<img src="{file_url_path}" alt="Code interpreter output" onclick="openImagePreview(this.src)" style="cursor:pointer" />'
                                                 f'</div>'
                                             )
                                             yield sse_format("imageOutput", img_html)
@@ -389,7 +390,34 @@ async def iterate_stream(s, response_id: str = "") -> AsyncGenerator[str, None]:
                                     yield sse_format("toolDelta", wrap_for_oob_swap(current_item_id, str(delta)))
 
                             case ResponseOutputItemDoneEvent():
-                                if isinstance(event.item, ResponseFunctionToolCall):
+                                if isinstance(event.item, ResponseCodeInterpreterToolCall):
+                                    container_id = event.item.container_id
+                                    if container_id:
+                                        try:
+                                            container_files = await client.containers.files.list(container_id=container_id)
+                                            cards: list[str] = []
+                                            for f in container_files.data:
+                                                if f.source != "assistant":
+                                                    continue
+                                                filename = f.path.split("/")[-1]
+                                                file_url = files_router.url_path_for(
+                                                    "download_container_file",
+                                                    container_id=container_id,
+                                                    file_id=f.id,
+                                                )
+                                                is_image = filename.lower().endswith(
+                                                    (".png", ".jpg", ".jpeg", ".gif", ".svg", ".webp")
+                                                )
+                                                cards.append(templates.get_template("components/file-card.html").render(
+                                                    file_url=file_url, filename=filename, is_image=is_image,
+                                                ))
+                                            if cards:
+                                                carousel_html = f'<div hx-swap-oob="innerHTML:#file-carousel">{"".join(cards)}</div>'
+                                                yield sse_format("fileOutput", carousel_html)
+                                        except Exception as e:
+                                            logger.error(f"Error listing container files: {e}")
+
+                                elif isinstance(event.item, ResponseFunctionToolCall):
                                     current_item_id = event.item.id
                                     function_name = event.item.name
                                     arguments_json = json.loads(event.item.arguments)

static/styles.css

@@ -591,7 +591,7 @@ pre {
   padding: 10px;
   display: flex;
   flex-direction: column;
-  order: 2;
+  order: 3;
 }
 
 .userMessage,
@@ -1006,6 +1006,63 @@ pre {
 .dots div:nth-child(2){animation-delay:-.16s}
 @keyframes bounce{0%,80%,100%{transform:scale(0)}40%{transform:scale(1)}}
 
+/* File carousel for code interpreter artifacts */
+.fileCarousel {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 8px 10px;
+  max-width: 600px;
+  width: 100%;
+  order: 2;
+}
+
+.fileCarousel:empty {
+  display: none;
+  padding: 0;
+}
+
+.fileCard {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 8px;
+  border: 1px solid #e2e2e2;
+  border-radius: 8px;
+  background: #f9f9f9;
+  max-width: 140px;
+  text-decoration: none;
+  color: inherit;
+  transition: background 0.2s;
+}
+
+.fileCard:hover {
+  background: #efefef;
+}
+
+.fileCard img {
+  max-width: 120px;
+  max-height: 80px;
+  border-radius: 4px;
+  object-fit: cover;
+  cursor: pointer;
+}
+
+.fileCardIcon {
+  font-size: 2em;
+  line-height: 1;
+  color: #666;
+}
+
+.fileCardName {
+  font-size: 0.75em;
+  color: #555;
+  text-align: center;
+  word-break: break-all;
+  max-width: 120px;
+}
+
 /* Optional: Adjust button padding if loader makes it too wide/narrow */
 /*
 .button {

templates/components/file-card.html

@@ -0,0 +1,8 @@
+<a class="fileCard" href="{{ file_url }}" {% if not is_image %}download{% endif %} target="_blank" rel="noopener noreferrer">
+  {% if is_image %}
+  <img src="{{ file_url }}" alt="{{ filename }}" onclick="event.preventDefault(); openImagePreview(this.src)" />
+  {% else %}
+  <span class="fileCardIcon">&#128196;</span>
+  {% endif %}
+  <span class="fileCardName">{{ filename }}</span>
+</a>

templates/index.html

@@ -23,6 +23,7 @@
               {% endif %}
             {% endfor %}
           </div>
+          <div class="fileCarousel" id="file-carousel"></div>
           <form id="chatForm" class="inputForm clearfix"
                 hx-on::after-request="this.reset(); clearImagePreview();"
                 hx-on::before-request="removeNetworkError(); disableSendButton()"