10602709930

Committed 28 Aug 2024 06:53PM UTC coverage: 32.002% (-0.001%) from 32.003%

Build # 10602709930

Build Type

push

github

Committed by

darkruby501

Commit Message

Merge branch 'fix-llm-conversations-state' of https://github.com/LessWrong2/LessWrong2 into fix-llm-conversations-state

Run Details

5020 of 40798 branches covered (12.3%)

Branch coverage included in aggregate %.

0 of 6 new or added lines in 2 files covered. (0.0%)

143 existing lines in 3 files now uncovered.

29214 of 66175 relevant lines covered (44.15%)

189.21 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

16.67

/packages/lesswrong/components/languageModels/LanguageModelChat.tsx

import React, { useEffect, useRef, useState, useCallback } from 'react';
import { Components, registerComponent } from '../../lib/vulcan-lib';
import classNames from 'classnames';
import DeferRender from '../common/DeferRender';
import Button from '@material-ui/core/Button';
import { useMessages } from '../common/withMessages';
import Select from '@material-ui/core/Select';
import CloseIcon from '@material-ui/icons/Close';
import { useLocation } from "../../lib/routeUtil";
import { useLlmChat } from './LlmChatWrapper';
import type { Editor } from '@ckeditor/ckeditor5-core';
import CKEditor from '@/lib/vendor/ckeditor5-react/ckeditor';
import { getCkCommentEditor } from '@/lib/wrapCkEditor';
import { forumTypeSetting } from '@/lib/instanceSettings';
import { mentionPluginConfiguration } from '@/lib/editor/mentionsConfig';
import { ckEditorStyles } from '@/themes/stylePiping';
import { HIDE_LLM_CHAT_GUIDE_COOKIE } from '@/lib/cookies/cookies';
import { useCookiesWithConsent } from '../hooks/useCookiesWithConsent';

const styles = (theme: ThemeType) => ({
  root: {
    height: "calc(100vh - 160px)"
  },
  subRoot: {
    display: "flex",
    flexDirection: "column",
    height: "100%"
  },
  submission: {
    margin: 10,
    display: "flex",
    padding: 20,
    ...theme.typography.commentStyle,
  },
  editor: {
    minHeight: 100,
    '& .ck.ck-content': {
      minHeight: 100,
    },
    ...ckEditorStyles(theme),
  },
  inputTextbox: {
    padding: 16,
    margin: 10,
    marginTop: 20,
    borderRadius: 4,
    minHeight: 100,
    maxHeight: 200,
    backgroundColor: theme.palette.panelBackground.commentNodeEven,
    overflow: 'scroll',
    flexGrow: 0,
    flexShrink: 0,
    flexBasis: "auto",
  },
  welcomeGuide: {
    margin: 10,
    display: "flex",
    flexDirection: "column",
  },
  welcomeGuideText: {
    padding: 20,
    backgroundColor: theme.palette.grey[100],
    borderRadius: 10,
  },
  welcomeGuideButton: {
    cursor: "pointer",
    opacity: 0.8,
    alignSelf: "flex-end",
    fontStyle: "italic",
    marginBottom: 4
  },
  chatMessage: {
    padding: 20,
    margin: 10,
    borderRadius: 10,
    backgroundColor: theme.palette.grey[100],
  },
  chatMessageContent: {
  },
  userMessage: {
    backgroundColor: theme.palette.grey[300],
  },
  messages: {
    overflowY: "scroll",
    flexGrow: 1,
    //the last child has margin bottom 0 (doesn't work)
    "& > *:last-child": {
      marginBottom: 0
    }
  },
  options: {
    flexGrow: 0,
    flexShrink: 0,
    flexBasis: "auto",
    fontFamily: theme.palette.fonts.sansSerifStack,
    marginLeft: 10
  },
  checkbox: {
    padding: 8
  },
  select: {
    // TODO: maybe really the styling of the options section should be flex display and flex grow stuff
    maxWidth: 250,
  },
  menuItem: {
    zIndex: theme.zIndexes.languageModelChat + 10,
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center"
  },
  deleteConvoIcon: {
    marginLeft: 10,
    cursor: "pointer",
    opacity: 0.8,
    width: 16
  },
  loadingSpinner: {
    marginTop: 10
  }
});

interface LlmConversationMessage {
  role: string
  content: string
}

const NEW_CONVERSATION_MENU_ITEM = "New Conversation";

const LLMChatMessage = ({message, classes}: {
  message: LlmConversationMessage,
  classes: ClassesType<typeof styles>,
}) => {
  const { ContentItemBody, ContentStyles } = Components;

  const { role, content } = message;

  return <ContentStyles contentType="llmChat" className={classes.chatMessageContent}>
    <ContentItemBody
      className={classNames(classes.chatMessage, {[classes.userMessage]: role==='user'})}
      dangerouslySetInnerHTML={{__html: content}}
    />
</ContentStyles>
}

const LLMInputTextbox = ({onSubmit, classes}: {
  onSubmit: (message: string) => void,
  classes: ClassesType<typeof styles>,
}) => {
  const { ContentStyles } = Components;
  
  const [currentMessage, setCurrentMessage] = useState('');
  const ckEditorRef = useRef<CKEditor<any> | null>(null);
  const editorRef = useRef<Editor | null>(null);

  // TODO: we probably want to come back to this and enable cloud services for image uploading
  const editorConfig = {
    placeholder: 'Type here.  Ctrl/Cmd + Enter to submit.',
    mention: mentionPluginConfiguration,
  };

  // We need to pipe through the `conversationId` and do all of this eventListener setup/teardown like this because
  // otherwise messages get submitted to whatever conversation was "current" when the editor was initially loaded
  // Running this useEffect whenever either the conversationId or onSubmit changes ensures we remove and re-attach a fresh event listener with the correct "targets"
  useEffect(() => {
    const currentEditorRefValue = ckEditorRef.current;

    const options = { capture: true };
    const handleKeyDown = (event: KeyboardEvent) => {
      if ((event.ctrlKey || event.metaKey) && event.keyCode === 13) {
        event.stopPropagation();
        event.preventDefault();
        const currentEditorContent = editorRef.current?.getData();
        currentEditorContent && void onSubmit(currentEditorContent);
        setCurrentMessage('');
      }
    };
  
    const internalEditorRefInstance = (currentEditorRefValue as AnyBecauseHard).domContainer?.current;
    if (internalEditorRefInstance) {
      internalEditorRefInstance.addEventListener('keydown', handleKeyDown, options);
    }

    return () => {
      const internalEditorRefInstance = (currentEditorRefValue as AnyBecauseHard)?.domContainer?.current;
      if (internalEditorRefInstance) {
        internalEditorRefInstance.removeEventListener('keydown', handleKeyDown, options);
      }
    }
  }, [onSubmit]);

  // TODO: styling and debouncing
  return <ContentStyles className={classes.inputTextbox} contentType='comment'>
    <div className={classes.editor}>
      <CKEditor
        data={currentMessage}
        ref={ckEditorRef}
        editor={getCkCommentEditor(forumTypeSetting.get())}
        isCollaborative={false}
        onChange={(_event, editor: Editor) => {
          // debouncedValidateEditor(editor.model.document)
          // If transitioning from empty to nonempty or nonempty to empty,
          // bypass throttling. These cases don't have the performance
          // implications that motivated having throttling in the first place,
          // and this prevents a timing bug with form-clearing on submit.
          setCurrentMessage(editor.getData());

          // if (!editor.data.model.hasContent(editor.model.document.getRoot('main'))) {
          //   throttledSetCkEditor.cancel();
          //   setCurrentMessage(editor.getData());
          // } else {
          //   throttledSetCkEditor(() => editor.getData())
          // }
        }}
        onReady={(editor) => {
          editorRef.current = editor;
        }}
        config={editorConfig}
      />
    </div>
  </ContentStyles>
}

const welcomeGuideHtml = [
  `<h1>Welcome to the LessWrong LLM Chat!</h1>`,
  `<ul><li>Ctrl/Cmd + Enter to submit</li>`,
  `<li>The LLM chat interface is currently hooked up to Claude Sonnet 3.5</li><li>While in development, LW is paying for the usage. This will likely change later.</li>`,
  `<li>LaTeX is supported both on input and output</li><li>Images are not yet supported</li><li style="color: #bf360c;">While this feature is under heavy development, the LessWrong team will read conversations to help us with product iteration.</li></ul>`,
  `<h1>Loading Context</h1><p><strong>Currently, context loading only happens with the first message in a conversation</strong></p>`,
  `<p>When you start a new chat, your very first message is analyzed for potentially relevant context based on the text of your query and the post you are currently viewing (if any).`,
  ` The system will decide whether or not to load in posts and comments related to your query, your current post, both, or neither.</p>`,
  `<p>The kinds of requests you can make include but are not limited to:</p>`,
  `<p><i>About the current post</i></p><blockquote>`,
  `<p>"Please give me a tl;dr of this post and tell me three surprising things in it."</p>`,
  `<p>&lt;copy-paste section of post&gt; "Please explain this to me including worked examples and explanations of the math notation."</p>`,
  `<p>"What the objections to the OP in the comments and how did the author respond to them?"</p>`,
  `<p>"What are background posts that would help understand this?"</p></blockquote>`,
  `<p><i>Generally</i></p><blockquote><p>"Can you give me an overview of Infrabayesianism?"</p>`,
  `<p>"Please give me an of the Sleeping Beauty problem and its significance?"</p></blockquote>`,
  `<p>(Our chat is good for asking about niche LessWrong content.)</p><p>Feel free to try out other kinds of questions!!</p><p><em>(This guide can be hidden - see the button in the top right.)</em></p>`
].join('');

export const ChatInterface = ({classes}: {
  classes: ClassesType<typeof styles>,
}) => {
  const { Loading, MenuItem, ContentStyles, ContentItemBody } = Components;

  const { currentConversation, setCurrentConversation, archiveConversation, orderedConversations, submitMessage, currentConversationLoading } = useLlmChat();

  const lengthOfMostRecentMessage = currentConversation?.messages.slice(-1)[0]?.content.length

  const { flash } = useMessages();

  // TODO: come back and refactor this to use currentRoute & matchPath to get the url parameter instead
  const { location } = useLocation();
  const { pathname } = location;
  const currentPostId = pathname.match(/\/posts\/([^/]+)\/[^/]+/)?.[1];

  const messagesRef = useRef<HTMLDivElement>(null)
  // useEffect to scroll to bottom of chat history after new message is added or most recent message is updated (because of streaming)
  useEffect(() => {
    if (messagesRef.current) {
      messagesRef.current.scrollTop = messagesRef.current.scrollHeight;
    }
  }, [currentConversation?.messages.length, lengthOfMostRecentMessage]);

  const [cookies, setCookies] = useCookiesWithConsent([HIDE_LLM_CHAT_GUIDE_COOKIE])
  const showGuide = cookies[HIDE_LLM_CHAT_GUIDE_COOKIE] !== "true";
  const setShowGuide = (show: boolean) => {
    setCookies(HIDE_LLM_CHAT_GUIDE_COOKIE, show ? "false" : "true")
  }

  const llmChatGuide = <ContentStyles contentType="llmChat" className={classes.welcomeGuide}>
    <div 
      onClick={() => setShowGuide(!showGuide)} 
      className={classes.welcomeGuideButton}
    >
      {showGuide ? "Hide Guide" : "Show LLM Guide"}
    </div>
    {showGuide && <ContentItemBody
      className={classNames(classes.welcomeGuideText)}
      dangerouslySetInnerHTML={{__html: welcomeGuideHtml}}
    />}
  </ContentStyles>

  const messagesForDisplay = <div className={classes.messages} ref={messagesRef}>
    {llmChatGuide}
    {currentConversation?.messages.map((message, index) => (
      <LLMChatMessage key={index} message={message} classes={classes} />
    ))}
  </div>

  const exportHistoryToClipboard = () => {
    if (!currentConversation) return
    const conversationHistory = currentConversation.messages.filter(({role}) => ['user', 'assistant', 'user-context'].includes(role))
    const formattedChatHistory = conversationHistory.map(({role, content}) => `${role.toUpperCase()}: ${content}`).join("\n")
    void navigator.clipboard.writeText(formattedChatHistory)
    flash('Chat history copied to clipboard')
  }

  const onSelect = (event: React.ChangeEvent<HTMLSelectElement>) => {
    const newSelection = event.target.value;
    const newSelectionId = newSelection === "New Conversation"
      ? undefined
      : newSelection;

    setCurrentConversation(newSelectionId);
  }

  const deleteConversation = (ev: React.MouseEvent, conversationId: string) => {
    // TODO: figure out if we need both of these or just one (i.e. to prevent selection of the menu item)
    ev.preventDefault();
    ev.stopPropagation();
    archiveConversation(conversationId);
  };

  console.log({orderedConversationsInfo: orderedConversations.map(({title, lastUpdatedAt, createdAt}) => ({title, lastUpdatedAt, createdAt}))})

  const conversationSelect = <Select 
    onChange={onSelect} 
    value={currentConversation?._id ?? NEW_CONVERSATION_MENU_ITEM}
    disableUnderline
    className={classes.select}
    MenuProps={{style: {zIndex: 10000000002}}} // TODO: figure out sensible z-index stuff
    renderValue={(conversationId: string) => orderedConversations.find(c => c._id === conversationId)?.title ?? NEW_CONVERSATION_MENU_ITEM}
    >
      {
        orderedConversations.map(({ title, _id }, index) => (
          <MenuItem key={index} value={_id} className={classes.menuItem}>
            {title ?? "...Title Pending..."}
            <CloseIcon onClick={(ev) => deleteConversation(ev, _id)} className={classes.deleteConvoIcon} />
          </MenuItem>
      ))}
      <MenuItem value={NEW_CONVERSATION_MENU_ITEM} className={classes.menuItem}>
        New Conversation
      </MenuItem>
    </Select>;


  const options = <div className={classes.options}>
    <Button onClick={() => setCurrentConversation()}>
      New Chat
    </Button>
    <Button onClick={exportHistoryToClipboard} disabled={!currentConversation}>
      Export
    </Button>
    {conversationSelect}
  </div>  

  const handleSubmit = useCallback((message: string) => {
    submitMessage(message, currentPostId);
  }, [currentPostId, submitMessage]);

  return <div className={classes.subRoot}>
    {messagesForDisplay}
    {currentConversationLoading && <Loading className={classes.loadingSpinner}/>}
    <LLMInputTextbox onSubmit={handleSubmit} classes={classes} />
    {options}
  </div>
}


// Wrapper component needed so we can use deferRender
export const LanguageModelChat = ({classes}: {
  classes: ClassesType<typeof styles>,
}) => {
  return <DeferRender ssr={false}>
    <div className={classes.root}>
      <ChatInterface classes={classes} />
    </div>
  </DeferRender>;
}

const LanguageModelChatComponent = registerComponent('LanguageModelChat', LanguageModelChat, {styles});

declare global {
  interface ComponentTypes {
    LanguageModelChat: typeof LanguageModelChatComponent
  }
}

1	import React, { useEffect, useRef, useState, useCallback } from 'react';	3✔
2	import { Components, registerComponent } from '../../lib/vulcan-lib';	1✔
3	import classNames from 'classnames';	1✔
4	import DeferRender from '../common/DeferRender';	1✔
5	import Button from '@material-ui/core/Button';	1✔
6	import { useMessages } from '../common/withMessages';	1✔
7	import Select from '@material-ui/core/Select';	1✔
8	import CloseIcon from '@material-ui/icons/Close';	1✔
9	import { useLocation } from "../../lib/routeUtil";	1✔
10	import { useLlmChat } from './LlmChatWrapper';	1✔
11	import type { Editor } from '@ckeditor/ckeditor5-core';
12	import CKEditor from '@/lib/vendor/ckeditor5-react/ckeditor';	1✔
13	import { getCkCommentEditor } from '@/lib/wrapCkEditor';	1✔
14	import { forumTypeSetting } from '@/lib/instanceSettings';	1✔
15	import { mentionPluginConfiguration } from '@/lib/editor/mentionsConfig';	1✔
16	import { ckEditorStyles } from '@/themes/stylePiping';	1✔
17	import { HIDE_LLM_CHAT_GUIDE_COOKIE } from '@/lib/cookies/cookies';	1✔
18	import { useCookiesWithConsent } from '../hooks/useCookiesWithConsent';	1✔
19
20	const styles = (theme: ThemeType) => ({	1✔
21	root: {
22	height: "calc(100vh - 160px)"
23	},
24	subRoot: {
25	display: "flex",
26	flexDirection: "column",
27	height: "100%"
28	},
29	submission: {
30	margin: 10,
31	display: "flex",
32	padding: 20,
33	...theme.typography.commentStyle,
34	},
35	editor: {
36	minHeight: 100,
37	'& .ck.ck-content': {
38	minHeight: 100,
39	},
40	...ckEditorStyles(theme),
41	},
42	inputTextbox: {
43	padding: 16,
44	margin: 10,
45	marginTop: 20,
46	borderRadius: 4,
47	minHeight: 100,
48	maxHeight: 200,
49	backgroundColor: theme.palette.panelBackground.commentNodeEven,
50	overflow: 'scroll',
51	flexGrow: 0,
52	flexShrink: 0,
53	flexBasis: "auto",
54	},
55	welcomeGuide: {
56	margin: 10,
57	display: "flex",
58	flexDirection: "column",
59	},
60	welcomeGuideText: {
61	padding: 20,
62	backgroundColor: theme.palette.grey[100],
63	borderRadius: 10,
64	},
65	welcomeGuideButton: {
66	cursor: "pointer",
67	opacity: 0.8,
68	alignSelf: "flex-end",
69	fontStyle: "italic",
70	marginBottom: 4
71	},
72	chatMessage: {
73	padding: 20,
74	margin: 10,
75	borderRadius: 10,
76	backgroundColor: theme.palette.grey[100],
77	},
78	chatMessageContent: {
79	},
80	userMessage: {
81	backgroundColor: theme.palette.grey[300],
82	},
83	messages: {
84	overflowY: "scroll",
85	flexGrow: 1,
86	//the last child has margin bottom 0 (doesn't work)
87	"& > *:last-child": {
88	marginBottom: 0
89	}
90	},
91	options: {
92	flexGrow: 0,
93	flexShrink: 0,
94	flexBasis: "auto",
95	fontFamily: theme.palette.fonts.sansSerifStack,
96	marginLeft: 10
97	},
98	checkbox: {
99	padding: 8
100	},
101	select: {
102	// TODO: maybe really the styling of the options section should be flex display and flex grow stuff
103	maxWidth: 250,
104	},
105	menuItem: {
106	zIndex: theme.zIndexes.languageModelChat + 10,
107	display: "flex",
108	justifyContent: "space-between",
109	alignItems: "center"
110	},
111	deleteConvoIcon: {
112	marginLeft: 10,
113	cursor: "pointer",
114	opacity: 0.8,
115	width: 16
116	},
117	loadingSpinner: {
118	marginTop: 10
119	}
120	});
121
122	interface LlmConversationMessage {
123	role: string
124	content: string
125	}
126
127	const NEW_CONVERSATION_MENU_ITEM = "New Conversation";	1✔
128
129	const LLMChatMessage = ({message, classes}: {	1✔
130	message: LlmConversationMessage,
131	classes: ClassesType<typeof styles>,
132	}) => {
133	const { ContentItemBody, ContentStyles } = Components;	×
134
135	const { role, content } = message;	×
136
137	return <ContentStyles contentType="llmChat" className={classes.chatMessageContent}>	×
138	<ContentItemBody
139	className={classNames(classes.chatMessage, {[classes.userMessage]: role==='user'})}
140	dangerouslySetInnerHTML={{__html: content}}
141	/>
142	</ContentStyles>
143	}
144
145	const LLMInputTextbox = ({onSubmit, classes}: {	1✔
146	onSubmit: (message: string) => void,
147	classes: ClassesType<typeof styles>,
148	}) => {
149	const { ContentStyles } = Components;	×
150
151	const [currentMessage, setCurrentMessage] = useState('');	×
152	const ckEditorRef = useRef<CKEditor<any> \| null>(null);	×
153	const editorRef = useRef<Editor \| null>(null);	×
154
155	// TODO: we probably want to come back to this and enable cloud services for image uploading
156	const editorConfig = {	×
157	placeholder: 'Type here. Ctrl/Cmd + Enter to submit.',
158	mention: mentionPluginConfiguration,
159	};
160
161	// We need to pipe through the `conversationId` and do all of this eventListener setup/teardown like this because
162	// otherwise messages get submitted to whatever conversation was "current" when the editor was initially loaded
163	// Running this useEffect whenever either the conversationId or onSubmit changes ensures we remove and re-attach a fresh event listener with the correct "targets"
164	useEffect(() => {	×
165	const currentEditorRefValue = ckEditorRef.current;	×
166
167	const options = { capture: true };	×
168	const handleKeyDown = (event: KeyboardEvent) => {	×
169	if ((event.ctrlKey \|\| event.metaKey) && event.keyCode === 13) {	×
170	event.stopPropagation();	×
171	event.preventDefault();	×
172	const currentEditorContent = editorRef.current?.getData();	×
173	currentEditorContent && void onSubmit(currentEditorContent);	×
174	setCurrentMessage('');	×
175	}
176	};
177
178	const internalEditorRefInstance = (currentEditorRefValue as AnyBecauseHard).domContainer?.current;	×
179	if (internalEditorRefInstance) {	×
180	internalEditorRefInstance.addEventListener('keydown', handleKeyDown, options);	×
181	}
182
183	return () => {	×
184	const internalEditorRefInstance = (currentEditorRefValue as AnyBecauseHard)?.domContainer?.current;	×
185	if (internalEditorRefInstance) {	×
186	internalEditorRefInstance.removeEventListener('keydown', handleKeyDown, options);	×
187	}
188	}
189	}, [onSubmit]);
190
191	// TODO: styling and debouncing
192	return <ContentStyles className={classes.inputTextbox} contentType='comment'>	×
193	<div className={classes.editor}>
194	<CKEditor
195	data={currentMessage}
196	ref={ckEditorRef}
197	editor={getCkCommentEditor(forumTypeSetting.get())}
198	isCollaborative={false}
199	onChange={(_event, editor: Editor) => {
200	// debouncedValidateEditor(editor.model.document)
201	// If transitioning from empty to nonempty or nonempty to empty,
202	// bypass throttling. These cases don't have the performance
203	// implications that motivated having throttling in the first place,
204	// and this prevents a timing bug with form-clearing on submit.
205	setCurrentMessage(editor.getData());	×
206
207	// if (!editor.data.model.hasContent(editor.model.document.getRoot('main'))) {
208	// throttledSetCkEditor.cancel();
209	// setCurrentMessage(editor.getData());
210	// } else {
211	// throttledSetCkEditor(() => editor.getData())
212	// }
213	}}
214	onReady={(editor) => {
215	editorRef.current = editor;	×
216	}}
217	config={editorConfig}
218	/>
219	</div>
220	</ContentStyles>
221	}
222
223	const welcomeGuideHtml = [	1✔
224	`<h1>Welcome to the LessWrong LLM Chat!</h1>`,
225	`<ul><li>Ctrl/Cmd + Enter to submit</li>`,
226	`<li>The LLM chat interface is currently hooked up to Claude Sonnet 3.5</li><li>While in development, LW is paying for the usage. This will likely change later.</li>`,
227	`<li>LaTeX is supported both on input and output</li><li>Images are not yet supported</li><li style="color: #bf360c;">While this feature is under heavy development, the LessWrong team will read conversations to help us with product iteration.</li></ul>`,
228	`<h1>Loading Context</h1><p><strong>Currently, context loading only happens with the first message in a conversation</strong></p>`,
229	`<p>When you start a new chat, your very first message is analyzed for potentially relevant context based on the text of your query and the post you are currently viewing (if any).`,
230	` The system will decide whether or not to load in posts and comments related to your query, your current post, both, or neither.</p>`,
231	`<p>The kinds of requests you can make include but are not limited to:</p>`,
232	`<p><i>About the current post</i></p><blockquote>`,
233	`<p>"Please give me a tl;dr of this post and tell me three surprising things in it."</p>`,
234	`<p><copy-paste section of post> "Please explain this to me including worked examples and explanations of the math notation."</p>`,
235	`<p>"What the objections to the OP in the comments and how did the author respond to them?"</p>`,
236	`<p>"What are background posts that would help understand this?"</p></blockquote>`,
237	`<p><i>Generally</i></p><blockquote><p>"Can you give me an overview of Infrabayesianism?"</p>`,
238	`<p>"Please give me an of the Sleeping Beauty problem and its significance?"</p></blockquote>`,
239	`<p>(Our chat is good for asking about niche LessWrong content.)</p><p>Feel free to try out other kinds of questions!!</p><p><em>(This guide can be hidden - see the button in the top right.)</em></p>`
240	].join('');
241
242	export const ChatInterface = ({classes}: {	1✔
243	classes: ClassesType<typeof styles>,
244	}) => {
245	const { Loading, MenuItem, ContentStyles, ContentItemBody } = Components;	×
246
247	const { currentConversation, setCurrentConversation, archiveConversation, orderedConversations, submitMessage, currentConversationLoading } = useLlmChat();	×
248
249	const lengthOfMostRecentMessage = currentConversation?.messages.slice(-1)[0]?.content.length	×
250
251	const { flash } = useMessages();	×
252
253	// TODO: come back and refactor this to use currentRoute & matchPath to get the url parameter instead
254	const { location } = useLocation();	×
255	const { pathname } = location;	×
256	const currentPostId = pathname.match(/\/posts\/([^/]+)\/[^/]+/)?.[1];	×
257
258	const messagesRef = useRef<HTMLDivElement>(null)	×
259	// useEffect to scroll to bottom of chat history after new message is added or most recent message is updated (because of streaming)
260	useEffect(() => {	×
261	if (messagesRef.current) {	×
262	messagesRef.current.scrollTop = messagesRef.current.scrollHeight;	×
263	}
264	}, [currentConversation?.messages.length, lengthOfMostRecentMessage]);	×
265
266	const [cookies, setCookies] = useCookiesWithConsent([HIDE_LLM_CHAT_GUIDE_COOKIE])	×
267	const showGuide = cookies[HIDE_LLM_CHAT_GUIDE_COOKIE] !== "true";	×
268	const setShowGuide = (show: boolean) => {	×
269	setCookies(HIDE_LLM_CHAT_GUIDE_COOKIE, show ? "false" : "true")	×
270	}
271
272	const llmChatGuide = <ContentStyles contentType="llmChat" className={classes.welcomeGuide}>	×
273	<div
274	onClick={() => setShowGuide(!showGuide)}	×
275	className={classes.welcomeGuideButton}
276	>
277	{showGuide ? "Hide Guide" : "Show LLM Guide"}	×
278	</div>
279	{showGuide && <ContentItemBody	×
280	className={classNames(classes.welcomeGuideText)}
281	dangerouslySetInnerHTML={{__html: welcomeGuideHtml}}
282	/>}
283	</ContentStyles>
284
285	const messagesForDisplay = <div className={classes.messages} ref={messagesRef}>	×
286	{llmChatGuide}
287	{currentConversation?.messages.map((message, index) => (	×
288	<LLMChatMessage key={index} message={message} classes={classes} />	×
289	))}
290	</div>
291
292	const exportHistoryToClipboard = () => {	×
293	if (!currentConversation) return	×
294	const conversationHistory = currentConversation.messages.filter(({role}) => ['user', 'assistant', 'user-context'].includes(role))	×
295	const formattedChatHistory = conversationHistory.map(({role, content}) => `${role.toUpperCase()}: ${content}`).join("\n")	×
296	void navigator.clipboard.writeText(formattedChatHistory)	×
297	flash('Chat history copied to clipboard')	×
298	}
299
300	const onSelect = (event: React.ChangeEvent<HTMLSelectElement>) => {	×
301	const newSelection = event.target.value;	×
302	const newSelectionId = newSelection === "New Conversation"	×
303	? undefined	×
304	: newSelection;
305
306	setCurrentConversation(newSelectionId);	×
307	}
308
309	const deleteConversation = (ev: React.MouseEvent, conversationId: string) => {	×
310	// TODO: figure out if we need both of these or just one (i.e. to prevent selection of the menu item)
311	ev.preventDefault();	×
312	ev.stopPropagation();	×
313	archiveConversation(conversationId);	×
314	};
315
316	console.log({orderedConversationsInfo: orderedConversations.map(({title, lastUpdatedAt, createdAt}) => ({title, lastUpdatedAt, createdAt}))})	×
317
UNCOV 318	const conversationSelect = <Select	×
319	onChange={onSelect}
320	value={currentConversation?._id ?? NEW_CONVERSATION_MENU_ITEM}	×
321	disableUnderline
322	className={classes.select}
323	MenuProps={{style: {zIndex: 10000000002}}} // TODO: figure out sensible z-index stuff
UNCOV 324	renderValue={(conversationId: string) => orderedConversations.find(c => c._id === conversationId)?.title ?? NEW_CONVERSATION_MENU_ITEM}	×
325	>
326	{
327	orderedConversations.map(({ title, _id }, index) => (
328	<MenuItem key={index} value={_id} className={classes.menuItem}>	×
329	{title ?? "...Title Pending..."}	×
UNCOV 330	<CloseIcon onClick={(ev) => deleteConversation(ev, _id)} className={classes.deleteConvoIcon} />	×
331	</MenuItem>
332	))}
333	<MenuItem value={NEW_CONVERSATION_MENU_ITEM} className={classes.menuItem}>
334	New Conversation
335	</MenuItem>
336	</Select>;
337
338
UNCOV 339	const options = <div className={classes.options}>	×
UNCOV 340	<Button onClick={() => setCurrentConversation()}>	×
341	New Chat
342	</Button>
343	<Button onClick={exportHistoryToClipboard} disabled={!currentConversation}>
344	Export
345	</Button>
346	{conversationSelect}
347	</div>
348
UNCOV 349	const handleSubmit = useCallback((message: string) => {	×
UNCOV 350	submitMessage(message, currentPostId);	×
351	}, [currentPostId, submitMessage]);
352
UNCOV 353	return <div className={classes.subRoot}>	×
354	{messagesForDisplay}
355	{currentConversationLoading && <Loading className={classes.loadingSpinner}/>}	×
356	<LLMInputTextbox onSubmit={handleSubmit} classes={classes} />
357	{options}
358	</div>
359	}
360
361
362	// Wrapper component needed so we can use deferRender
363	export const LanguageModelChat = ({classes}: {	1✔
364	classes: ClassesType<typeof styles>,
365	}) => {
UNCOV 366	return <DeferRender ssr={false}>	×
367	<div className={classes.root}>
368	<ChatInterface classes={classes} />
369	</div>
370	</DeferRender>;
371	}
372
373	const LanguageModelChatComponent = registerComponent('LanguageModelChat', LanguageModelChat, {styles});	1✔
374
375	declare global {
376	interface ComponentTypes {
377	LanguageModelChat: typeof LanguageModelChatComponent
378	}
379	}

ForumMagnum / ForumMagnum / 10602709930

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous