Power Platform Community Forum Thread Details

Hello,

I use Botframework-webchat and create a react18 project from url below

https://github.com/microsoft/BotFramework-WebChat/tree/master/samples

I use the sample demo from

https://microsoft.github.io/BotFramework-WebChat/01.getting-started/b.minimal-bundle/

It can upload file and click download link from the responsed file(newfile.png).

but in my code below i don't known how to handle it to response my file url(i already upload my file to my blob container)

and i also don't known how to use the dispatchs and meanings

Could somebody help me handle this and explain how to use dispatchs in React18 BotFramework-WebChat thanks.

import classNames from 'classnames';
import React, { useCallback, useMemo, useState } from 'react';
import { createStore, createStyleSet } from 'botframework-webchat';

import WebChat from './WebChat';

import './fabric-icons-inline.css';
import './MinimizableWebChat.css';
import { BlobItem,BlobServiceClient,BlockBlobClient } from '@azure/storage-blob';
const MinimizableWebChat = () => {
 const store = useMemo(
 () =>
 createStore({}, ({ dispatch }) => next => action => {
 if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
 dispatch({
 type: 'WEB_CHAT/SEND_EVENT',
 payload: {
 name: 'webchat/join',
 value: {
 language: window.navigator.language
 }
 }
 });
 }
 else if(action.type==='WEB_CHAT/SEND_FILES'){
 (async function() {
 // Tells the bot that you are uploading files. This is optional.
 dispatch({ type: 'WEB_CHAT/SEND_TYPING' });
 const account = "";
 const sas = "";
 const files = action.payload.files[0]
 const fileName = files.name
 const blobServiceClient = new BlobServiceClient(
 `https://${account}.blob.core.windows.net${sas}`
 );
 const containerClient = blobServiceClient.getContainerClient(
 "userupload"
 );
 const blockBlobClient = containerClient.getBlockBlobClient(fileName);
 fetch(files.url)
 .then(response => {
 if (!response.ok) {
 throw new Error('Network response was not ok');
 }
 return response.blob();
 })
 .then(async blobData => {
 
 await blockBlobClient.uploadBrowserData(blobData);

 console.log(`Blob "${fileName}" uploaded successfully.`);
 })
 .catch(error => {
 console.error('Error:', error);
 });
 })().catch(err => console.error(err));
 }
 else if (action.type === 'DIRECT_LINE/INCOMING_ACTIVITY') {
 if (action.payload.activity.from.role === 'bot') {
 setNewMessage(true);
 }
 }
 return next(action);
 }),
 []
 );
 const styleSet = useMemo(
 () =>
 createStyleSet({
 backgroundColor: 'Transparent'
 }),
 []
 );
 const [loaded, setLoaded] = useState(false);
 const [minimized, setMinimized] = useState(true);
 const [newMessage, setNewMessage] = useState(false);
 const [side, setSide] = useState('right');
 const [token, setToken] = useState();
 const [userID,setUserID]=useState();
 const handleFetchToken = useCallback(async () => {
 let token;
 if (!token) {
 const res = await fetch('', { method: 'GET' });
 const { token,conversationId } = await res.json();
 console.log(conversationId)
 setUserID(conversationId);
 setToken(token);
 }
 }, [ ]);
 const handleMaximizeButtonClick = useCallback(async () => {
 setLoaded(true);
 setMinimized(false);
 setNewMessage(false);
 }, [setMinimized, setNewMessage]);

 const handleMinimizeButtonClick = useCallback(() => {
 setMinimized(true);
 setNewMessage(false);
 }, [setMinimized, setNewMessage]);

 const handleSwitchButtonClick = useCallback(() => {
 setSide(side === 'left' ? 'right' : 'left');
 }, [setSide, side]);

 return (
 <div className="minimizable-web-chat">
 {minimized && (
 <button className="maximize" onClick={handleMaximizeButtonClick}>
 <span className={token ? 'ms-Icon ms-Icon--MessageFill' : 'ms-Icon ms-Icon--Message'} />
 {newMessage && <span className="ms-Icon ms-Icon--CircleShapeSolid red-dot" />}
 </button>
 )}
 {loaded && (
 <div className={classNames(side === 'left' ? 'chat-box left' : 'chat-box right', minimized ? 'hide' : '')}>
 <header>
 <div className="filler" />
 <button className="switch" onClick={handleSwitchButtonClick}>
 <span className="ms-Icon ms-Icon--Switch" />
 </button>
 <button className="minimize" onClick={handleMinimizeButtonClick}>
 <span className="ms-Icon ms-Icon--ChromeMinimize" />
 </button>
 </header>
 <WebChat
 className="react-web-chat"
 onFetchToken={handleFetchToken}
 store={store}
 styleSet={styleSet}
 token={token}
 userID={userID}
 />
 </div>
 )}
 </div>
 );
};

export default MinimizableWebChat;

Categories:

General topics