feature(opentrons-ai-client): Attach file #18886

Elyorcv · 2025-07-11T14:39:05Z

Overview

Closes AUTH-2019
Figma

This introduces attach file button and attachments and send button modification
With Attach file button

With Attachment

After Send

Test Plan and Hands on Testing

CI

Review requests

Make sure Attach file and Send button and attachments are visible in UI

Risk assessment

Mid

opentrons-ai-client/src/atoms/AttachFileButton/index.tsx

opentrons-ai-client/src/atoms/SendButton/index.tsx

opentrons-ai-client/src/atoms/AttachedFileItem/index.tsx

opentrons-ai-client/src/molecules/InputPrompt/index.tsx

opentrons-ai-client/src/resources/utils/fileUtils.ts

jerader

code generally looks good! left some comments and questions. I think the big thing is to try to use CSS modules instead of styled-components, if possible 😄

opentrons-ai-client/src/atoms/AttachFileButton/index.tsx

opentrons-ai-client/src/molecules/ChatDisplay/index.tsx

codecov · 2025-07-13T16:23:07Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 56.51%. Comparing base (ced0e9e) to head (a69df4f).

Additional details and impacted files

@@             Coverage Diff             @@
##             edge   #18886       +/-   ##
===========================================
+ Coverage   25.38%   56.51%   +31.12%     
===========================================
  Files        3333     3333               
  Lines      287696   287767       +71     
  Branches    36490    36628      +138     
===========================================
+ Hits        73040   162633    +89593     
+ Misses     214633   124927    -89706     
- Partials       23      207      +184

Flag	Coverage Δ
app	`47.44% <100.00%> (+44.56%)`	⬆️
protocol-designer	`19.00% <100.00%> (+<0.01%)`	⬆️
step-generation	`5.31% <0.00%> (-0.01%)`	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
components/src/icons/icon-data.ts	`100.00% <100.00%> (ø)`

... and 1662 files with indirect coverage changes

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

opentrons-ai-client/src/atoms/AttachFileButton/AttachFileButton.module.css

opentrons-ai-client/src/molecules/ChatDisplay/index.tsx

jerader

I left another round of feedback. it is looking great - thanks for using CSS modules!

opentrons-ai-client/src/atoms/AttachFileButton/AttachFileButton.module.css

opentrons-ai-client/src/atoms/AttachFileButton/index.tsx

opentrons-ai-client/src/atoms/AttachedFileItem/AttachedFileItem.module.css

koji · 2025-07-14T22:44:10Z

opentrons-ai-client/src/atoms/AttachFileButton/AttachFileButton.module.css

@@ -0,0 +1,47 @@
+.button {


As I posted to #frontend, we decided to use lower case to the module.css file name.
could you rename this to attachfilebutton.module.css?

koji · 2025-07-14T22:44:46Z

opentrons-ai-client/src/atoms/SendButton/SendButton.module.css

@@ -0,0 +1,53 @@
+.button {


same as AttachFileButton.module.css

koji · 2025-07-14T22:45:04Z

opentrons-ai-client/src/molecules/ChatDisplay/ChatDisplay.module.css

@@ -0,0 +1,146 @@
+.main_container {


need to change the file name

koji · 2025-07-14T22:45:20Z

opentrons-ai-client/src/molecules/InputPrompt/InputPrompt.module.css

@@ -0,0 +1,86 @@
+.form {


need to change the file name

koji · 2025-07-14T22:46:44Z

opentrons-ai-client/src/molecules/InputPrompt/InputPrompt.module.css

+  background-color: var(--white);
+  border: none;
+  outline: none;
+  padding: 1.2rem 0;


1.2 rem is not our regular spacing var. is this a special case?

koji · 2025-07-14T22:48:29Z

opentrons-ai-client/src/molecules/InputPrompt/InputPrompt.module.css

+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-20);
+  font-family: 'Public Sans', sans-serif;
+  font-style: normal;


need this?

if you remove this, what will you see in the dev tools?

koji · 2025-07-14T22:49:50Z

opentrons-ai-client/src/molecules/InputPrompt/InputPrompt.module.css

+  border: 1px solid var(--grey-20);
+  border-radius: var(--border-radius-12);
+  background-color: var(--white);
+  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.05);


from our codebase, the team is using px for box-shadow so i recommend you use px instead of rem.
I'll going to add this to the migration doc.

koji · 2025-07-14T22:50:26Z

opentrons-ai-client/src/molecules/InputPrompt/InputPrompt.module.css

+
+.main_input_container:focus-within {
+  border-color: var(--blue-50);
+  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1);


same as the above

koji · 2025-07-14T22:52:48Z

opentrons-ai-client/src/molecules/InputPrompt/InputPrompt.module.css

+}
+
+.text_input_section {
+  padding: var(--spacing-16) var(--spacing-16) var(--spacing-4) var(--spacing-16);


Suggested change

padding: var(--spacing-16) var(--spacing-16) var(--spacing-4) var(--spacing-16);

padding: var(--spacing-16) var(--spacing-16) var(--spacing-4);

koji · 2025-07-14T22:57:19Z

opentrons-ai-client/src/molecules/InputPrompt/__tests__/InputPrompt.test.tsx

+    const sendButton = screen.getByRole('button', { name: 'Send' })
+    expect(sendButton).toBeDisabled()


nit

basically we define button const when we will need to check its existence + sytle/click action.

Suggested change

const sendButton = screen.getByRole('button', { name: 'Send' })

expect(sendButton).toBeDisabled()

expect(screen.getByRole('button', { name: 'Send' })).toBeDisabled()

koji · 2025-07-14T22:58:40Z

opentrons-ai-client/src/molecules/InputPrompt/index.tsx

+        attachedFiles.length > 0
+          ? attachedFiles.map(file => ({
+              name: file.name,
+              type: getFileType(file) as 'pdf' | 'csv' | 'python',


nit
define type like FileType something ?

koji · 2025-07-14T23:00:59Z

opentrons-ai-client/src/molecules/InputPrompt/index.tsx

+      {/* Error message */}
+      {fileError && (
+        <div className={styles.error_container}>
+          <StyledText color={COLORS.red50} fontSize={TYPOGRAPHY.fontSizeH3}>


for this way, probably adding lineHeight would be good for the migration.

koji · 2025-07-14T23:05:38Z

opentrons-ai-client/src/molecules/InputPrompt/index.tsx

+            handleClick={() => {
+              handleClick()
+            }}


not work?

Suggested change

handleClick={() => {

handleClick()

}}

handleClick={handleClick}

i think the prop name I named isn't good. i will open a pr to mofity that.

koji · 2025-07-14T23:08:17Z

opentrons-ai-client/src/resources/utils/fileUtils.ts

+  pdf: 10 * 1024 * 1024, // 10MB
+  csv: 2 * 1024 * 1024, // 2MB
+  python: 1 * 1024 * 1024, // 1MB


just out of curiosity—how did you decide on the size?

koji · 2025-07-14T23:08:55Z

opentrons-ai-client/src/resources/types.ts

@@ -7,6 +7,13 @@ export type ProtocolFormat = 'Protocol Designer' | 'Python'
 /** assistant: ChatGPT API, user: user */
 type Role = 'assistant' | 'user'

+export interface FileAttachment {
+  name: string
+  type: 'pdf' | 'csv' | 'python'


don't need unknown?

koji · 2025-07-14T23:11:10Z

opentrons-ai-client/src/resources/utils/fileUtils.ts

+  python: ['.py'],
+} as const
+
+export type FileType = 'pdf' | 'csv' | 'python' | 'unknown'


import type { FileAttachment } from export type FileType = FileAttachment['type'] | 'unknown'

or may move this type to types.ts since it is exported.

koji · 2025-07-14T23:13:11Z

opentrons-ai-client/src/resources/utils/fileUtils.ts

+
+  const sizeLimit = FILE_SIZE_LIMITS[fileType]
+  if (file.size > sizeLimit) {
+    const sizeMB = Math.round(sizeLimit / (1024 * 1024))


nit

const UNIT_MB = 1024 * 1024 export const FILE_SIZE_LIMITS = { pdf: 10 * UNIT_MB, // 10MB csv: 2 * UNIT_MB, // 2MB python: 1 * UNIT_MB, // 1MB } const sizeMB = Math.round(sizeLimit / (UNIT_MB))

koji · 2025-07-14T23:18:58Z

opentrons-ai-client/src/resources/utils/fileUtils.ts

+export const getFileTypeLabel = (type: FileType): string => {
+  switch (type) {
+    case 'pdf':
+      return 'PDF file'
+    case 'csv':
+      return 'CSV file'
+    case 'python':
+      return 'Python file'
+    default:
+      return 'File'
+  }
+}


nit
you can use map

const fileTypeLabels: Record<FileType, string> = { pdf: 'PDF file', csv: 'CSV file', python: 'Python file', unknown: 'File', } export const getFileTypeLabel = (type: FileType): string => fileTypeLabels[type]

if possible, i recommend you use a different string for unknonw since there is a type, File.

koji · 2025-07-14T23:24:09Z

opentrons-ai-client/src/resources/utils/fileUtils.ts

+
+export const formatFileSize = (bytes: number): string => {
+  if (bytes === 0) {
+    return '0 B'


the space between B and 0 is intentinal?

koji · 2025-07-14T23:24:19Z

opentrons-ai-client/src/resources/utils/fileUtils.ts

+  const sizes = ['B', 'KB', 'MB', 'GB']
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`


Suggested change

return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`

const size = bytes / Math.pow(k, i)

const rounded = size.toFixed(1)

return `${rounded} ${sizes[i] ?? 'B'}`

Elyorcv force-pushed the AUTH-2019-chat-interface-add-the-ability-to-attach-files branch from f635cf7 to c931478 Compare July 11, 2025 15:25

Elyorcv marked this pull request as ready for review July 11, 2025 16:05

Elyorcv requested review from koji and jerader July 11, 2025 16:32