LLM/DocsGPT
1
0
Fork 0
mirror of https://github.com/arc53/DocsGPT.git synced 2025-12-01 09:33:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' into input-hidden-issue-#474

Browse Source
This commit is contained in:
Alex
2023-10-08 23:19:35 +01:00
committed by GitHub
parent 396697ead2 151fdb9bad
commit e108833db2
35 changed files with 251 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/conversation/Conversation.tsx
View File

@@ -156,7 +156,7 @@ export default function Conversation() {
placeholder="Type your message here..."
contentEditable
onPaste={handlePaste}
className={`border-000000 overflow-x-hidden; max-h-24 min-h-[2.6rem] w-full overflow-y-auto whitespace-pre-wrap rounded-full border bg-white py-5 pl-9 pr-9 text-base leading-7 opacity-100 focus:outline-none`}
className={`border-000000 overflow-x-hidden; max-h-24 min-h-[2.6rem] w-full overflow-y-auto whitespace-pre-wrap rounded-3xl border bg-white py-2 pl-4 pr-9 text-base leading-7 opacity-100 focus:outline-none`}
onKeyDown={(e) => {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();

46
frontend/src/conversation/ConversationBubble.tsx
View File

@@ -4,7 +4,10 @@ import { FEEDBACK, MESSAGE_TYPE } from './conversationModels';
import Alert from './../assets/alert.svg';
import { ReactComponent as Like } from './../assets/like.svg';
import { ReactComponent as Dislike } from './../assets/dislike.svg';
import { ReactComponent as Copy } from './../assets/copy.svg';
import { ReactComponent as Checkmark } from './../assets/checkmark.svg';
import ReactMarkdown from 'react-markdown';
import copy from 'copy-to-clipboard';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
@@ -26,6 +29,17 @@ const ConversationBubble = forwardRef<
) {
const [showFeedback, setShowFeedback] = useState(false);
const [openSource, setOpenSource] = useState<number | null>(null);
const [copied, setCopied] = useState(false);
const handleCopyClick = (text: string) => {
copy(text);
setCopied(true);
// Reset copied to false after a few seconds
setTimeout(() => {
setCopied(false);
}, 2000);
};
const List = ({
ordered,
children,
@@ -42,7 +56,7 @@ const ConversationBubble = forwardRef<
bubble = (
<div ref={ref} className={`flex flex-row-reverse self-end ${className}`}>
<Avatar className="mt-2 text-2xl" avatar="🧑‍💻"></Avatar>
<div className="mr-2 ml-10 flex items-center rounded-3xl bg-blue-1000 p-3.5 text-white">
<div className="mr-2 ml-10 flex items-center rounded-3xl bg-purple-30 p-3.5 text-white">
<ReactMarkdown className="whitespace-pre-wrap break-all">
{message}
</ReactMarkdown>
@@ -131,13 +145,29 @@ const ConversationBubble = forwardRef<
: 'text-[#007DFF]'
}`}
>
{index + 1}. {source.title}
{index + 1}. {source.title.substring(0, 45)}
</p>
</div>
))}
</div>
</div>
</div>
<div
className={`mr-2 flex items-center justify-center ${
type !== 'ERROR' && showFeedback ? '' : 'md:invisible'
}`}
>
{copied ? (
<Checkmark />
) : (
<Copy
className={`cursor-pointer fill-gray-4000 hover:stroke-gray-4000`}
onClick={() => {
handleCopyClick(message);
}}
></Copy>
)}
</div>
<div
className={`mr-2 flex items-center justify-center ${
feedback === 'LIKE' || (type !== 'ERROR' && showFeedback)
@@ -148,7 +178,7 @@ const ConversationBubble = forwardRef<
<Like
className={`cursor-pointer ${
feedback === 'LIKE'
? 'fill-blue-1000 stroke-blue-1000'
? 'fill-purple-30 stroke-purple-30'
: 'fill-none stroke-gray-4000 hover:fill-gray-4000'
}`}
onClick={() => handleFeedback?.('LIKE')}
@@ -173,15 +203,13 @@ const ConversationBubble = forwardRef<
</div>
{sources && openSource !== null && sources[openSource] && (
<div className="ml-8 mt-2 w-3/4 rounded-xl bg-blue-200 p-2">
<p className="w-3/4 truncate text-xs text-gray-500">
<div className="ml-10 mt-2 max-w-[800px] rounded-xl bg-blue-200 p-2">
<p className="m-1 w-3/4 truncate text-xs text-gray-500">
Source: {sources[openSource].title}
</p>
<div className="rounded-xl border-2 border-gray-200 bg-white p-2">
<p className="text-xs text-gray-500 ">
{sources[openSource].text}
</p>
<div className="m-2 rounded-xl border-2 border-gray-200 bg-white p-2">
<p className="text-black">{sources[openSource].text}</p>
</div>
</div>
)}

18
frontend/src/conversation/conversationSlice.ts
View File

@@ -142,14 +142,14 @@ export const conversationSlice = createSlice({
state,
action: PayloadAction<{ index: number; query: Partial<Query> }>,
) {
const index = action.payload.index;
if (action.payload.query.response) {
const { index, query } = action.payload;
if (query.response) {
state.queries[index].response =
(state.queries[index].response || '') + action.payload.query.response;
(state.queries[index].response || '') + query.response;
} else {
state.queries[index] = {
...state.queries[index],
...action.payload.query,
...query,
};
}
},
@@ -163,21 +163,21 @@ export const conversationSlice = createSlice({
state,
action: PayloadAction<{ index: number; query: Partial<Query> }>,
) {
const index = action.payload.index;
const { index, query } = action.payload;
if (!state.queries[index].sources) {
state.queries[index].sources = [action.payload.query.sources![0]];
state.queries[index].sources = [query.sources![0]];
} else {
state.queries[index].sources!.push(action.payload.query.sources![0]);
state.queries[index].sources!.push(query.sources![0]);
}
},
updateQuery(
state,
action: PayloadAction<{ index: number; query: Partial<Query> }>,
) {
const index = action.payload.index;
const { index, query } = action.payload;
state.queries[index] = {
...state.queries[index],
...action.payload.query,
...query,
};
},
setStatus(state, action: PayloadAction<Status>) {