usamazbr/embedding image upload

[Usamazbr]

Motivation and Context

The current frontend functionality of this app limits users to uploading text only. However, the backend API and server are fully capable of integrating images with text. Implementing image uploads on the frontend would provide users with the extra option to enrich their content with visuals.

Description

In this pull request, I've made changes to Chat.tsx, QuestionInput.tsx and api.ts along with few changes in respective CSS files and model.ts, all this ensuring no break in dom elements. In order to facilitate image upload functionality. Here's a more detailed breakdown of my approach:

• key implementation is converting the upload image to base64 string
• then in api.ts it will add as array inside content field which backend is designed to handle
• unnecessary update of dompurify package to v3.1.5 (this does not affect or break any functionality)

Contribution Checklist

• [x] I have built and tested the code locally and in a deployed app
• [x] For frontend changes, I have pulled the latest code from main, built the frontend, and committed all static files.
• [x] This is a change for all users of this app. No code or asset is specific to my use case or my organization.
• [x] I didn't break any existing functionality :smile:

[Usamazbr]

@microsoft-github-policy-service agree

[iseabock]

@Usamazbr I have pulled your branch, but I'm currently not able to get it to work. When I attach an image in the chat I get a 400:

Error code: 400 - {'error': {'requestid': '40d557bd-06b3-45e9-a1cd-1e66e07e1b7c', 'code': 400, 'message': 'Invalid chat message detected: message content must be string'}}

Am I missing something needed for this to work?

[Usamazbr]

@Usamazbr I have pulled your branch, but I'm currently not able to get it to work. When I attach an image in the chat I get a 400:

Error code: 400 - {'error': {'requestid': '40d557bd-06b3-45e9-a1cd-1e66e07e1b7c', 'code': 400, 'message': 'Invalid chat message detected: message content must be string'}}

Am I missing something needed for this to work?

Since it is working fine on my end, I suspect I'm using gpt-4o instead of 3.5, could be the problem. And there are no such validators on backend side since content can either be string or an array of different types of contents.

[Usamazbr]

@iseabock Have you tried using gpt-4o for this to run?

AZURE_OPENAI_MODEL=gpt-4o