Ask for help: Add image into the chatInputArea

[CSLukkun]

Thanks for your attention.

I want to ask how to add images or other files to the chat input area.

Anyone can provide me with some guidance to deal with it?

Thanks again

[ONLY-yours]

nice question, we are considering the scope of opening, should we default open it in chatInputArea ?

i thinks maybe its not a good idea ,if we default open it in chatInputArea, something may not so flexible

• how to combine message and image
• should we defalut use base 64? but some one may be like to use cdn link
• if more files we should supprt , such as pdf、docs ,how this work?

now we reserved an api named renderInput （u can find it in source code, but not actually finished it）

now this api is work such as this

 <div ref={areaHtml}>{renderInput ?? <ChatInputArea />}</div>

but actually will have some args, we still design about it, such as this

renderInput: {
   defaultDom: ReactNode,
   onSend,
   onDeleteAll
   // TODO
}

[CSLukkun]

Yes, I found that. But I thought It is too tightly coupled with the store layer of prochat.

So, I just wonder how to design in the next.

Thanks again.

[ONLY-yours]

now u can use Hooks and renderInput to achieve it

• sendMessage can allowed u to seed custom message

than in action render, u can put a antd picture upload components,than set a state in it

const [files,setUploadFiles] = useState()

    <div style={{ background: theme.colorBgLayout }}>
      <ProChat
        actions={{
          render: (defaultDoms) => {
                return <Upload  onChange={setUploadFiles} /> // this is antd upload
            }
        }}
        renderInput={()=>{
            return <CustomComponents/>
        }}
      />
    </div>

in CustomComponents U can use ProChat.sendMessage(message + files) to send, and u can choose the way to deal with files than send it

we will provider a simpler way and docs deme to help u in next few weeks

[CSLukkun]

Thanks for your consideration. It makes sense to me.

[ONLY-yours]

@CSLukkun look about this ：#74