10647455166

Committed 31 Aug 2024 06:36PM UTC coverage: 31.884% (+0.04%) from 31.849%

Build # 10647455166

Build Type

Pull #9691

github

Committed by

darkruby501

Commit Message

improve export and increase number of posts

Pull Request Pull Request #9691: Llm chat improvements 2024 08 30

Run Details

5023 of 41128 branches covered (12.21%)

Branch coverage included in aggregate %.

2 of 9 new or added lines in 4 files covered. (22.22%)

281 existing lines in 7 files now uncovered.

29342 of 66653 relevant lines covered (44.02%)

188.04 hits per line

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

18.75

/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';

const styles = (theme: ThemeType) => ({
  root: {
    display: "flex",
    justifyContent: "flex-start",
  },
  mainColumn: {
    display: "flex",
    flexDirection: "row",
    marginLeft: 20,
  },
  conversationSelectorRoot: {
    marginRight: 24,
  },
  conversationViewer: {
    borderRadius: 5,
    width: 500,
    height: "calc(100vh - 114px)",
    backgroundColor: theme.palette.grey[0],
    overflowY: "scroll",
  },
  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 { results, loading } = useMulti({
    collectionName: "LlmConversations",
    fragmentName: "LlmConversationsViewingPageFragment",
    terms: { view: "llmConversationsAll" },
    limit: 200,
  });

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

ForumMagnum / ForumMagnum / 10647455166

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