11525766962

Committed 25 Oct 2024 09:38PM UTC coverage: 31.453% (-0.02%) from 31.472%

Build # 11525766962

Build Type

Pull #9905

github

Committed by

web-flow

Commit Message

Merge dc8f040d8 into f20f0f0e3

Pull Request Pull Request #9905: Llm Chat Upgrades 2024-10-24

Run Details

5017 of 41839 branches covered (11.99%)

Branch coverage included in aggregate %.

12 of 80 new or added lines in 8 files covered. (15.0%)

6 existing lines in 4 files now uncovered.

29434 of 67694 relevant lines covered (43.48%)

174.2 hits per line

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

13.66

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

import React, { useEffect, useRef, useState, useCallback, useContext } 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 { NewLlmMessage, PromptContextOptions, RAG_MODE_SET, RagModeType, 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';
import { AnalyticsContext } from '@/lib/analyticsEvents';
import { AutosaveEditorStateContext } from '../editor/EditorFormComponent';
import { usePostsPageContext } from '../posts/PostsPage/PostsPageContext';

const styles = (theme: ThemeType) => ({
  root: {
    height: "calc(100vh - 190px)"
  },
  subRoot: {
    display: "flex",
    flexDirection: "column",
    height: "100%"
  },
  submission: {
    margin: 10,
    display: "flex",
    padding: 20,
    ...theme.typography.commentStyle,
  },
  editor: {
    minHeight: 60,
    '& .ck.ck-content': {
      minHeight: 60,
    },
    ...ckEditorStyles(theme),
    overflowY: 'scroll',
    paddingLeft: 20,
    paddingTop: 20,
    fontSize: '1.0rem',
    '& blockquote, & li': {
      fontSize: '1.0rem'
    }
  },
  inputTextbox: {
    margin: 10,
    marginTop: 20,
    borderRadius: 4,
    maxHeight: "40vh",
    backgroundColor: theme.palette.panelBackground.commentNodeEven,
    overflowY: 'hidden',
    overflowX: 'hidden',
    flexGrow: 0,
    flexShrink: 0,
    flexBasis: "auto",
    display: "flex",
    flexDirection: "column",
  },
  submitButton:{
    width: "fit-content",
    fontSize: "16px",
    color: theme.palette.lwTertiary.main,
    marginLeft: "5px",
    "&:hover": {
      opacity: .5,
      backgroundColor: "none",
    },
  },
  editorButtons: {
    display: "flex",
    justifyContent: "flex-end",
    padding: "10px",
  },
  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],
  },
  errorMessage: {
    backgroundColor: theme.palette.error.light,
  },
  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,
  },
  ragModeSelect: {
  },
  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
  },
});

const NEW_CONVERSATION_MENU_ITEM = "New Conversation";

const LLMChatMessage = ({message, classes}: {
  message: LlmMessagesFragment | NewLlmMessage,
  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',
        [classes.errorMessage]: role === 'error'
      })}
      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,
  };

  const submitEditorContentAndClear = useCallback(() => {
    const currentEditorContent = editorRef.current?.getData();
    currentEditorContent && void onSubmit(currentEditorContent);
    setCurrentMessage('');
  }, [onSubmit]);

  // 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();
        submitEditorContentAndClear();
      }
    };
  
    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, submitEditorContentAndClear]);

  const submitButton = <div className={classes.editorButtons}>
    <Button
      type='submit'
      id='llm-submit-button'
      className={classes.submitButton} 
      onClick={submitEditorContentAndClear}
    >
      Submit
    </Button>
  </div>;

  // 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>
    {submitButton}
  </ContentStyles>
}

const welcomeGuideHtml = [
  `<h1>Welcome to the LessWrong LLM Chat!</h1>`,
  `<ul><li>The LLM chat interface is currently hooked up to Claude Sonnet 3.5</li>`,
  `<li>LaTeX is supported both on input and output.`,
  `<li style="color: #bf360c;">The LessWrong team will read conversations to help us with product iteration during development.</li></ul>`,
  `<p><strong>Posts and comments may be loaded into the context window based on your <em>first message</em> (and based on the current post you are viewing).</strong></p>`,
].join('');

type CurrentPostContext = {
  currentPostId: string;
  postContext: Exclude<PromptContextOptions['postContext'], undefined>
} | {
  currentPostId?: undefined;
  postContext?: undefined;
};

function useCurrentPostContext(): CurrentPostContext {
  const { query, location } = useLocation();
  const { pathname } = location;
  const parsedPostId = pathname.match(/\/posts\/([^/]+)\/[^/]+/)?.[1];

  if (query.postId) {
    return {
      currentPostId: query.postId,
      postContext: 'post-editor'
    };
  }

  if (parsedPostId) {
    return {
      currentPostId: parsedPostId,
      postContext: 'post-page'
    };
  }

  return {};
}

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

  const { currentConversation, setCurrentConversation, archiveConversation, orderedConversations, submitMessage, currentConversationLoading } = useLlmChat();
  const { currentPostId, postContext } = useCurrentPostContext();
  const { autosaveEditorState } = useContext(AutosaveEditorStateContext);

  const [ragMode, setRagMode] = useState<RagModeType>('Auto'); // TODO: make this auto
  const { flash } = useMessages();

  const messagesRef = useRef<HTMLDivElement>(null);
  const lastMessageLengthRef = useRef(0);
  const previousMessagesLengthRef = useRef(0);

  // Scroll to bottom when new messages are added or the content of the last message grows due to streaming
  useEffect(() => {
    const messages = currentConversation?.messages ?? [];
    const currentMessagesLength = messages.length;

    const scrollToBottom = (behavior: 'auto' | 'smooth' = 'auto') => {
      if (messagesRef.current) {
        messagesRef.current.scrollTo({ 
          top: messagesRef.current.scrollHeight, 
          behavior 
        });
      }
    };

    const scrollToBottomIfNearBottom = () => {
      if (messagesRef.current) {
        const { scrollHeight, scrollTop, clientHeight } = messagesRef.current;
        const scrollThreshold = clientHeight * 0.2; // 20% of the visible area
        const isScrolledNearBottom = scrollHeight - scrollTop <= clientHeight + scrollThreshold;

        if (isScrolledNearBottom) {
          scrollToBottom('smooth');
        }
      }
    };

    // New message added
    if (currentMessagesLength > previousMessagesLengthRef.current) {
      scrollToBottom();
      previousMessagesLengthRef.current = currentMessagesLength;
    } 
    // Content of the last message changed (e.g., streaming)
    else if (messages.length > 0) {
      const lastMessage = messages[messages.length - 1];
      const currentLastMessageLength = lastMessage.content.length;

      if (currentLastMessageLength !== lastMessageLengthRef.current) {
        lastMessageLengthRef.current = currentLastMessageLength;
        
        // Delay scroll check slightly to allow for content update
        setTimeout(scrollToBottomIfNearBottom, 100);
      }
    }
  }, [currentConversation?.messages]);

  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} />
    ))}
  </div>

  const exportHistoryToClipboard = () => {
    if (!currentConversation) return
    const conversationHistory = currentConversation.messages.filter(({role}) => ['user', 'assistant', 'user-context'].includes(role))
    const formattedChatHistory = conversationHistory.map(({role, content}) => `<strong>${role.toUpperCase()}:</strong> ${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);
  };

  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 ragModeSelect = <Select 
      onChange={(e) => setRagMode(e.target.value as RagModeType)}
      value={ragMode}
      disableUnderline
      className={classes.ragModeSelect}
    >
      {RAG_MODE_SET.map((ragMode) => (
        <MenuItem key={ragMode} value={ragMode}>
          {ragMode}
        </MenuItem>
      ))}
    </Select>


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

  const handleSubmit = useCallback(async (message: string) => {
    if (autosaveEditorState) {
      await autosaveEditorState();
    }
    submitMessage({ query: message, ragMode, currentPostId, postContext });
  }, [autosaveEditorState, currentPostId, postContext, submitMessage, ragMode]);

  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}>
    <AnalyticsContext pageSectionContext='llmChat'>
      <div className={classes.root}>
        <ChatInterface classes={classes} />
      </div>
    </AnalyticsContext>
  </DeferRender>;
}

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

const LlmChatMessageComponent = registerComponent('LlmChatMessage', LLMChatMessage, {styles});

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

1	import React, { useEffect, useRef, useState, useCallback, useContext } 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 { NewLlmMessage, PromptContextOptions, RAG_MODE_SET, RagModeType, 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	import { AnalyticsContext } from '@/lib/analyticsEvents';	1✔
20	import { AutosaveEditorStateContext } from '../editor/EditorFormComponent';	1✔
21	import { usePostsPageContext } from '../posts/PostsPage/PostsPageContext';
22
23	const styles = (theme: ThemeType) => ({	2✔
24	root: {
25	height: "calc(100vh - 190px)"
26	},
27	subRoot: {
28	display: "flex",
29	flexDirection: "column",
30	height: "100%"
31	},
32	submission: {
33	margin: 10,
34	display: "flex",
35	padding: 20,
36	...theme.typography.commentStyle,
37	},
38	editor: {
39	minHeight: 60,
40	'& .ck.ck-content': {
41	minHeight: 60,
42	},
43	...ckEditorStyles(theme),
44	overflowY: 'scroll',
45	paddingLeft: 20,
46	paddingTop: 20,
47	fontSize: '1.0rem',
48	'& blockquote, & li': {
49	fontSize: '1.0rem'
50	}
51	},
52	inputTextbox: {
53	margin: 10,
54	marginTop: 20,
55	borderRadius: 4,
56	maxHeight: "40vh",
57	backgroundColor: theme.palette.panelBackground.commentNodeEven,
58	overflowY: 'hidden',
59	overflowX: 'hidden',
60	flexGrow: 0,
61	flexShrink: 0,
62	flexBasis: "auto",
63	display: "flex",
64	flexDirection: "column",
65	},
66	submitButton:{
67	width: "fit-content",
68	fontSize: "16px",
69	color: theme.palette.lwTertiary.main,
70	marginLeft: "5px",
71	"&:hover": {
72	opacity: .5,
73	backgroundColor: "none",
74	},
75	},
76	editorButtons: {
77	display: "flex",
78	justifyContent: "flex-end",
79	padding: "10px",
80	},
81	welcomeGuide: {
82	margin: 10,
83	display: "flex",
84	flexDirection: "column",
85	},
86	welcomeGuideText: {
87	padding: 20,
88	backgroundColor: theme.palette.grey[100],
89	borderRadius: 10,
90	},
91	welcomeGuideButton: {
92	cursor: "pointer",
93	opacity: 0.8,
94	alignSelf: "flex-end",
95	fontStyle: "italic",
96	marginBottom: 4
97	},
98	chatMessage: {
99	padding: 20,
100	margin: 10,
101	borderRadius: 10,
102	backgroundColor: theme.palette.grey[100],
103	},
104	chatMessageContent: {
105	},
106	userMessage: {
107	backgroundColor: theme.palette.grey[300],
108	},
109	errorMessage: {
110	backgroundColor: theme.palette.error.light,
111	},
112	messages: {
113	overflowY: "scroll",
114	flexGrow: 1,
115	//the last child has margin bottom 0 (doesn't work)
116	"& > *:last-child": {
117	marginBottom: 0
118	}
119	},
120	options: {
121	flexGrow: 0,
122	flexShrink: 0,
123	flexBasis: "auto",
124	fontFamily: theme.palette.fonts.sansSerifStack,
125	marginLeft: 10
126	},
127	checkbox: {
128	padding: 8
129	},
130	select: {
131	// TODO: maybe really the styling of the options section should be flex display and flex grow stuff
132	maxWidth: 250,
133	},
134	ragModeSelect: {
135	},
136	menuItem: {
137	zIndex: theme.zIndexes.languageModelChat + 10,
138	display: "flex",
139	justifyContent: "space-between",
140	alignItems: "center"
141	},
142	deleteConvoIcon: {
143	marginLeft: 10,
144	cursor: "pointer",
145	opacity: 0.8,
146	width: 16
147	},
148	loadingSpinner: {
149	marginTop: 10
150	},
151	});
152
153	const NEW_CONVERSATION_MENU_ITEM = "New Conversation";	1✔
154
155	const LLMChatMessage = ({message, classes}: {	1✔
156	message: LlmMessagesFragment \| NewLlmMessage,
157	classes: ClassesType<typeof styles>,
158	}) => {
159	const { ContentItemBody, ContentStyles } = Components;	×
160
161	const { role, content } = message;	×
162
163	return <ContentStyles contentType="llmChat" className={classes.chatMessageContent}>	×
164	<ContentItemBody
165	className={classNames(classes.chatMessage, {
166	[classes.userMessage]: role === 'user',
167	[classes.errorMessage]: role === 'error'
168	})}
169	dangerouslySetInnerHTML={{__html: content}}
170	/>
171	</ContentStyles>
172	}
173
174	const LLMInputTextbox = ({onSubmit, classes}: {	1✔
175	onSubmit: (message: string) => void,
176	classes: ClassesType<typeof styles>,
177	}) => {
178	const { ContentStyles } = Components;	×
179
180	const [currentMessage, setCurrentMessage] = useState('');	×
181	const ckEditorRef = useRef<CKEditor<any> \| null>(null);	×
182	const editorRef = useRef<Editor \| null>(null);	×
183
184	// TODO: we probably want to come back to this and enable cloud services for image uploading
185	const editorConfig = {	×
186	placeholder: 'Type here. Ctrl/Cmd + Enter to submit.',
187	mention: mentionPluginConfiguration,
188	};
189
190	const submitEditorContentAndClear = useCallback(() => {	×
191	const currentEditorContent = editorRef.current?.getData();	×
192	currentEditorContent && void onSubmit(currentEditorContent);	×
193	setCurrentMessage('');	×
194	}, [onSubmit]);
195
196	// We need to pipe through the `conversationId` and do all of this eventListener setup/teardown like this because
197	// otherwise messages get submitted to whatever conversation was "current" when the editor was initially loaded
198	// Running this useEffect whenever either the conversationId or onSubmit changes ensures we remove and re-attach a fresh event listener with the correct "targets"
199	useEffect(() => {	×
200	const currentEditorRefValue = ckEditorRef.current;	×
201
202	const options = { capture: true };	×
203	const handleKeyDown = (event: KeyboardEvent) => {	×
204	if ((event.ctrlKey \|\| event.metaKey) && event.keyCode === 13) {	×
205	event.stopPropagation();	×
206	event.preventDefault();	×
207	submitEditorContentAndClear();	×
208	}
209	};
210
211	const internalEditorRefInstance = (currentEditorRefValue as AnyBecauseHard).domContainer?.current;	×
212	if (internalEditorRefInstance) {	×
213	internalEditorRefInstance.addEventListener('keydown', handleKeyDown, options);	×
214	}
215
216	return () => {	×
217	const internalEditorRefInstance = (currentEditorRefValue as AnyBecauseHard)?.domContainer?.current;	×
218	if (internalEditorRefInstance) {	×
219	internalEditorRefInstance.removeEventListener('keydown', handleKeyDown, options);	×
220	}
221	}
222	}, [onSubmit, submitEditorContentAndClear]);
223
224	const submitButton = <div className={classes.editorButtons}>	×
225	<Button
226	type='submit'
227	id='llm-submit-button'
228	className={classes.submitButton}
229	onClick={submitEditorContentAndClear}
230	>
231	Submit
232	</Button>
233	</div>;
234
235	// TODO: styling and debouncing
236	return <ContentStyles className={classes.inputTextbox} contentType='comment'>	×
237	<div className={classes.editor}>
238	<CKEditor
239	data={currentMessage}
240	ref={ckEditorRef}
241	editor={getCkCommentEditor(forumTypeSetting.get())}
242	isCollaborative={false}
243	onChange={(_event, editor: Editor) => {
244	// debouncedValidateEditor(editor.model.document)
245	// If transitioning from empty to nonempty or nonempty to empty,
246	// bypass throttling. These cases don't have the performance
247	// implications that motivated having throttling in the first place,
248	// and this prevents a timing bug with form-clearing on submit.
249	setCurrentMessage(editor.getData());	×
250
251	// if (!editor.data.model.hasContent(editor.model.document.getRoot('main'))) {
252	// throttledSetCkEditor.cancel();
253	// setCurrentMessage(editor.getData());
254	// } else {
255	// throttledSetCkEditor(() => editor.getData())
256	// }
257	}}
258	onReady={(editor) => {
259	editorRef.current = editor;	×
260	}}
261	config={editorConfig}
262	/>
263	</div>
264	{submitButton}
265	</ContentStyles>
266	}
267
268	const welcomeGuideHtml = [	1✔
269	`<h1>Welcome to the LessWrong LLM Chat!</h1>`,
270	`<ul><li>The LLM chat interface is currently hooked up to Claude Sonnet 3.5</li>`,
271	`<li>LaTeX is supported both on input and output.`,
272	`<li style="color: #bf360c;">The LessWrong team will read conversations to help us with product iteration during development.</li></ul>`,
273	`<p><strong>Posts and comments may be loaded into the context window based on your <em>first message</em> (and based on the current post you are viewing).</strong></p>`,
274	].join('');
275
276	type CurrentPostContext = {
277	currentPostId: string;
278	postContext: Exclude<PromptContextOptions['postContext'], undefined>
279	} \| {
280	currentPostId?: undefined;
281	postContext?: undefined;
282	};
283
284	function useCurrentPostContext(): CurrentPostContext {
NEW 285	const { query, location } = useLocation();	×
NEW 286	const { pathname } = location;	×
NEW 287	const parsedPostId = pathname.match(/\/posts\/([^/]+)\/[^/]+/)?.[1];	×
288
NEW 289	if (query.postId) {	×
290	return {	×
291	currentPostId: query.postId,
292	postContext: 'post-editor'
293	};
294	}
295
NEW 296	if (parsedPostId) {	×
297	return {	×
298	currentPostId: parsedPostId,
299	postContext: 'post-page'
300	};
301	}
302
303	return {};	×
304	}
305
306	export const ChatInterface = ({classes}: {	1✔
307	classes: ClassesType<typeof styles>,
308	}) => {
309	const { LlmChatMessage, Loading, MenuItem, ContentStyles, ContentItemBody } = Components;	×
310
311	const { currentConversation, setCurrentConversation, archiveConversation, orderedConversations, submitMessage, currentConversationLoading } = useLlmChat();	×
312	const { currentPostId, postContext } = useCurrentPostContext();	×
313	const { autosaveEditorState } = useContext(AutosaveEditorStateContext);	×
314
NEW 315	const [ragMode, setRagMode] = useState<RagModeType>('Auto'); // TODO: make this auto	×
UNCOV 316	const { flash } = useMessages();	×
317
318	const messagesRef = useRef<HTMLDivElement>(null);	×
319	const lastMessageLengthRef = useRef(0);	×
320	const previousMessagesLengthRef = useRef(0);	×
321
322	// Scroll to bottom when new messages are added or the content of the last message grows due to streaming
323	useEffect(() => {	×
324	const messages = currentConversation?.messages ?? [];	×
325	const currentMessagesLength = messages.length;	×
326
327	const scrollToBottom = (behavior: 'auto' \| 'smooth' = 'auto') => {	×
328	if (messagesRef.current) {	×
329	messagesRef.current.scrollTo({	×
330	top: messagesRef.current.scrollHeight,
331	behavior
332	});
333	}
334	};
335
336	const scrollToBottomIfNearBottom = () => {	×
337	if (messagesRef.current) {	×
338	const { scrollHeight, scrollTop, clientHeight } = messagesRef.current;	×
339	const scrollThreshold = clientHeight * 0.2; // 20% of the visible area	×
340	const isScrolledNearBottom = scrollHeight - scrollTop <= clientHeight + scrollThreshold;	×
341
342	if (isScrolledNearBottom) {	×
343	scrollToBottom('smooth');	×
344	}
345	}
346	};
347
348	// New message added
349	if (currentMessagesLength > previousMessagesLengthRef.current) {	×
350	scrollToBottom();	×
351	previousMessagesLengthRef.current = currentMessagesLength;	×
352	}	×
353	// Content of the last message changed (e.g., streaming)
354	else if (messages.length > 0) {
355	const lastMessage = messages[messages.length - 1];	×
356	const currentLastMessageLength = lastMessage.content.length;	×
357
358	if (currentLastMessageLength !== lastMessageLengthRef.current) {	×
359	lastMessageLengthRef.current = currentLastMessageLength;	×
360
361	// Delay scroll check slightly to allow for content update
362	setTimeout(scrollToBottomIfNearBottom, 100);	×
363	}
364	}
365	}, [currentConversation?.messages]);	×
366
367	const [cookies, setCookies] = useCookiesWithConsent([HIDE_LLM_CHAT_GUIDE_COOKIE])	×
368	const showGuide = cookies[HIDE_LLM_CHAT_GUIDE_COOKIE] !== "true";	×
369	const setShowGuide = (show: boolean) => {	×
370	setCookies(HIDE_LLM_CHAT_GUIDE_COOKIE, show ? "false" : "true")	×
371	}
372
373	const llmChatGuide = <ContentStyles contentType="llmChat" className={classes.welcomeGuide}>	×
374	<div
375	onClick={() => setShowGuide(!showGuide)}	×
376	className={classes.welcomeGuideButton}
377	>
378	{showGuide ? "Hide Guide" : "Show LLM Guide"}	×
379	</div>
380	{showGuide && <ContentItemBody	×
381	className={classNames(classes.welcomeGuideText)}
382	dangerouslySetInnerHTML={{__html: welcomeGuideHtml}}
383	/>}
384	</ContentStyles>
385
386	const messagesForDisplay = <div className={classes.messages} ref={messagesRef}>	×
387	{llmChatGuide}
388	{currentConversation?.messages.map((message, index) => (	×
389	<LlmChatMessage key={index} message={message} />	×
390	))}
391	</div>
392
393	const exportHistoryToClipboard = () => {	×
394	if (!currentConversation) return	×
395	const conversationHistory = currentConversation.messages.filter(({role}) => ['user', 'assistant', 'user-context'].includes(role))	×
396	const formattedChatHistory = conversationHistory.map(({role, content}) => `<strong>${role.toUpperCase()}:</strong> ${content}`).join("\n")	×
397	void navigator.clipboard.writeText(formattedChatHistory)	×
398	flash('Chat history copied to clipboard')	×
399	}
400
401	const onSelect = (event: React.ChangeEvent<HTMLSelectElement>) => {	×
402	const newSelection = event.target.value;	×
403	const newSelectionId = newSelection === "New Conversation"	×
404	? undefined	×
405	: newSelection;
406
407	setCurrentConversation(newSelectionId);	×
408	}
409
410	const deleteConversation = (ev: React.MouseEvent, conversationId: string) => {	×
411	// TODO: figure out if we need both of these or just one (i.e. to prevent selection of the menu item)
412	ev.preventDefault();	×
413	ev.stopPropagation();	×
414	archiveConversation(conversationId);	×
415	};
416
417	const conversationSelect = <Select	×
418	onChange={onSelect}
419	value={currentConversation?._id ?? NEW_CONVERSATION_MENU_ITEM}	×
420	disableUnderline
421	className={classes.select}
422	MenuProps={{style: {zIndex: 10000000002}}} // TODO: figure out sensible z-index stuff
423	renderValue={(conversationId: string) => orderedConversations.find(c => c._id === conversationId)?.title ?? NEW_CONVERSATION_MENU_ITEM}	×
424	>
425	{
426	orderedConversations.map(({ title, _id }, index) => (
427	<MenuItem key={index} value={_id} className={classes.menuItem}>	×
428	{title ?? "...Title Pending..."}	×
429	<CloseIcon onClick={(ev) => deleteConversation(ev, _id)} className={classes.deleteConvoIcon} />	×
430	</MenuItem>
431	))}
432	<MenuItem value={NEW_CONVERSATION_MENU_ITEM} className={classes.menuItem}>
433	New Conversation
434	</MenuItem>
435	</Select>;
436
NEW 437	const ragModeSelect = <Select	×
NEW 438	onChange={(e) => setRagMode(e.target.value as RagModeType)}	×
439	value={ragMode}
440	disableUnderline
441	className={classes.ragModeSelect}
442	>
443	{RAG_MODE_SET.map((ragMode) => (
NEW 444	<MenuItem key={ragMode} value={ragMode}>	×
445	{ragMode}
446	</MenuItem>
447	))}
448	</Select>
449
450
451	const options = <div className={classes.options}>	×
452	<Button onClick={() => setCurrentConversation()}>	×
453	New Chat
454	</Button>
455	<Button onClick={exportHistoryToClipboard} disabled={!currentConversation}>
456	Export
457	</Button>
458	{conversationSelect}
459	{ragModeSelect}
460	</div>
461
462	const handleSubmit = useCallback(async (message: string) => {	×
463	if (autosaveEditorState) {	×
464	await autosaveEditorState();	×
465	}
NEW 466	submitMessage({ query: message, ragMode, currentPostId, postContext });	×
467	}, [autosaveEditorState, currentPostId, postContext, submitMessage, ragMode]);
468
469	return <div className={classes.subRoot}>	×
470	{messagesForDisplay}
471	{currentConversationLoading && <Loading className={classes.loadingSpinner}/>}	×
472	<LLMInputTextbox onSubmit={handleSubmit} classes={classes} />
473	{options}
474	</div>
475	}
476
477
478	// Wrapper component needed so we can use deferRender
479	export const LanguageModelChat = ({classes}: {	1✔
480	classes: ClassesType<typeof styles>,
481	}) => {
482	return <DeferRender ssr={false}>	×
483	<AnalyticsContext pageSectionContext='llmChat'>
484	<div className={classes.root}>
485	<ChatInterface classes={classes} />
486	</div>
487	</AnalyticsContext>
488	</DeferRender>;
489	}
490
491	const LanguageModelChatComponent = registerComponent('LanguageModelChat', LanguageModelChat, {styles});	1✔
492
493	const LlmChatMessageComponent = registerComponent('LlmChatMessage', LLMChatMessage, {styles});	1✔
494
495	declare global {
496	interface ComponentTypes {
497	LanguageModelChat: typeof LanguageModelChatComponent
498	LlmChatMessage: typeof LlmChatMessageComponent
499	}
500	}

ForumMagnum / ForumMagnum / 11525766962

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