11580018638

Committed 29 Oct 2024 06:16PM UTC coverage: 31.333% (-0.02%) from 31.348%

Build # 11580018638

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #9905 from ForumMagnum/llm-chat-upgrades-20241024

Llm Chat Upgrades 2024-10-24

Run Details

5031 of 42380 branches covered (11.87%)

Branch coverage included in aggregate %.

11 of 75 new or added lines in 6 files covered. (14.67%)

7 existing lines in 4 files now uncovered.

29646 of 68294 relevant lines covered (43.41%)

173.86 hits per line

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

16.52

/packages/lesswrong/components/languageModels/LlmConversationsViewingPage.tsx

import React, { useCallback, useEffect, useState } from 'react';
import { Components, registerComponent } from '../../lib/vulcan-lib';
import { AnalyticsContext, useTracking } from "../../lib/analyticsEvents";
import { useMulti } from '@/lib/crud/withMulti';
import { useSingle } from '@/lib/crud/withSingle';
import { userGetDisplayName } from '@/lib/collections/users/helpers';
import classNames from 'classnames';
import { useCurrentUser } from '../common/withUser';
import { userIsAdmin } from '@/lib/vulcan-users';
import { useLocation, useNavigate } from '@/lib/routeUtil';
import { isEmpty } from 'underscore';
import qs from 'qs';
import { Link } from '../../lib/reactRouterWrapper';
import Checkbox, { CheckboxProps } from "@material-ui/core/Checkbox";

const styles = (theme: ThemeType) => ({
  root: {
    display: "flex",
    justifyContent: "flex-start",
  },
  mainColumn: {
    display: "flex",
    flexDirection: "row",
    marginLeft: 20,
  },
  conversationSelectorRoot: {
    marginRight: 24,
  },
  conversationSelector: {
    height: "calc(100vh - 162px)",
    overflowY: "scroll",
  },
  conversationViewer: {
    marginTop: 48,
    borderRadius: 5,
    width: 500,
    height: "calc(100vh - 162px)",
    backgroundColor: theme.palette.grey[0],
    overflowY: "scroll",
  },
  checkboxContainer: {
    display: "flex",
    alignItems: "center",
    gap: 10,
    fontFamily: theme.palette.fonts.sansSerifStack
  },
  checkbox: {
    margin: 0,
  },
  conversationViewerTitle: {
    ...theme.typography.commentStyle,
    marginLeft: 20,
  },
  conversationRow: {
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    width: 600,
    padding: 10,
    marginBottom: 5,
    backgroundColor: theme.palette.grey[0],
    borderRadius: 5,
    cursor: "pointer",
    "&:hover": {
      backgroundColor: theme.palette.grey[100],
    }
  },
  conversationRowSelected: {
    backgroundColor: theme.palette.grey[300],
  },
  conversationRowGroup: {
    display: "flex",
    alignItems: "center",
  },
  conversationRowUsername: {
    ...theme.typography.commentStyle,
    width: 90,
    fontWeight: 400,
    fontSize: "0.95rem",
    marginRight: 10,
    opacity: 0.7,
    overflow: "hidden",
    textOverflow: "ellipsis",
    whiteSpace: "nowrap",
  },
  conversationRowTitle: {
    ...theme.typography.commentStyle,
    maxWidth: 375,
    fontWeight: 500,
    fontSize: "1.15rem",
    overflow: "hidden",
    textOverflow: "ellipsis",
    whiteSpace: "nowrap",
  },
  conversationRowNumLastUpdated: {
    ...theme.typography.commentStyle,
    padding: 2,
    fontWeight: 400,
    fontSize: "0.9rem",
    opacity: 0.8
  },
  conversationRowWordCount: {
    ...theme.typography.commentStyle,
    padding: 2,
    fontWeight: 400,
    fontSize: "0.9rem",
    fontStyle: "italic",
    opacity: 0.7,
    marginRight: 10,
  },
});

const LlmConversationRow = ({conversation, currentConversationId, setCurrentConversationId, classes}: {
  conversation: LlmConversationsViewingPageFragment
  currentConversationId?: string
  setCurrentConversationId: (conversationId: string) => void,
  classes: ClassesType<typeof styles>,
}) => {
  const { LWTooltip, FormatDate, UsersNameDisplay } = Components;
  const isCurrentlySelected = currentConversationId === conversation._id;
  const { title, user, lastUpdatedAt, createdAt } = conversation;

  const conversationCharacterCount = conversation.totalCharacterCount ?? 0;
  const estimatedTokenCount = Math.round(conversationCharacterCount / 4.4);

  return <div className={classNames(classes.conversationRow, {[classes.conversationRowSelected]: isCurrentlySelected})}>
    <span className={classes.conversationRowGroup}>
      <UsersNameDisplay user={user} className={classes.conversationRowUsername} hideFollowButton />
      <span className={classes.conversationRowTitle} onClick={()=>setCurrentConversationId(conversation._id)}>
        <Link to={`/admin/llmConversations?conversationId=${conversation._id}`}>{title}</Link>
      </span>
    </span>
    <span className={classes.conversationRowGroup}>
      <LWTooltip title={`${conversationCharacterCount} characters`} placement='top'>
        <span className={classes.conversationRowWordCount}>{estimatedTokenCount}</span>
      </LWTooltip>
      <span className={classes.conversationRowNumLastUpdated}><FormatDate date={lastUpdatedAt ?? createdAt}/></span>
    </span>
  </div>
}


// Lists all conversations for admins to select from
const LlmConversationSelector = ({currentConversationId, setCurrentConversationId, classes}: {
  currentConversationId?: string
  setCurrentConversationId: (conversationId: string) => void,
  classes: ClassesType<typeof styles>,
}) => {

  const [showDeleted, setShowDeleted] = useState(false);
  const [showAdmin, setShowAdmin] = useState(true);

  const { results, loading } = useMulti({
    collectionName: "LlmConversations",
    fragmentName: "LlmConversationsViewingPageFragment",
    terms: { view: "llmConversationsAll", showDeleted },
    limit: 200,
  });

  const filteredResults = results?.filter((conversation) => {
    if (!showAdmin && userIsAdmin(conversation.user)) {
      return false;
    }
    return true;
  });

  const navigate = useNavigate();
  const location = useLocation();
  const { query } = location;

  const updateConversationId = useCallback((conversationId: string) => {
    setCurrentConversationId(conversationId);
    const currentQuery = isEmpty(query) ? {} : query;
    const newQuery = { ...currentQuery, conversationId };
    navigate({...location.location, search: `?${qs.stringify(newQuery)}`})
  }, [query, location, navigate, setCurrentConversationId]);

  useEffect(() => {
    if (results) {
      const initialConversationId = query.conversationId ?? results[0]?._id;
      updateConversationId(initialConversationId);
    }
    //eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  if (!results && loading) {
    return <Components.Loading />
  }
  
  if (!results) {
    return <div>No conversations found</div>;
  }

  return <div className={classes.conversationSelectorRoot}>
    <div className={classes.checkboxContainer}>
      <span>Deleted <Checkbox checked={showDeleted} onChange={() => setShowDeleted(!showDeleted)} className={classes.checkbox}/></span>
      <span>Show admin <Checkbox checked={showAdmin} onChange={() => setShowAdmin(!showAdmin)} className={classes.checkbox}/></span>
    </div>
    <div className={classes.conversationSelector}>
      {filteredResults && filteredResults.length > 0
        ? filteredResults.map((conversation, idx) => {
          return <LlmConversationRow
            key={idx} 
            conversation={conversation}
            currentConversationId={currentConversationId}
            setCurrentConversationId={updateConversationId}
            classes={classes} />;
        })
        : <div>No conversations found</div>
    }
  </div>
  </div>
}


const LlmConversationViewer = ({conversationId, classes}: {
  conversationId?: string
  classes: ClassesType<typeof styles>,
}) => {
  const { LlmChatMessage, SectionTitle } = Components

  const { document: conversation, loading } = useSingle({
    collectionName: "LlmConversations",
    fragmentName: "LlmConversationsWithMessagesFragment",
    documentId: conversationId,
    skip: !conversationId
  });


  if (!conversationId) {
    return <div className={classes.conversationViewer}>
      No conversation selected
    </div>
  }

  if (!conversation && loading) {
    return <div className={classes.conversationViewer}>
      <Components.Loading />
    </div>
  }

  if (!conversation) {
    throw new Error("No conversation with selectedId");
  }
  
  const { title, messages } = conversation;

  return <div className={classes.conversationViewer}>
    <SectionTitle title={title} titleClassName={classes.conversationViewerTitle} />
    {!messages?.length && <div>No messages in this conversation</div>}
    {messages?.length && messages.map((message, idx) => {
      return <LlmChatMessage key={idx} message={message} />
    })}
  </div> 
}


export const LlmConversationsViewingPage = ({classes}: {
  classes: ClassesType<typeof styles>,
}) => {
  const currentUser = useCurrentUser();
  const [currentConversationId, setCurrentConversationId] = useState<string>();

  if (!userIsAdmin(currentUser)) {
    return <Components.Error404 />
  }

  return <AnalyticsContext pageContext="llmConversationViewingPage">
    <div className={classes.root}>
      <div className={classes.mainColumn}>
        <LlmConversationSelector
          currentConversationId={currentConversationId}
          setCurrentConversationId={setCurrentConversationId}
          classes={classes}
        />
        <LlmConversationViewer
          conversationId={currentConversationId}
          classes={classes}
        />
      </div>
  </div>
  </AnalyticsContext>
}

const LlmConversationsViewingPageComponent = registerComponent('LlmConversationsViewingPage', LlmConversationsViewingPage, {styles});

declare global {
  interface ComponentTypes {
    LlmConversationsViewingPage: typeof LlmConversationsViewingPageComponent
  }
}

1	import React, { useCallback, useEffect, useState } from 'react';	3✔
2	import { Components, registerComponent } from '../../lib/vulcan-lib';	1✔
3	import { AnalyticsContext, useTracking } from "../../lib/analyticsEvents";	1✔
4	import { useMulti } from '@/lib/crud/withMulti';	1✔
5	import { useSingle } from '@/lib/crud/withSingle';	1✔
6	import { userGetDisplayName } from '@/lib/collections/users/helpers';
7	import classNames from 'classnames';	1✔
8	import { useCurrentUser } from '../common/withUser';	1✔
9	import { userIsAdmin } from '@/lib/vulcan-users';	1✔
10	import { useLocation, useNavigate } from '@/lib/routeUtil';	1✔
11	import { isEmpty } from 'underscore';	1✔
12	import qs from 'qs';	1✔
13	import { Link } from '../../lib/reactRouterWrapper';	1✔
14	import Checkbox, { CheckboxProps } from "@material-ui/core/Checkbox";	1✔
15
16	const styles = (theme: ThemeType) => ({	1✔
17	root: {
18	display: "flex",
19	justifyContent: "flex-start",
20	},
21	mainColumn: {
22	display: "flex",
23	flexDirection: "row",
24	marginLeft: 20,
25	},
26	conversationSelectorRoot: {
27	marginRight: 24,
28	},
29	conversationSelector: {
30	height: "calc(100vh - 162px)",
31	overflowY: "scroll",
32	},
33	conversationViewer: {
34	marginTop: 48,
35	borderRadius: 5,
36	width: 500,
37	height: "calc(100vh - 162px)",
38	backgroundColor: theme.palette.grey[0],
39	overflowY: "scroll",
40	},
41	checkboxContainer: {
42	display: "flex",
43	alignItems: "center",
44	gap: 10,
45	fontFamily: theme.palette.fonts.sansSerifStack
46	},
47	checkbox: {
48	margin: 0,
49	},
50	conversationViewerTitle: {
51	...theme.typography.commentStyle,
52	marginLeft: 20,
53	},
54	conversationRow: {
55	display: "flex",
56	justifyContent: "space-between",
57	alignItems: "center",
58	width: 600,
59	padding: 10,
60	marginBottom: 5,
61	backgroundColor: theme.palette.grey[0],
62	borderRadius: 5,
63	cursor: "pointer",
64	"&:hover": {
65	backgroundColor: theme.palette.grey[100],
66	}
67	},
68	conversationRowSelected: {
69	backgroundColor: theme.palette.grey[300],
70	},
71	conversationRowGroup: {
72	display: "flex",
73	alignItems: "center",
74	},
75	conversationRowUsername: {
76	...theme.typography.commentStyle,
77	width: 90,
78	fontWeight: 400,
79	fontSize: "0.95rem",
80	marginRight: 10,
81	opacity: 0.7,
82	overflow: "hidden",
83	textOverflow: "ellipsis",
84	whiteSpace: "nowrap",
85	},
86	conversationRowTitle: {
87	...theme.typography.commentStyle,
88	maxWidth: 375,
89	fontWeight: 500,
90	fontSize: "1.15rem",
91	overflow: "hidden",
92	textOverflow: "ellipsis",
93	whiteSpace: "nowrap",
94	},
95	conversationRowNumLastUpdated: {
96	...theme.typography.commentStyle,
97	padding: 2,
98	fontWeight: 400,
99	fontSize: "0.9rem",
100	opacity: 0.8
101	},
102	conversationRowWordCount: {
103	...theme.typography.commentStyle,
104	padding: 2,
105	fontWeight: 400,
106	fontSize: "0.9rem",
107	fontStyle: "italic",
108	opacity: 0.7,
109	marginRight: 10,
110	},
111	});
112
113	const LlmConversationRow = ({conversation, currentConversationId, setCurrentConversationId, classes}: {	1✔
114	conversation: LlmConversationsViewingPageFragment
115	currentConversationId?: string
116	setCurrentConversationId: (conversationId: string) => void,
117	classes: ClassesType<typeof styles>,
118	}) => {
119	const { LWTooltip, FormatDate, UsersNameDisplay } = Components;	×
120	const isCurrentlySelected = currentConversationId === conversation._id;	×
121	const { title, user, lastUpdatedAt, createdAt } = conversation;	×
122
123	const conversationCharacterCount = conversation.totalCharacterCount ?? 0;	×
124	const estimatedTokenCount = Math.round(conversationCharacterCount / 4.4);	×
125
126	return <div className={classNames(classes.conversationRow, {[classes.conversationRowSelected]: isCurrentlySelected})}>	×
127	<span className={classes.conversationRowGroup}>
128	<UsersNameDisplay user={user} className={classes.conversationRowUsername} hideFollowButton />
129	<span className={classes.conversationRowTitle} onClick={()=>setCurrentConversationId(conversation._id)}>	×
130	<Link to={`/admin/llmConversations?conversationId=${conversation._id}`}>{title}</Link>
131	</span>
132	</span>
133	<span className={classes.conversationRowGroup}>
134	<LWTooltip title={`${conversationCharacterCount} characters`} placement='top'>
135	<span className={classes.conversationRowWordCount}>{estimatedTokenCount}</span>
136	</LWTooltip>
137	<span className={classes.conversationRowNumLastUpdated}><FormatDate date={lastUpdatedAt ?? createdAt}/></span>	×
138	</span>
139	</div>
140	}
141
142
143	// Lists all conversations for admins to select from
144	const LlmConversationSelector = ({currentConversationId, setCurrentConversationId, classes}: {	1✔
145	currentConversationId?: string
146	setCurrentConversationId: (conversationId: string) => void,
147	classes: ClassesType<typeof styles>,
148	}) => {
149
NEW 150	const [showDeleted, setShowDeleted] = useState(false);	×
NEW 151	const [showAdmin, setShowAdmin] = useState(true);	×
152
UNCOV 153	const { results, loading } = useMulti({	×
154	collectionName: "LlmConversations",
155	fragmentName: "LlmConversationsViewingPageFragment",
156	terms: { view: "llmConversationsAll", showDeleted },
157	limit: 200,
158	});
159
NEW 160	const filteredResults = results?.filter((conversation) => {	×
NEW 161	if (!showAdmin && userIsAdmin(conversation.user)) {	×
NEW 162	return false;	×
163	}
NEW 164	return true;	×
165	});
166
167	const navigate = useNavigate();	×
168	const location = useLocation();	×
169	const { query } = location;	×
170
171	const updateConversationId = useCallback((conversationId: string) => {	×
172	setCurrentConversationId(conversationId);	×
173	const currentQuery = isEmpty(query) ? {} : query;	×
174	const newQuery = { ...currentQuery, conversationId };	×
175	navigate({...location.location, search: `?${qs.stringify(newQuery)}`})	×
176	}, [query, location, navigate, setCurrentConversationId]);
177
178	useEffect(() => {	×
179	if (results) {	×
180	const initialConversationId = query.conversationId ?? results[0]?._id;	×
181	updateConversationId(initialConversationId);	×
182	}
183	//eslint-disable-next-line react-hooks/exhaustive-deps
184	}, []);
185
186	if (!results && loading) {	×
187	return <Components.Loading />	×
188	}
189
190	if (!results) {	×
191	return <div>No conversations found</div>;	×
192	}
193
194	return <div className={classes.conversationSelectorRoot}>	×
195	<div className={classes.checkboxContainer}>
NEW 196	<span>Deleted <Checkbox checked={showDeleted} onChange={() => setShowDeleted(!showDeleted)} className={classes.checkbox}/></span>	×
NEW 197	<span>Show admin <Checkbox checked={showAdmin} onChange={() => setShowAdmin(!showAdmin)} className={classes.checkbox}/></span>	×
198	</div>
199	<div className={classes.conversationSelector}>
200	{filteredResults && filteredResults.length > 0	×
201	? filteredResults.map((conversation, idx) => {	×
NEW 202	return <LlmConversationRow	×
203	key={idx}
204	conversation={conversation}
205	currentConversationId={currentConversationId}
206	setCurrentConversationId={updateConversationId}
207	classes={classes} />;
208	})
209	: <div>No conversations found</div>
210	}
211	</div>
212	</div>
213	}
214
215
216	const LlmConversationViewer = ({conversationId, classes}: {	1✔
217	conversationId?: string
218	classes: ClassesType<typeof styles>,
219	}) => {
220	const { LlmChatMessage, SectionTitle } = Components	×
221
222	const { document: conversation, loading } = useSingle({	×
223	collectionName: "LlmConversations",
224	fragmentName: "LlmConversationsWithMessagesFragment",
225	documentId: conversationId,
226	skip: !conversationId
227	});
228
229
230	if (!conversationId) {	×
231	return <div className={classes.conversationViewer}>	×
232	No conversation selected
233	</div>
234	}
235
236	if (!conversation && loading) {	×
237	return <div className={classes.conversationViewer}>	×
238	<Components.Loading />
239	</div>
240	}
241
242	if (!conversation) {	×
243	throw new Error("No conversation with selectedId");	×
244	}
245
246	const { title, messages } = conversation;	×
247
248	return <div className={classes.conversationViewer}>	×
249	<SectionTitle title={title} titleClassName={classes.conversationViewerTitle} />
250	{!messages?.length && <div>No messages in this conversation</div>}	×
251	{messages?.length && messages.map((message, idx) => {	×
252	return <LlmChatMessage key={idx} message={message} />	×
253	})}
254	</div>
255	}
256
257
258	export const LlmConversationsViewingPage = ({classes}: {	1✔
259	classes: ClassesType<typeof styles>,
260	}) => {
261	const currentUser = useCurrentUser();	×
262	const [currentConversationId, setCurrentConversationId] = useState<string>();	×
263
264	if (!userIsAdmin(currentUser)) {	×
265	return <Components.Error404 />	×
266	}
267
268	return <AnalyticsContext pageContext="llmConversationViewingPage">	×
269	<div className={classes.root}>
270	<div className={classes.mainColumn}>
271	<LlmConversationSelector
272	currentConversationId={currentConversationId}
273	setCurrentConversationId={setCurrentConversationId}
274	classes={classes}
275	/>
276	<LlmConversationViewer
277	conversationId={currentConversationId}
278	classes={classes}
279	/>
280	</div>
281	</div>
282	</AnalyticsContext>
283	}
284
285	const LlmConversationsViewingPageComponent = registerComponent('LlmConversationsViewingPage', LlmConversationsViewingPage, {styles});	1✔
286
287	declare global {
288	interface ComponentTypes {
289	LlmConversationsViewingPage: typeof LlmConversationsViewingPageComponent
290	}
291	}

ForumMagnum / ForumMagnum / 11580018638

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