youngkingdom/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-05-06 10:28:10 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' into tp

Browse Source
This commit is contained in:
JzoNg
2024-09-27 16:47:57 +08:00
parent cef1010cb5 0603359e2d
commit 3b48f8c98e
257 changed files with 4098 additions and 874 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/app/components/base/app-icon-picker/index.tsx
View File

@ -88,7 +88,7 @@ const AppIconPicker: FC<AppIconPickerProps> = ({
if (!imageCropInfo)
return
setUploading(true)
const blob = await getCroppedImg(imageCropInfo.tempUrl, imageCropInfo.croppedAreaPixels)
const blob = await getCroppedImg(imageCropInfo.tempUrl, imageCropInfo.croppedAreaPixels, imageCropInfo.fileName)
const file = new File([blob], imageCropInfo.fileName, { type: blob.type })
handleLocalFileUpload(file)
}

21
web/app/components/base/app-icon-picker/utils.ts
View File

@ -11,6 +11,23 @@ export function getRadianAngle(degreeValue: number) {
return (degreeValue * Math.PI) / 180
}
export function getMimeType(fileName: string): string {
const extension = fileName.split('.').pop()?.toLowerCase()
switch (extension) {
case 'png':
return 'image/png'
case 'jpg':
case 'jpeg':
return 'image/jpeg'
case 'gif':
return 'image/gif'
case 'webp':
return 'image/webp'
default:
return 'image/jpeg'
}
}
/**
* Returns the new bounding area of a rotated rectangle.
*/
@ -31,12 +48,14 @@ export function rotateSize(width: number, height: number, rotation: number) {
export default async function getCroppedImg(
imageSrc: string,
pixelCrop: { x: number; y: number; width: number; height: number },
fileName: string,
rotation = 0,
flip = { horizontal: false, vertical: false },
): Promise<Blob> {
const image = await createImage(imageSrc)
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
const mimeType = getMimeType(fileName)
if (!ctx)
throw new Error('Could not create a canvas context')
@ -93,6 +112,6 @@ export default async function getCroppedImg(
resolve(file)
else
reject(new Error('Could not create a blob'))
}, 'image/jpeg')
}, mimeType)
})
}

8
web/app/components/base/audio-btn/audio.ts
View File

@ -12,7 +12,7 @@ export default class AudioPlayer {
mediaSource: MediaSource | null
audio: HTMLAudioElement
audioContext: AudioContext
sourceBuffer?: SourceBuffer
sourceBuffer?: any
cacheBuffers: ArrayBuffer[] = []
pauseTimer: number | null = null
msgId: string | undefined
@ -33,7 +33,7 @@ export default class AudioPlayer {
this.callback = callback
// Compatible with iphone ios17 ManagedMediaSource
const MediaSource = window.MediaSource || window.ManagedMediaSource
const MediaSource = window.ManagedMediaSource || window.MediaSource
if (!MediaSource) {
Toast.notify({
message: 'Your browser does not support audio streaming, if you are using an iPhone, please update to iOS 17.1 or later.',
@ -43,6 +43,10 @@ export default class AudioPlayer {
this.mediaSource = MediaSource ? new MediaSource() : null
this.audio = new Audio()
this.setCallback(callback)
if (!window.MediaSource) { // if use ManagedMediaSource
this.audio.disableRemotePlayback = true
this.audio.controls = true
}
this.audio.src = this.mediaSource ? URL.createObjectURL(this.mediaSource) : ''
this.audio.autoplay = true

13
web/app/components/base/chat/chat-with-history/chat-wrapper.tsx
View File

@ -6,6 +6,7 @@ import type {
OnSend,
} from '../types'
import { useChat } from '../chat/hooks'
import { getLastAnswer } from '../utils'
import { useChatWithHistoryContext } from './context'
import Header from './header'
import ConfigPanel from './config-panel'
@ -67,17 +68,11 @@ const ChatWrapper = () => {
}, [])
const doSend: OnSend = useCallback((message, files, last_answer) => {
const lastAnswer = chatListRef.current.at(-1)
const data: any = {
query: message,
inputs: currentConversationId ? currentConversationItem?.inputs : newConversationInputs,
conversation_id: currentConversationId,
parent_message_id: last_answer?.id || (lastAnswer
? lastAnswer.isOpeningStatement
? null
: lastAnswer.id
: null),
parent_message_id: last_answer?.id || getLastAnswer(chatListRef.current)?.id || null,
}
if (appConfig?.file_upload?.image.enabled && files?.length)
@ -111,13 +106,13 @@ const ChatWrapper = () => {
const prevMessages = chatList.slice(0, index)
const question = prevMessages.pop()
const lastAnswer = prevMessages.at(-1)
const lastAnswer = getLastAnswer(prevMessages)
if (!question)
return
handleUpdateChatList(prevMessages)
doSend(question.content, question.message_files, (!lastAnswer || lastAnswer.isOpeningStatement) ? undefined : lastAnswer)
doSend(question.content, question.message_files, lastAnswer)
}, [chatList, handleUpdateChatList, doSend])
const chatNode = useMemo(() => {

13
web/app/components/base/chat/chat/answer/index.tsx
View File

@ -85,6 +85,19 @@ const Answer: FC<AnswerProps> = ({
getContentWidth()
}, [responding])
// Recalculate contentWidth when content changes (e.g., SVG preview/source toggle)
useEffect(() => {
if (!containerRef.current)
return
const resizeObserver = new ResizeObserver(() => {
getContentWidth()
})
resizeObserver.observe(containerRef.current)
return () => {
resizeObserver.disconnect()
}
}, [])
return (
<div className='flex mb-2 last:mb-0'>
<div className='shrink-0 relative w-10 h-10'>

4
web/app/components/base/chat/chat/hooks.ts
View File

@ -334,9 +334,9 @@ export const useChat = (
const newChatList = produce(chatListRef.current, (draft) => {
const index = draft.findIndex(item => item.id === responseItem.id)
if (index !== -1) {
const requestion = draft[index - 1]
const question = draft[index - 1]
draft[index - 1] = {
...requestion,
...question,
}
draft[index] = {
...draft[index],

13
web/app/components/base/chat/embedded-chatbot/chat-wrapper.tsx
View File

@ -6,6 +6,7 @@ import type {
OnSend,
} from '../types'
import { useChat } from '../chat/hooks'
import { getLastAnswer } from '../utils'
import { useEmbeddedChatbotContext } from './context'
import ConfigPanel from './config-panel'
import { isDify } from './utils'
@ -69,17 +70,11 @@ const ChatWrapper = () => {
}, [])
const doSend: OnSend = useCallback((message, files, last_answer) => {
const lastAnswer = chatListRef.current.at(-1)
const data: any = {
query: message,
inputs: currentConversationId ? currentConversationItem?.inputs : newConversationInputs,
conversation_id: currentConversationId,
parent_message_id: last_answer?.id || (lastAnswer
? lastAnswer.isOpeningStatement
? null
: lastAnswer.id
: null),
parent_message_id: last_answer?.id || getLastAnswer(chatListRef.current)?.id || null,
}
if (appConfig?.file_upload?.image.enabled && files?.length)
@ -113,13 +108,13 @@ const ChatWrapper = () => {
const prevMessages = chatList.slice(0, index)
const question = prevMessages.pop()
const lastAnswer = prevMessages.at(-1)
const lastAnswer = getLastAnswer(prevMessages)
if (!question)
return
handleUpdateChatList(prevMessages)
doSend(question.content, question.message_files, (!lastAnswer || lastAnswer.isOpeningStatement) ? undefined : lastAnswer)
doSend(question.content, question.message_files, lastAnswer)
}, [chatList, handleUpdateChatList, doSend])
const chatNode = useMemo(() => {

2
web/app/components/base/chat/types.ts
View File

@ -63,7 +63,7 @@ export type ChatItem = IChatItem & {
conversationId?: string
}
export type OnSend = (message: string, files?: VisionFile[], last_answer?: ChatItem) => void
export type OnSend = (message: string, files?: VisionFile[], last_answer?: ChatItem | null) => void
export type OnRegenerate = (chatItem: ChatItem) => void

10
web/app/components/base/chat/utils.ts
View File

@ -19,6 +19,15 @@ function getProcessedInputsFromUrlParams(): Record<string, any> {
return inputs
}
function getLastAnswer(chatList: ChatItem[]) {
for (let i = chatList.length - 1; i >= 0; i--) {
const item = chatList[i]
if (item.isAnswer && !item.isOpeningStatement)
return item
}
return null
}
function appendQAToChatList(chatList: ChatItem[], item: any) {
// we append answer first and then question since will reverse the whole chatList later
chatList.push({
@ -71,5 +80,6 @@ function getPrevChatList(fetchedMessages: any[]) {
export {
getProcessedInputsFromUrlParams,
getLastAnswer,
getPrevChatList,
}

4
web/app/components/base/image-uploader/image-preview.tsx
View File

@ -88,7 +88,7 @@ const ImagePreview: FC<ImagePreviewProps> = ({
})
}
const imageTobase64ToBlob = (base64: string, type = 'image/png'): Blob => {
const imageBase64ToBlob = (base64: string, type = 'image/png'): Blob => {
const byteCharacters = atob(base64)
const byteArrays = []
@ -109,7 +109,7 @@ const ImagePreview: FC<ImagePreviewProps> = ({
const shareImage = async () => {
try {
const base64Data = url.split(',')[1]
const blob = imageTobase64ToBlob(base64Data, 'image/png')
const blob = imageBase64ToBlob(base64Data, 'image/png')
await navigator.clipboard.write([
new ClipboardItem({

119
web/app/components/base/markdown.tsx
View File

@ -116,59 +116,80 @@ const CodeBlock: CodeComponent = memo(({ inline, className, children, ...props }
const match = /language-(\w+)/.exec(className || '')
const language = match?.[1]
const languageShowName = getCorrectCapitalizationLanguageName(language || '')
let chartData = JSON.parse(String('{"title":{"text":"ECharts error - Wrong JSON format."}}').replace(/\n$/, ''))
if (language === 'echarts') {
try {
chartData = JSON.parse(String(children).replace(/\n$/, ''))
const chartData = useMemo(() => {
if (language === 'echarts') {
try {
return JSON.parse(String(children).replace(/\n$/, ''))
}
catch (error) {}
}
catch (error) {
}
}
return JSON.parse('{"title":{"text":"ECharts error - Wrong JSON format."}}')
}, [language, children])
// Use `useMemo` to ensure that `SyntaxHighlighter` only re-renders when necessary
return useMemo(() => {
return (!inline && match)
? (
<div>
<div
className='flex justify-between h-8 items-center p-1 pl-3 border-b'
style={{
borderColor: 'rgba(0, 0, 0, 0.05)',
}}
>
<div className='text-[13px] text-gray-500 font-normal'>{languageShowName}</div>
<div style={{ display: 'flex' }}>
{language === 'mermaid' && <SVGBtn isSVG={isSVG} setIsSVG={setIsSVG}/>}
<CopyBtn
className='mr-1'
value={String(children).replace(/\n$/, '')}
isPlain
/>
</div>
</div>
{(language === 'mermaid' && isSVG)
? (<Flowchart PrimitiveCode={String(children).replace(/\n$/, '')} />)
: (language === 'echarts'
? (<div style={{ minHeight: '350px', minWidth: '700px' }}><ErrorBoundary><ReactEcharts option={chartData} /></ErrorBoundary></div>)
: (language === 'svg'
? (<ErrorBoundary><SVGRenderer content={String(children).replace(/\n$/, '')} /></ErrorBoundary>)
: (<SyntaxHighlighter
{...props}
style={atelierHeathLight}
customStyle={{
paddingLeft: 12,
backgroundColor: '#fff',
}}
language={match[1]}
showLineNumbers
PreTag="div"
>
{String(children).replace(/\n$/, '')}
</SyntaxHighlighter>)))}
const renderCodeContent = useMemo(() => {
const content = String(children).replace(/\n$/, '')
if (language === 'mermaid' && isSVG) {
return <Flowchart PrimitiveCode={content} />
}
else if (language === 'echarts') {
return (
<div style={{ minHeight: '350px', minWidth: '700px' }}>
<ErrorBoundary>
<ReactEcharts option={chartData} />
</ErrorBoundary>
</div>
)
: (<code {...props} className={className}>{children}</code>)
}, [chartData, children, className, inline, isSVG, language, languageShowName, match, props])
}
else if (language === 'svg' && isSVG) {
return (
<ErrorBoundary>
<SVGRenderer content={content} />
</ErrorBoundary>
)
}
else {
return (
<SyntaxHighlighter
{...props}
style={atelierHeathLight}
customStyle={{
paddingLeft: 12,
backgroundColor: '#fff',
}}
language={match?.[1]}
showLineNumbers
PreTag="div"
>
{content}
</SyntaxHighlighter>
)
}
}, [language, match, props, children, chartData, isSVG])
if (inline || !match)
return <code {...props} className={className}>{children}</code>
return (
<div>
<div
className='flex justify-between h-8 items-center p-1 pl-3 border-b'
style={{
borderColor: 'rgba(0, 0, 0, 0.05)',
}}
>
<div className='text-[13px] text-gray-500 font-normal'>{languageShowName}</div>
<div style={{ display: 'flex' }}>
{(['mermaid', 'svg']).includes(language!) && <SVGBtn isSVG={isSVG} setIsSVG={setIsSVG}/>}
<CopyBtn
className='mr-1'
value={String(children).replace(/\n$/, '')}
isPlain
/>
</div>
</div>
{renderCodeContent}
</div>
)
})
CodeBlock.displayName = 'CodeBlock'

18
web/app/components/base/svg-gallery/index.tsx
View File

@ -29,7 +29,7 @@ export const SVGRenderer = ({ content }: { content: string }) => {
if (svgRef.current) {
try {
svgRef.current.innerHTML = ''
const draw = SVG().addTo(svgRef.current).size('100%', '100%')
const draw = SVG().addTo(svgRef.current)
const parser = new DOMParser()
const svgDoc = parser.parseFromString(content, 'image/svg+xml')
@ -40,13 +40,11 @@ export const SVGRenderer = ({ content }: { content: string }) => {
const originalWidth = parseInt(svgElement.getAttribute('width') || '400', 10)
const originalHeight = parseInt(svgElement.getAttribute('height') || '600', 10)
const scale = Math.min(windowSize.width / originalWidth, windowSize.height / originalHeight, 1)
const scaledWidth = originalWidth * scale
const scaledHeight = originalHeight * scale
draw.size(scaledWidth, scaledHeight)
draw.viewbox(0, 0, originalWidth, originalHeight)
svgRef.current.style.width = `${Math.min(originalWidth, 298)}px`
const rootElement = draw.svg(content)
rootElement.scale(scale)
rootElement.click(() => {
setImagePreview(svgToDataURL(svgElement as Element))
@ -54,7 +52,7 @@ export const SVGRenderer = ({ content }: { content: string }) => {
}
catch (error) {
if (svgRef.current)
svgRef.current.innerHTML = 'Error rendering SVG. Wait for the image content to complete.'
svgRef.current.innerHTML = '<span style="padding: 1rem;">Error rendering SVG. Wait for the image content to complete.</span>'
}
}
}, [content, windowSize])
@ -62,14 +60,14 @@ export const SVGRenderer = ({ content }: { content: string }) => {
return (
<>
<div ref={svgRef} style={{
width: '100%',
height: '100%',
minHeight: '300px',
maxHeight: '80vh',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
cursor: 'pointer',
wordBreak: 'break-word',
whiteSpace: 'normal',
margin: '0 auto',
}} />
{imagePreview && (<ImagePreview url={imagePreview} title='Preview' onCancel={() => setImagePreview('')} />)}
</>