OpenAI Chat Prompt input limits

[jrichMQ]

trafficstars

We have use cases where large inputs (exceeding 4000 characters) are necessary. Input field seems limited to 4000 characters. Can that be increased or add environment variable to allow larger amounts?

[pamelafox]

I think you mean 1000 characters, right?

We have this logic:

const onQuestionChange = (_ev: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string) => {
    if (!newValue) {
        setQuestion("");
    } else if (newValue.length <= 1000) {
        setQuestion(newValue);
    }
};

We've discussed removing this here: https://github.com/Azure-Samples/azure-search-openai-demo/issues/952

I can send a PR to remove it.

[jrichMQ]

@pamelafox - Yes, sorry 1000 characters. I removed this locally and changed some of the CSS to handle/expand the text box for longer prompts but mine didn't render so gracefully (only the text not the whole prompt area expands as well, Might be nice to modify the CSS better than I have to handle this larger text and expand downward to see the full prompt text. ;) Thanks for you help - this is a great project!

const onQuestionChange = (_ev: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string) => { if (!newValue) { setQuestion(""); } else { setQuestion(newValue); } };

Chat.module.css changes (just for reference - not great but functional)

.container { flex: 1; display: flex; flex-direction: column; margin-top: 1rem; }

.chatRoot { flex: 1; display: flex; /new code JR/ flex-direction: column; height: 100vh; /* fill screen */ margin: 0; overflow-y: auto; }

.chatContainer { flex: 1; display: flex; flex-direction: column; align-items: center; width: 100%; height: 100vh; /* fill screen */

/* Remove max-height or change it */
/* max-height: calc(100vh - 10rem); */
 /* overflow: hidden;  or auto if you want the entire container to scroll */

}

.chatEmptyState { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; /* max-height: 64rem;*/ padding-top: 1rem; }

.chatEmptyStateTitle { font-size: 2.75rem; font-weight: 600; margin-top: 0; margin-bottom: 0; }

.chatEmptyStateTitleLine2 { font-weight: 600; margin-top: 0; margin-bottom: 1.875rem; color: rgb(121, 137, 209); }

.chatEmptyStateSubtitle { font-weight: 600; margin-bottom: 0.625rem; }

.chatMessageStream { flex-grow: 1; /* max-height: 64rem; */ width: 100%; overflow-y: auto; padding: 0 2rem; display: flex; flex-direction: column; resize: horizontal; min-width: 50vw; }

.chatMessageGpt { margin-bottom: 1.25rem; max-width: 100%; display: flex; }

.chatMessageGptMinWidth { max-width: 31.25rem; margin-bottom: 1.25rem; }

.chatInput { position: sticky; bottom: 0; /* flex: 0 0 6.25rem; what it was originally*/ padding: 1rem; width: 100%; max-width: 64.25rem; background: #f2f2f2;

 /* Either remove or alter this: */
/* flex: 0 0 6.25rem; what it was originally*/ 
/* e.g.: */
flex: 0 0 auto; /* Let it grow */
/* or use a min-height: */
/* min-height: 6.25rem; */

}